Apollo Client es una biblioteca de administración de estado completa para aplicaciones JavaScript. Es una herramienta poderosa ya que se puede usar tanto en la parte trasera como en la parte delantera.

En este tutorial, lo usaremos en el front-end y el back-end compilando un servidor Apollo GraphQL con Node JS. Luego, consumiremos los datos del lado del cliente usando React JS.

Si es nuevo en GraphQl, este tutorial podría ayudarlo. De lo contrario, comencemos.

• Construyendo el servidor con Apollo, Node y GraphQl
• Esquema GraphQl
• Resolvedores GraphQl
• Creando el servidor Apollo
• Construyendo el lado del cliente con React
• Conectando React a Apollo
• Obteniendo los datos
• Mostrando los datos

Construyendo el servidor con Apollo, Node y GraphQl

En esta guía, usaré la API de Github para tener datos para mostrar, y esa operación la realizará el servidor GraphQl construido con Apollo y Node JS.

Para que esto suceda, debemos ejecutar el siguiente comando en la terminal para configurar un nuevo proyecto Node JS:

 yarn init 

Una vez realizada la configuración, ahora podemos instalar los paquetes necesarios ejecutando este comando:

 yarn add apollo-server graphql axios 

Genial, ahora tenemos todo lo que necesitamos para construir un servidor. Entonces, primero creemos un nuevo archivo app.jsen la raíz que será el punto de entrada de nuestro servidor.

A continuación, necesitamos definir un esquema Graphql que refleje el aspecto que deberían tener nuestros datos.

Esquema GraphQl

Un esquema describe la forma de su gráfico de datos. Define un conjunto de tipos con campos que se completan desde sus almacenes de datos back-end. Entonces, agreguemos un nuevo esquema en el app.jsarchivo.

• app.js

const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` 

Como puede ver, no usamos todos los datos proporcionados por la API de Github. Solo necesitamos la identificación que se usará como clave de referencia en la aplicación React, el inicio de sesión y avatar_url. También tenemos una consulta usersque devuelve una matriz de usuarios.

Ahora que tenemos un esquema GraphQL, es hora de crear los resolutores correspondientes para completar la operación de consulta.

Resolvedores GraphQl

Un resolutor es una colección de funciones que ayuda a generar una respuesta a partir de una consulta GraphQL. Entonces, agreguemos un nuevo resolutor en el app.jsarchivo.

• app.js

const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } 

Un resolutor debe coincidir con el esquema apropiado por nombre. Por lo tanto, aquí se usersrefiere a la usersconsulta definida en nuestro esquema. Es una función que obtiene los datos de la API con la ayuda de axiosy devuelve, como se esperaba, la identificación, el inicio de sesión y el avatar_url.

Y esa operación puede tardar en completarse. Es por eso que async / await se usa aquí para manejarlo.

Con eso, ahora podemos crear el servidor Apollo en la siguiente sección.

Creando el servidor Apollo

Si recuerda, en el app.jsarchivo, lo habíamos importado ApolloServerdel apollo-serverpaquete. Es un constructor que recibe un objeto como argumento. Y ese objeto debe contener el esquema y el resolutor para poder crear el servidor.

Entonces, modifiquemos app.jsun poco con ApolloServer.

• app.js

const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Aquí, pasamos como parámetro un objeto que contiene el esquema y el resolutor ApolloServerpara crear el servidor y luego lo escucha. Con eso en su lugar, ahora tenemos un servidor funcional con el que trabajar.

Ya puede jugar con él y enviar consultas con la ayuda de GraphQL playground ejecutando este comando:

 yarn start 

Ahora puede obtener una vista previa en //localhost:400

• El app.jsarchivo completo

const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } const server = new ApolloServer({ typeDefs, resolvers, }) server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Un servidor solo no hace mucho. Necesitamos agregar un script de inicio en el package.jsonarchivo para, como adivinó, iniciar el servidor.

• package.json

 // first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" } 

Con eso, tenemos un servidor para obtener datos de la API de Github. Así que ahora es el momento de pasar al lado del cliente y consumir los datos.

Vamos a hacerlo.

Construyendo el lado del cliente con React

Lo primero que tenemos que hacer es crear una nueva aplicación React ejecutando el siguiente comando en la terminal:

npx create-react-app client-react-apollo 

A continuación, necesitamos instalar los paquetes Apollo y GraphQl:

 yarn add apollo-boost @apollo/react-hooks graphql 

Ahora, podemos conectar Apollo con nuestra aplicación React actualizando el index.jsarchivo.

Conectando React a Apollo

• index.js

import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost' import { ApolloProvider } from '@apollo/react-hooks'; import App from './App'; import './index.css'; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: '//7sgx4.sse.codesandbox.io' }) ReactDOM.render(     , document.getElementById('root') ); serviceWorker.unregister(); 

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us inform Apollo about which URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql.

The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

• App.js

import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` 

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell Apollo which data to fetch.

• App.js

const User = ({ user: { login, avatar_url } }) => ( 
{login}
 See profile ) 

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

• App.js

function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 
Something went wrong!
 if (loading) return 
Loading...
 return (  
Github | Users
 {data.users.map(user => (  ))}  ) } export default App 

El useQuerygancho proporcionado por Apollo recibe la consulta GraphQL y devuelve tres estados: la carga, el error y los datos.

Si los datos se recuperan correctamente, los pasamos al componente Usuario. De lo contrario, arrojamos un error.

• El App.jsarchivo completo

import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` const User = ({ user: { login, avatar_url } }) => ( 
{login}
 See profile ) function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 
Something went wrong!
 if (loading) return 
Loading...
 return (  
Github | Users
 {data.users.map(user => (  ))}  ) } export default App 

¡Excelente! Con eso, ahora hemos terminado de construir una aplicación Apollo GraphQL de pila completa usando React y Node JS.

Obtenga una vista previa del servidor Apollo GraphQL aquí

Obtenga una vista previa de la aplicación React aquí

Encuentra el código fuente aquí

Puedes encontrar otro gran contenido como este en mi blog.

¡Gracias por leer!