GraphQL - интеграция с JQuery

Веб-приложения отправляют и извлекают данные асинхронно (в фоновом режиме). AJAX позволяет веб-сайтам загружать контент на экран без обновления страницы. jQuery предоставляет несколько методов для функциональности AJAX, что упрощает использование AJAX. В этой главе мы узнаем, как можно интегрировать GraphQL с jQuery.

Рассмотрим приложение, использующее архитектуру клиент-сервер. Мы можем создать интерфейсную веб-страницу, которая запрашивает данные с сервера GraphQL. Веб-страница будет выполнять вызовы AJAX с помощью jQuery на сервер GraphQL.

Чтобы интегрировать GraphQL с JQuery, давайте проверим заголовки запросов GraphiQL и разберемся с параметрами запроса.

Начать hello-worldapp (см. соответствующую иллюстрацию в главе 6). Введите запрос graphql {приветствие} в окне GraphiQL. Щелкните правой кнопкой мыши и проверьте или нажмите (ctrl + shift + I) на Chrome, чтобы перейти на вкладку сети, как показано ниже -

От простого hello-world пример, мы можем понять, что http method используется POST. Теперь в браузере прокрутите вниз до раздела заголовка, чтобы просмотреть  полезные данные запроса .

Как только вы нажмете на view code, вы увидите следующее в разделе полезной нагрузки запроса в chrome.

{"query":"{\n  greeting\n}","variables":null,"operationName":null}

Также обратите внимание на URL-адрес запроса, http://localhost:9000/graphql который должен вызываться из клиентского приложения.

Иллюстрация

Давайте разберемся, как интегрировать GraphQL с JQuery, используя пошаговый процесс.

Настройка сервера

Мы научимся настраивать сервер, используя следующие шаги -

Шаг 1 - Загрузите и установите необходимые зависимости для проекта

Создайте папку с именем jquery-server-app. Измените свой каталог на jquery-server-app из терминала. Выполните шаги с 3 по 5, описанные в главе «Настройка среды».

Шаг 2 - Создайте схему

Добавьте файл schema.graphql в папку проекта jquery-server-app и добавьте следующий код -

type Query
{
   greeting: String
   sayHello(name:String!):String
}

В файле определены два запроса greeting и sayHello. Запрос sayHello принимает строковый параметр и возвращает другую строку. Параметр функции sayHello () не равен нулю.

Шаг 3 - Создайте преобразователи

Создайте файл resolvers.js в папке проекта и добавьте следующий код -

const Query =
{
   greeting: () => 'Hello GraphQL  From TutorialsPoint !!' ,
   sayHello:(root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

Вот, greeting и sayHelloдва резольвера. В преобразователе sayHello значение, переданное параметру name, можно получить через args. Чтобы получить доступ к функциям преобразователя вне модуля, объект запроса должен быть экспортирован с использованиемmodule.exports.

Шаг 4 - Запустите приложение

Создайте файл server.js. См. Шаг 8 в главе «Настройка среды». Выполните в терминале команду npm start . Сервер будет работать на 9000 порте. Здесь мы используем GraphiQL в качестве клиента для тестирования приложения.

Откройте браузер и введите URL-адрес http://localhost:9000/graphiql. Введите в редакторе следующий запрос -

{
   greeting,
   sayHello(name:"Mohtashim")
}

Ответ сервера приведен ниже -

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

Настройка клиента

Поскольку мы уже настроили сервер, теперь мы узнаем, как настроить клиента.

Шаг 1. Создайте новую папку jquery-client-app вне папки текущего проекта.

Сначала мы создадим папку с именем jquery-client-app вне папки проекта.

Шаг 2. Создайте HTML-страницу index.html для интеграции с jQuery.

Мы создадим клиентское приложение в jquery и вызовем оба метода. Ниже приведен код для index.html файл. В index.html страница отправляет запросы на сервер, когда кнопки - Greet и SayHelloнажаты. Мы сделаем асинхронный запрос с помощью функции $ .ajax ().

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {

            $("#btnSayhello").click(function() {

               const name = $("#txtName").val();
               console.log(name);
               $("#SayhelloDiv").html('loading....');

               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",type:'POST',
                  data: JSON.stringify({ query:`{
                     sayHello(name:"${name}")}`
                  }),
                  success: function(result) {
                     console.log(JSON.stringify(result))
                     $("#SayhelloDiv").html("<h1>"+result.data.sayHello +"</h1>");
                  }
               });
            });
            
            $("#btnGreet").click(function() {
               $("#greetingDiv").html('loading....');
               //https://kannan-first-graphql-app.herokuapp.com/graphql
               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",
                  type:'POST',
                  data: JSON.stringify({
                     query:`{greeting}`
                  }),
                  success: function(result) {
                     $("#greetingDiv").html("<h1>"+result.data.greeting+"</h1>");
                  }
               });
            });
         });
      </script>
   </head>
   
   <body>
      <h1>Jquery Client </h1>

      <hr/>
      <section>
         <button id = "btnGreet">Greet</button>
         <br/> <br/>
         <div id = "greetingDiv"> </div>
      </section>
      
      <br/> <br/> <br/>
      <hr/>

      <section>
         Enter a name:<input id = "txtName" type = "text" value = "kannan"/>
         <button id = "btnSayhello">SayHello</button>
         <div id = "SayhelloDiv"> </div>
      </section>
   </body>
</html>

Откройте этот файл в браузере и нажмите кнопку, чтобы увидеть ответ. Результат будет таким, как указано ниже -