React Apollo Hooks & Testing: useQuery con refetch y ejemplo de MockedProvider

 En este ejemplo, veremos cómo utilizar el nuevo useQuerygancho disponible en el paquete apollo react-hooks para enviar consultas GraphQL y recibir respuesta con datos obtenidos de las API.

También veremos cómo probar un componente de React que hace uso de los ganchos de Apollo React usando MockedProviderdisponible de@apollo/react-testing

El cliente Apollo proporciona dos formas de enviar consultas GraphQL:

• Usando el método de consulta,
• Usando el useQuerygancho React

El useQuerygancho React le permite pasar una consulta GraphQL y se encargará de obtener los datos . automáticamente.

Tenga en cuenta que el gancho useQuery no es un gancho de React incorporado como useStateo useEffectganchos, sino un gancho personalizado proporcionado por el@apollo/react-hooks package

Suponemos que ya tiene una aplicación React lista. Supongamos también que se llama react-app.

Navegue dentro de la carpeta del proyecto e instale las siguientes bibliotecas:

$ 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

A continuación, abra el src/index.jsarchivo y agregue el siguiente código para configurar Apollo y conéctelo a su (s) componente (s) de la siguiente manera:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';

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

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


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

A continuación, puede enviar consultas GraphQL de la siguiente manera:

import React from 'react';

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


export const QUERY = gql`
{
    pokemons(first: 150) {
      id
      number
      name
    }
  }
`
function App() {
  const { data, loading, error, refetch } = useQuery(QUERY);

  if (loading) return <p>Loading data...</p>;
  if (error) return (
    <React.Fragment>
      <p>Oops, error! </p> 
      <button onClick={() => refetch()}>Please try again!</button>
    </React.Fragment>
  );

  console.log(data);

  return (
    <React.Fragment>
      <h1>
        React Apollo useQuery Example

      </h1>

      <div className="container">

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

            <div key={index}>
              <p>
                {item.name}
              </p>
            </div>

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

export default App;

¡Expliquemos el código! Primero importamos el useQuerygancho y la gqletiqueta (que analiza una cadena en una consulta GraphQL).

A continuación, definimos una constante llamada QUERYque contiene nuestra consulta GraphQL.

A continuación, dentro del Appcomponente, llamamos al useQuerygancho con nuestra consulta de ejemplo que se encargará de enviar la consulta a la API y devolverá un objeto de resultado que tiene datos y otra información sobre la respuesta.

A continuación, desestructurar el objeto de resultado en data, error, loadingy refetchpropiedades.

refetch es una función que se puede utilizar para reenviar la consulta GraphQL en caso de error.

Por último, hacemos una representación condicional en función de los valores de las variables errory loading.

Si los datos terminan de cargarse, iteramos sobre la datavariable usando el map()método JavaScript y mostramos el nombre de cada elemento.

Cuando llama al gancho useQuery React, Apollo devuelve los datos junto con otras propiedades. Más importante:

• loading: Un booleano que indica si la solicitud aún no se ha realizado. Si carga es igual a verdadero, la solicitud aún no ha finalizado.
• error: tiene información sobre lo que salió mal con su consulta si hay un error.
• datos: un objeto que contiene el resultado de la consulta GraphQL devuelta desde el servidor API.

Prueba del componente

Ahora, ¿cómo probar un componente de React que hace uso del useQuerygancho?

Podemos usar MockedProviderdisponible en el @apollo/react-testingpaquete de la siguiente manera.

Abra el src/App.test.jsarchivo y actualice de la siguiente manera:

import { MockedProvider } from '@apollo/react-testing';
import { act, render } from '@testing-library/react';
import React from 'react';

import App, { QUERY } from './App';

const MOCKS = [
  {
    request: {
      query: QUERY,
    },
    result: {
      data: {
        pokemons: [
          {
            id: 1,
            number: 1
            name: 'Pikatchu'
          }],
      },
    },
  },
];

async function wait(ms = 0) {
  await act(() => {
    return new Promise(resolve => {
      setTimeout(resolve, ms);
    });
  });
}

it('renders', async () => {
  const { container } = render(
    <MockedProvider addTypename={false} mocks={MOCKS}>
      <App />
    </MockedProvider>
  );
  expect(container.textContent).toBe('Loading data...');

  await wait();

  expect(container.textContent).toMatch('React Apollo useQuery Example');
  expect(container.textContent).toMatch('Pikatchu');
});

Conclusión

En este ejemplo rápido, hemos aprendido sobre Apollo React useQuery hook y vimos cómo recuperar datos y cómo probar un componente de React que hace uso de Apollo React hooks usando MockedProvider y React Testing Library.