Подписки Сервер/Клиент Apollo (React)

Подписка с использованием Apollo Server/Client(React) для реактивности

Подписки — это операции GraphQL, которые отслеживают события, исходящие от сервера Apollo. Подписки используются для процесса реактивности. Все интеграции, поддерживающие HTTP-серверы, такие как Express и Hapi, также предоставляют подписки на GraphQL.

Подписки — это функция GraphQL, позволяющая серверу отправлять данные своим клиентам, когда происходит определенное событие.

Подписки с Аполлоном

Подписки зависят от использования примитивов publish и subscribe для генерации событий, уведомляющих о подписке. PubSub — это фабрика, создающая генераторы событий, предоставляемые всеми поддерживаемыми пакетами.

Начнем с установки пакетов на сервер, поэтому прежде всего установите PubSub.

const { PubSub } = require(‘apollo-server’); 
const pubsub = new PubSub();

Подписки — это еще один тип корневого уровня, аналогичный запросам и мутациям. Для начала нам нужно добавить в нашу схему тип Subscription:

type Mutation {
 addUserName(userName: String!): String
}
type Subscription {   
    UserAdded: String
  }

Нам нужно создать папку Subscription, такую ​​как Mutation и Query, поэтому в разделе Subscription мы должны создать Resolver , распознаватель вернет >AsyncIterator, который асинхронно прослушивает события. Чтобы генерировать события, мы уведомили реализацию pubsub внутри нашего преобразователя мутаций с помощью publish.

const USER_ADDED = ‘USER_ADDED’;
 const resolvers = {
 Subscription: {
 userAdded: {
 subscribe: () => pubsub.asyncIterator([POST_ADDED]),
  },
   },
 },

Теперь мы создали файл подписки, и, как мы знаем, подписка используется внутри мутации, поэтому для этого нам нужно использоватьpubsub.publishвнутримутации

const resolvers = {
Mutation: {
    addUserName(root, { userName }, context) {  
     userNames.push(userName);
     pubsub.publish(USER_ADDED, { userAdded: args });    
     return userName;
    },
  },
},

пожалуйста, посмотрите, как подписка работает на игровой площадке

Теперь подписка на серверную часть завершена, давайте перейдем к клиентской (React) части.

Подписки с клиентом (React)

Узнайте, как получать данные в реальном времени с помощью подписок GraphQL

Помимо извлечения данных с помощью запросов и изменения данных с помощью мутаций, GraphQL поддерживает третий тип операции, называемый subscription.

Подписки GraphQL — это способ передачи данных с сервера клиентам, которые выбирают прослушивание сообщений с сервера в реальном времени. Подписки аналогичны запросам тем, что они определяют набор полей, которые должны быть доставлены клиенту, но вместо немедленного возврата одного ответа результат отправляется каждый раз, когда на сервере происходит определенное событие.

Обзор

Подписки GraphQL должны быть определены в схеме так же, как запросы и мутации:

  subscription {
    userAdded
   }

На клиенте запросы на подписку выглядят так же, как и любые другие операции:

const USERNAME_SUBS = gql`
   subscription {
    userAdded
   }`;

Настройка клиента

Сначала установите WebSocket Apollo Link (apollo-link-ws) из npm:

npm install — save apollo-link-ws subscriptions-transport-ws

Затем инициализируйте транспортную ссылку подписки GraphQL:

import { WebSocketLink } from 'apollo-link-ws';

const wsLink = new WebSocketLink({
  uri: `ws://localhost:5000/`,
  options: {
    reconnect: true
  }
});

Теперь запросы и мутации будут проходить через HTTP как обычно, но подписки будут выполняться через транспорт WebSocket.

import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';

// Create an http link*****:
const httpLink = new HttpLink({
  uri: 'http://localhost:3000/graphql'
});

// Create a WebSocket link*****:
const wsLink = new WebSocketLink({
  uri: `ws://localhost:5000/`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

теперь мы можем применить подписку к компоненту

<div subscribeToMore={() => subscribeToMore({
document: USERNAME_SUBS,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
return {
 getUserNames: [...prev.getUserNames,   subscriptionData.data.userAdded] };
}
})}>
</div>

пожалуйста, найдите ссылку на подписку, сделанную на стороне клиента, как это работает