Suscripción

Cuando configuramos Apollo por primera vez, utilizamos Apollo Boost para instalar las dependencias necesarias. Pero las suscripciones son un caso de uso avanzado no compatible con Apollo Boost. Así que hemos de instalar más dependencias para configurar las suscripciones.

Configuración de las Suscripciones Apollo con React

Copy
+ $ npm install subscriptions-transport-ws --save

Ahora vamos a necesitar actualizar nuestra instancia ApolloClient para que apunte hacia el servidor de suscripciones.

Abra src/components/App.js y actualice las siguientes importaciones:

src/components/App.js

Copy
- import { ApolloClient, ApolloProvider, InMemoryCache, HttpLink } from '@apollo/client';
+ import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+ import { WebSocketLink } from "@apollo/client/link/ws";

Actualice la función createApolloClient para que incorpore WebSocketLink.

Copy
const createApolloClient = (authToken) => {
  return new ApolloClient({
-   link: new HttpLink({
+   link: new WebSocketLink({
-     uri: 'https://hasura.io/learn/graphql',
+     uri: 'wss://hasura.io/learn/graphql',
+     options: {
+       reconnect: true,
+       connectionParams: {
          headers: {
            Authorization: `Bearer ${authToken}`
          }
+       }
+     }
    }),
    cache: new InMemoryCache(),
  });
};

Tenga en cuenta que vamos a sustituir HttpLink con WebSocketLink y, por lo tanto, todas las consultas GraphQL van a pasar por una única conexión websocket.