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-clientEsto 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 graphqlEsto 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.jsonLo 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:
