Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Consumir API GraphQL con React Hooks (useQuery) y Apollo Client

 A lo largo de este tutorial, veremos por ejemplo cómo consumir y obtener una API GraphQL con React Hooks y Apollo Client .

En particular, veremos cómo usar el useQuerygancho para enviar consultas GraphQL al servidor y la gqletiqueta para escribir consultas GraphQL.

La API GraphQL está alojada en este enlace y proporciona información sobre Pokémons.

Estos son los pasos de este tutorial:

  • Paso 1: configuración
  • Paso 2: inicializar un nuevo proyecto de React
  • Paso 3: configuración del cliente Apollo
  • Paso 4: inicialización del cliente Apollo con el caché en memoria y el enlace HTTP
  • Paso 5: vincular el cliente Apollo a los componentes de React
  • Paso 6: envío de consultas GraphQL y consumo de la API
  • Paso 7: creación de la aplicación React

Antes de que podamos comenzar, necesitaremos algunas cosas.

Requisitos

Si desea seguir este tutorial paso a paso, deberá tener los siguientes requisitos

  • Node.JS y NPM instalados en su máquina de desarrollo,
  • Familiaridad con JavaScript / ES6 + moderno,
  • Experiencia laboral de React.

Puede obtener fácilmente los binarios de Node y NPM desde el sitio web oficial o, mejor aún, usar NVM , un script bash compatible con POSIX para instalar y administrar múltiples versiones activas de Node.

Paso 1: configuración

Comencemos con el primer paso donde configuraremos create-react-app, la herramienta oficial para crear y trabajar rápidamente con proyectos de React.

Abra una nueva interfaz de línea de comandos y ejecute el siguiente comando:

$ npm install -g create-react-app

Nota: En caso de que obtenga algún error EACCESS al instalar el paquete globalmente en su sistema. asegúrese de agregar sudoantes de su comando en Linux y macOS, o use un símbolo del sistema con acceso de administrador en Windows. También puede corregir sus permisos npm .

Al escribir este tutorial se instaló create-react-app v3.1.1 .

Paso 2: inicializar un nuevo proyecto de React

En el segundo paso, inicializaremos un nuevo proyecto de React.

Dirígete a tu interfaz de línea de comandos y ejecuta el siguiente comando:

$ create-react-app react-graphql-example

A continuación, ejecute el servidor de desarrollo local con los siguientes comandos:

$ cd react-graphql-example
$ npm start

El servidor de desarrollo se ejecutará desde la http://localhost:3000dirección.

Esta es una captura de pantalla de la aplicación React en un navegador web:

Ejemplo de React GraphQL

Vea cómo consumir una API REST con React y Axios .

Paso 3: configuración del cliente Apollo

En este paso, configuraremos el cliente Apollo.

Apollo Client es una solución de gestión de datos diseñada para GraphQL.

Apollo proporciona almacenamiento en caché inteligente que le permite ser una única fuente de verdad para los datos locales y remotos de su aplicación.

Estas son las bibliotecas necesarias para configurar Apollo:

  • graphql : la implementación GraphQL en JavaScrip,
  • apollo-client : un cliente GraphQL que admite React y otras bibliotecas,
  • apollo-cache-inmemory : una implementación de caché para Apollo Client,
  • apollo-link-http : El Apollo Link más común, un sistema de componentes modulares para redes GraphQL.
  • react-apollo : esta biblioteca proporciona las integraciones para Apollo en React,
  • graphql-tag : esta biblioteca exporta múltiples utilidades para trabajar con consultas GraphQL.

Dirígete a una nueva interfaz de línea de comandos e instala las bibliotecas mencionadas usando los siguientes comandos:

$ npm install graphql --save 
$ npm install graphql-tag --save

$ npm install apollo-client --save 
$ npm install apollo-link-http --save 
$ npm install apollo-cache-inmemory --save 

$ npm install react-apollo --save 

Paso 4: inicialización del cliente Apollo con el caché en memoria y el enlace HTTP

En este paso, inicializaremos el cliente Apollo.

Vaya al src/index.jsarchivo en su proyecto React y comience agregando las siguientes importaciones:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

Simplemente importamos el cliente Apollo, la caché en memoria y las bibliotecas de enlaces HTTP.

A continuación, inicialice tanto el caché en memoria como el enlace HTTP de la siguiente manera

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'https://graphql-pokemon.now.sh/'
})

Proporcionamos el URI de nuestra API GraphQL al enlace HTTP a través del uriparámetro. Esta biblioteca es responsable de la creación de redes.

Finalmente, inicialice el cliente Apollo de la siguiente manera:

const client = new ApolloClient({
  cache,
  link
})

Simplemente creamos una instancia de ApolloClienty pasamos el caché y los objetos de enlace que creamos previamente.

Paso 5: vincular el cliente Apollo a los componentes de React

En este paso, vincularemos el Cliente Apollo, que creamos en el paso anterior, con nuestro (los) componente (s) de React utilizando los nuevos ganchos de Apollo, lo que nos permite realizar operaciones GraphQL fácilmente desde la interfaz de usuario.

Regrese al src/index.jsarchivo en su proyecto React y comience importando de la ApolloProvidersiguiente manera:

import { ApolloProvider } from '@apollo/react-hooks';

A continuación, envuelva el Appcomponente de la ApolloProvidersiguiente manera:

/* [...] */
ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));

Paso 6: envío de consultas GraphQL y consumo de la API

En este paso, veremos cómo enviar consultas GraphQL para consumir la API.

Dirígete al src/App.jsarchivo en tu proyecto React y agrega las siguientes importaciones:

import { useQuery } from '@apollo/react-hooks';
import gql from "graphql-tag";

El useQuerygancho le permite enviar una consulta GraphQL al servidor, mientras que la gqletiqueta le permite escribir consultas GraphQL de varias líneas.

El useQuerygancho expone el error, la carga y las propiedades de los datos de un objeto de resultado.

A continuación, agregue la siguiente consulta GraphQL de ejemplo en el src/App.jsarchivo:

const EXAMPLE_QUERY = gql`
{
    pokemons(first: 90) {
      id
      number
      name,
      image
    }
  }

Esta consulta te permitirá obtener los primeros 90 pokémons con su identificación, número, nombre e imagen.

A continuación, ejecute la consulta GraphQL usando el useQuerygancho de la siguiente manera:

function App() {
  const { data, loading, error } = useQuery(EXAMPLE_QUERY);

  if (loading) return <p>Still loading..</p>;
  if (error) return <p>There is an error!</p>;

Simplemente desestructuramos el objeto devuelto por el useQuery()gancho para obtener los atributos de datos, carga y error.

Cuando es loadingigual, truees decir, cuando todavía se reciben datos, el Appcomponente se mostrará " Still loading .." .

Si hay un error, el componente se procesará. ¡ Hay un error! .

De lo contrario, tendremos nuestros datos en la variable de datos que podemos representar de la siguiente manera:

  return (
    <React.Fragment>
      <div className="container">

        {data && data.pokemons &&
          data.pokemons.map((pokemon, index) => (

            <div key={index}>

              <img src={pokemon.image} />
              <div>
                <h3>{pokemon.name}</h3>

              </div>
            </div>

          ))}
      </div>
    </React.Fragment>
  );

Paso 7: creación de la aplicación React

En este paso, veremos cómo construir su aplicación.

Dirígete a tu interfaz de línea de comandos y ejecuta el siguiente comando:

$ npm run build

Este comando generará un paquete optimizado listo para producción en la buildcarpeta de su proyecto React que puede cargar en su servidor de alojamiento.

Conclusión

En este tutorial paso a paso, hemos visto cómo consumir una API GraphQL en una aplicación de ejemplo de React usando el cliente Apollo y los hooks de React.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas