En este ejemplo, veremos cómo utilizar el nuevo useQuery
gancho 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 MockedProvider
disponible de@apollo/react-testing
El cliente Apollo proporciona dos formas de enviar consultas GraphQL:
- Usando el método de consulta,
- Usando el
useQuery
gancho React
El useQuery
gancho 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 useState
o useEffect
ganchos, 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.js
archivo 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 useQuery
gancho y la gql
etiqueta (que analiza una cadena en una consulta GraphQL).
A continuación, definimos una constante llamada QUERY
que contiene nuestra consulta GraphQL.
A continuación, dentro del App
componente, llamamos al useQuery
gancho 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
, loading
y refetch
propiedades.
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 error
y loading
.
Si los datos terminan de cargarse, iteramos sobre la data
variable 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 useQuery
gancho?
Podemos usar MockedProvider
disponible en el @apollo/react-testing
paquete de la siguiente manera.
Abra el src/App.test.js
archivo 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.
0 Comentarios
Dejanos tu comentario para seguir mejorando!