Subscription

Apolloの初期セットアップの際に、Apollo Boostで必要なdepdendenciesをインストールします。ただし、subscriptionsはApollo Boostがサポートしていない高度なユースケースです。そのため、subscriptionsのセットアップには、より多くのdepdendenciesをインストールする必要があります。

React Apollo Subscriptionsのセットアップ

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

ここでは、 ApolloClient インスタンスを更新して、subscriptionサーバー指向に設定します。

src/components/App.js を開いて、importを以下の通り更新します。

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";

createApolloClient関数を更新して、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(),
  });
};

なお、HttpLinkをWebSocketLinkに置き換えるため、すべてのGraphQL queriesは単一のWebSocket接続を経由する点に注意してください。