GraphQL - Cliente Apollo

Hemos utilizado Apollo Server para construir la especificación graphql en el lado del servidor. Es rápido y fácil construir un servidor GraphQL listo para producción. Ahora entendamos el lado del cliente.

Apollo Client es la mejor forma de utilizar GraphQL para crear aplicaciones cliente. El cliente está diseñado para ayudar al desarrollador a crear rápidamente una interfaz de usuario que obtenga datos con GraphQL y pueda usarse con cualquier interfaz de JavaScript.

Apollo Client admite las siguientes plataformas:

No Señor. Plataforma y marco
1

Javascript

Reaccionar, Angular, Vue, Meteorito, Ember

2

WebComponents

Polímero, lit-apollo

3

Native Mobile

Android nativo con Java, iOS nativo con Swift

El almacenamiento en caché es una de las principales características de Apollo Client. apollo-boost es un paquete de conveniencia que trae un montón de otras dependencias.

Ilustración

Veamos cómo utilizar Apollo Client para crear aplicaciones cliente siguiendo los siguientes pasos:

Configuración del servidor

Tenemos que seguir los pasos a continuación para configurar un servidor:

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

Cree una carpeta apollo-server-app. Cambie su directorio a apollo-server-app desde la terminal. Luego, siga los pasos 3 a 5 explicados en el capítulo Configuración del entorno.

Paso 2: crea un esquema

Añadir schema.graphql archivo en la carpeta del proyecto apollo-server-app y agregue el siguiente código -

type Query
{
   students:[Student]
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

Paso 3: agregar resolutores

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

const db = require('./db')

const Query = {
   //resolver function for students returns list
   students:() => db.students.list(),
}

const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

Paso 4: ejecutar la aplicación

Crear un server.jsarchivo. Consulte el paso 8 del capítulo Configuración del entorno. Ejecute el comando  npm start  en la terminal. El servidor estará funcionando en el puerto 9000. Aquí, usaremos 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.

{
   students{
      id
      firstName
      college{
         name
      }
   }
}

La respuesta a la consulta es la siguiente:

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "name": "CUSAT"
            }
         },
         
         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "name": "AMU"
            }
         },
         
         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "name": "AMU"
            }
         }
      ]
   }
}

Configurar el cliente

Abra una nueva terminal para el cliente. El terminal del servidor debe seguir funcionando antes de ejecutar la aplicación cliente. La aplicación React se ejecutará en el puerto número 3000 y la aplicación del servidor en el puerto número 9000.

Paso 1: crea una aplicación React

En la terminal del cliente, escriba el siguiente comando:

npx create-react-app hello-world-client

Esto instalará todo lo necesario para una aplicación típica de reacción. La utilidad npx y la herramienta create-react-app crean un proyecto con nombrehello-world-client. Una vez que se complete la instalación, abra el proyecto en VSCode.

Paso 2: iniciar hello-world-client

Cambie la ruta de la carpeta actual en el terminal a hello-world-client. Escriba npm start para iniciar el proyecto. Esto ejecutará un servidor de desarrollo en el puerto 3000 y automáticamente abrirá el navegador y cargará la página de índice.

Esto se muestra en la captura de pantalla que se muestra a continuación:

Paso 3: instalar las bibliotecas cliente de Apollo

Para instalar un cliente Apollo, abra una nueva terminal y esté en la ruta de la carpeta del proyecto actual. Escriba el siguiente comando:

npm install apollo-boost graphql

Esto descargará las bibliotecas graphql del lado del cliente y también el paquete Apollo Boost. Podemos verificar esto escribiendo npm view en las dependencias de apollo-boost. Esto tendrá muchas dependencias como se muestra a continuación:

{
   'apollo-cache': '^1.1.15',
   'apollo-cache-inmemory': '^1.2.8',
   'apollo-client': '^2.4.0',
   'apollo-link': '^1.0.6',
   'apollo-link-error': '^1.0.3',
   'apollo-link-http': '^1.3.1',
   'apollo-link-state': '^0.4.0',
   'graphql-tag': '^2.4.2'
}

Podemos ver claramente que la biblioteca Apollo-Client está instalada.

Paso 4: modificar el componente de la aplicación en el archivo index.js

Con Apollo Client, podemos llamar directamente al servidor sin el uso de la API de recuperación. Además, las consultas y mutaciones no se deben incrustar en una cadena hecha con notación de retroceso. Esto se debe a quegqlLa función analiza directamente las consultas. Esto significa que un programador puede escribir consultas directamente de la misma manera cuando escribe consultas en la herramienta GraphiQL. gql es una función de etiqueta que analizará la cadena de plantilla escrita en notación de retroceso en el objeto de consulta graphql. El método de consulta de Apollo Client devuelve una promesa.

El siguiente fragmento de código muestra cómo importar Apollo Client:

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

En el capítulo anterior, discutimos cómo usar la API de búsqueda para solicitudes HTTP. El siguiente código muestra cómo usargqlfunción. losloadStudentsAsync La función utiliza el cliente graphql para consultar el servidor.

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }`
   const {data} = await client.query({query}) ;
   return data.students;
}

Solo necesitas mantener el index.js en srccarpeta e index.html en carpeta pública; todos los demás archivos que se generan automáticamente se pueden eliminar.

La estructura del directorio se da a continuación:

hello-world-client /
   -->node_modules
   -->public
         index.html
   -->src
         index.js
   -->package.json

Lo siguiente es el index.js en la aplicación de reacción -

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

// apollo client

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }
   `
   const {data} = await client.query({query}) ;
   return data.students;
}
class  App  extends Component {
   constructor(props) {
      super(props);
      this.state = {
         students:[]
      }
      this.studentTemplate =  [];
   }
   async loadStudents() {
      const studentData =  await loadStudentsAsync();
      this.setState({
         students: studentData
      })
      console.log("loadStudents")
   }
   render() {
      return(
         <div>
            <input type = "button"  value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
            <div>
               <br/>
               <hr/>
               <table border = "3">
                  <thead>
                     <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>college Name</td>
                     </tr>
                  </thead>
                  
                  <tbody>
                     {
                        this.state.students.map(s => {
                           return (
                              <tr key = {s.id}>
                                 <td>
                                    {s.firstName}
                                 </td>
                                 <td>
                                    {s.lastName}
                                 </td>
                                 <td>
                                    {s.college.name}
                                 </td>
                              </tr>
                           )
                        })
                     }
                  </tbody>
               </table>
            </div>
         </div>
      )
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));

La aplicación de reacción cargará a los estudiantes desde el servidor GraphQL, una vez que hagamos clic en el botón loadStudents como se muestra a continuación: