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

+ $ 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:

githubsrc/components/App.js
- 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.

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.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin