GraphQL - Integrazione JQuery

Le applicazioni Web inviano e recuperano i dati in modo asincrono (in background). AJAX consente ai siti Web di caricare contenuti sullo schermo senza aggiornare la pagina. jQuery fornisce diversi metodi per la funzionalità AJAX, semplificando così l'utilizzo di AJAX. In questo capitolo, impareremo come integrare GraphQL con jQuery.

Considera un'applicazione che utilizza l'architettura del server client. Possiamo costruire una pagina web front-end che richiede dati da un server GraphQL. La pagina web effettuerà chiamate AJAX utilizzando jQuery al server GraphQL.

Per integrare GraphQL con JQuery, esaminiamo le intestazioni della richiesta GraphiQL e comprendiamo i parametri della richiesta.

Avvia il file hello-worldapp (fare riferimento al capitolo 6 per la relativa illustrazione). Digita la query graphql {saluto} nella finestra GraphiQL. Fare clic con il pulsante destro del mouse e ispezionare o premere (ctrl + maiusc + I) su Chrome per accedere alla scheda di rete come mostrato di seguito -

Dal semplice hello-world esempio, possiamo capirlo http method usato è POST. Ora nel browser, scorri verso il basso fino alla sezione dell'intestazione per visualizzare il payload della  richiesta .

Dopo aver fatto clic su view code, vedrai quanto segue nella sezione del payload della richiesta di chrome.

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

Nota anche l'URL della richiesta, http://localhost:9000/graphql che dovrebbe essere chiamato dall'applicazione client.

Illustrazione

Cerchiamo di capire come integrare GraphQL con JQuery utilizzando un processo graduale.

Configurazione del server

Impareremo a configurare il server utilizzando i seguenti passaggi:

Passaggio 1: scaricare e installare le dipendenze richieste per il progetto

Crea una cartella denominata jquery-server-app. Cambia la tua directory in jquery-server-app dal terminale. Seguire i passaggi da 3 a 5 spiegati nel capitolo Configurazione dell'ambiente.

Passaggio 2: creare uno schema

Aggiungi il file schema.graphql nella cartella del progetto jquery-server-app e aggiungi il seguente codice -

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

Il file ha definito due query greeting e sayHello. La query sayHello accetta un parametro stringa e restituisce un'altra stringa. Il parametro della funzione sayHello () non è nullo.

Passaggio 3: creazione di resolver

Crea un file resolvers.js nella cartella del progetto e aggiungi il seguente codice:

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

Qui, greeting e sayHellosono due risolutori. Nel resolver sayHello, è possibile accedere al valore passato al parametro name tramite args. Per accedere alle funzioni del resolver al di fuori del modulo, l'oggetto Query deve essere esportato utilizzandomodule.exports.

Passaggio 4: eseguire l'applicazione

Crea un file server.js. Fare riferimento al passaggio 8 nel capitolo Configurazione dell'ambiente. Esegui il comando npm start nel terminale. Il server sarà attivo e funzionante sulla porta 9000. Qui, usiamo GraphiQL come client per testare l'applicazione.

Apri il browser e digita l'URL http://localhost:9000/graphiql. Digita la seguente query nell'editor:

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

La risposta dal server è la seguente:

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

Configurazione del client

Dato che abbiamo già configurato il server, ora impareremo come configurare il client.

Passaggio 1: creare una nuova cartella jquery-client-app all'esterno della cartella del progetto corrente

Innanzitutto, creeremo una cartella denominata jquery-client-app fuori dalla cartella del progetto.

Passaggio 2: creare una pagina HTML index.html per l'integrazione con jQuery

Creeremo un'applicazione client in jquery e invocheremo entrambi i metodi. Di seguito è riportato il codice per index.html file. Il index.html pagina invia richieste al server quando i pulsanti - Greet e SayHellovengono cliccati. Faremo una richiesta asincrona utilizzando la funzione $ .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>

Apri questo file nel browser e fai clic sul pulsante per vedere la risposta. L'output sarà come indicato di seguito: