Setup and Connect an Apollo Client to a React Application with Apollo Provider

Aprenderemos cómo configurar el cliente Apollo utilizando Apollo Boost, conectarlo a un endpoint GraphQL y usar el proveedor Apollo para conectarlo a nuestra aplicación React. Además demostramos cómo usar un Apollo Consumer.

Luego de tener nuestra aplicación React creada inicialmente usando create-react-app. Vamos a comenzar con Apollo Client, vamos a instarlar las dependencias necesarias para agregar los siguientes paquetes npm, GraphQL, apollo-boost y react-apollo.

Debemos estar dentro de la carpeta client

# Install dependencies
$ npm i -S graphql apollo-boost react-apollo

El paquete GraphQL es necesario para ciertas características, como el análisis de consultas GraphQL. Apollo-boost es un paquete que viene con el ApolloClient bien configurado para comenzar rápidamente. Por último, pero no menos importante react-apollo, integra Apollo con React proporcionando múltiples componentes y utilidades.

Simplifiqué el por defecto del archivo /client/src/App.js.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>

        <div>Hello World!</div>

      </div>
    );
  }
}

export default App;

Luego, importamos ApolloClient desde apollo-boost e instanciamos un nuevo ApolloClient(). La única opción obligatoria que debemos proporcionar es uri: para nuestro endpoint GraphQL. En este caso, estamos usando "http://localhost:4000/", ya que allí ya tengo un servidor GraphQL en ejecución.

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://localhost:4000/"
});

Vamos a verificar que nuestro cliente funciona como se espera al solicitar datos de nuestro endpoint GraphQL mediante una consulta. Nuestro client espera un objeto que contiene al menos la propiedad de query.

Escribimos uno usando la notación de template tag. ¿Qué busca ahora? Nuestro backend es un libro de cocina que contiene recetas. Para empezar, podemos crear todas las recetas. Para cada uno de ellos, solicitamos el id y el title.

client
  .query({
    query: gql`
      {
        recipes {
          id
          title
        }
      }
    `
  })

Si observas, puedes ver que es necesario importar gql, esta dependencia es un template literal string que analiza las consultas de GraphQL en el estandar AST. Las cadenas GraphQL son la forma correcta de escribir consultas en nuestro código, ya que pueden analizarse de forma estática utilizando herramientas como eslint-plugin-graphql. Sin embargo, las cadenas son un inconveniente de manipular, si está tratando de hacer cosas como agregar campos adicionales, combinar varias consultas entre sí u otras cosas interesantes.

Ahí es donde entra en juego este paquete: le permite escribir sus consultas con los literales de plantilla de ES2015 y compilarlas en un AST con la etiqueta gql.

Para utilizarlo solo es necesario agregar la siguiente linea en el top de nuestro archivo:

import gql from "graphql-tag";

Volviendo a nuestro código, una vez que la consulta se resuelve, imprimimos los resultados.

client
  .query({
    query: gql`
      {
        recipes {
          id
          title
        }
      }
    `
  })
.then(result => console.log(result));

Como puede ver, una vez que cargamos la página, la consulta se ejecutó y nuestro resultado se registró en la consola. Hasta ahora vamos bien.

Ya que tenemos ReactApollo disponible, veamos cómo podemos configurarlo y usarlo dentro de nuestra función de render. import { ApolloProvider } from "react-apollo",. El ApolloProvider requiere una instancia de Apollo {cliente} En nuestro caso, tomamos el que ya inicializamos y una vez configurado el ApolloProvider ahora pasamos el cliente por el árbol de rendering a través de una función de React context.

import { ApolloProvider } from "react-apollo";

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </header>
          <div>Hello World!</div>
        </div>
      </ApolloProvider>
    );
  }
}

Ahora vamos a usar un ApolloConsumer, donde podemos aprovechar esta configuración para usar nuestro cliente para hacer consultas más a fondo en nuestro árbol de renderizado de React.

import { ApolloProvider, ApolloConsumer } from "react-apollo";

En este caso, tomamos nuestra consulta existente y la ejecutamos dentro de una render prop de ApolloConsumer.

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div>Hello World!</div>
        <ApolloConsumer>
          {client => {
            client
            .query({
              query: gql`
                {
                  recipes {
                    id
                   title
                  }
                }
              `
            })
            .then(result => console.log(result));

             return null;
          }}
        </ApolloConsumer>
      </ApolloProvider>
    );
  }
}

Para cumplir con las expectativas de la API de React, devolvimos null.

Si bien ApolloConsumer puede ser útil en algunos casos, la mayoría de las veces, utilizará el componente de Consulta/Mutación o componentes de orden superior, todos en ReactApollo.