GraphQL - Integración con JQuery

Las aplicaciones web envían y recuperan datos de forma asincrónica (en segundo plano). AJAX permite que los sitios web carguen contenido en la pantalla sin actualizar la página. jQuery proporciona varios métodos para la funcionalidad AJAX, lo que facilita el uso de AJAX. En este capítulo, aprenderemos cómo podemos integrar GraphQL con jQuery.

Considere una aplicación que utiliza arquitectura cliente-servidor. Podemos crear una página web frontal que solicite datos de un servidor GraphQL. La página web hará llamadas AJAX usando jQuery al servidor GraphQL.

Para integrar GraphQL con JQuery, inspeccionemos los encabezados de solicitud GraphiQL y comprendamos los parámetros de la solicitud.

Iniciar el hello-worldaplicación (consulte el capítulo 6 para ver la ilustración correspondiente). Escriba la consulta de graphql {saludo} en la ventana de GraphiQL. Haga clic derecho e inspeccione o presione (ctrl + shift + I) en Chrome para ir a la pestaña de red como se muestra a continuación -

De lo simple hello-world ejemplo, podemos entender que http method usado es POST. Ahora, en el navegador, desplácese hacia abajo hasta la sección del encabezado para ver la carga útil de la  solicitud .

Una vez que haces clic en view code, verá lo siguiente en la sección de carga útil de solicitud de Chrome.

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

También tenga en cuenta la URL de la solicitud, http://localhost:9000/graphql que debe llamarse desde la aplicación cliente.

Ilustración

Entendamos cómo integrar GraphQL con JQuery usando un proceso paso a paso.

Configurar el servidor

Aprenderemos a configurar el servidor siguiendo los siguientes pasos:

Paso 1: descargue e instale las dependencias necesarias para el proyecto

Crea una carpeta llamada jquery-server-app. Cambie su directorio a jquery-server-app desde la terminal. Siga los pasos 3 a 5 explicados en el capítulo Configuración del entorno.

Paso 2: crea un esquema

Agregue el archivo schema.graphql en la carpeta del proyecto jquery-server-app y agregue el siguiente código -

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

El archivo ha definido dos consultas greeting y sayHello. La consulta sayHello acepta un parámetro de cadena y devuelve otra cadena. El parámetro de la función sayHello () no es nulo.

Paso 3: crear resolutores

Cree un archivo resolvers.js en la carpeta del proyecto y agregue el siguiente código:

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

Aquí, greeting y sayHelloson dos resolutores. En sayHello resolver, se puede acceder al valor pasado al parámetro de nombre a través de args. Para acceder a las funciones de resolución fuera del módulo, el objeto de consulta debe exportarse utilizandomodule.exports.

Paso 4: ejecutar la aplicación

Cree un archivo server.js. Consulte el paso 8 en el capítulo Configuración del entorno. Ejecute el comando npm start en la terminal. El servidor estará funcionando en el puerto 9000. Aquí, usamos GraphiQL como cliente para probar la aplicación.

Abra el navegador y escriba la URL http://localhost:9000/graphiql. Escriba la siguiente consulta en el editor:

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

La respuesta del servidor es la siguiente:

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

Configurar el cliente

Dado que ya hemos configurado el servidor, ahora aprenderemos cómo configurar el cliente.

Paso 1: cree una nueva carpeta jquery-client-app fuera de la carpeta del proyecto actual

Primero, crearemos una carpeta llamada jquery-client-app fuera de la carpeta del proyecto.

Paso 2: cree una página HTML index.html para la integración de jQuery

Crearemos una aplicación cliente en jquery e invocaremos ambos métodos. A continuación se muestra el código para index.html archivo. los index.html la página envía solicitudes al servidor cuando los botones - Greet y SayHellose hace clic. Haremos una solicitud asincrónica usando la función $ .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>

Abra este archivo en el navegador y haga clic en el botón para ver la respuesta. La salida será la que se indica a continuación: