在 apollo 客户端 GraphQL React 应用程序中添加对特定路由的订阅

Question

我正在寻找一种解决方案，我可以将订阅添加到特定路由，而不是在应用程序启动时全局绑定订阅。

我知道订阅可以通过以下代码实现

const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000`,
  options: {
    reconnect: true,
    connectionParams: {
      authToken: localStorage.getItem(AUTH_TOKEN),
    }
  }
})

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  authLink.concat(httpLink)
)

const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

但是如果我添加这个，无论我在哪个页面上，订阅都会在页面加载时直接激活。

有什么解决方案可以让我在特定页面上绑定订阅，而不是全局绑定。

Answer 1

如果您在查询参数中传递令牌并想重新连接到 link，您需要做的就是通过重新分配 link 来更新

wsLink.subscriptionClient.url = `${GraphQLSocketURL}/query?authorization=${newAccessToken}`;

如果您想在页面加载时建立连接，您需要做的就是将惰性标志设置为 true

const wsLink = new WebSocketLink({
  uri: `${GraphQLSocketURL}/query?authorization=${accessToken}`,
  options: {
    reconnect: true,
    reconnectionAttempts: 10,
    lazy: true,
  },
});

在 apollo 客户端 GraphQL React 应用程序中添加对特定路由的订阅

Add subscription to specific route in apollo client GraphQL React app

reactjs

graphql

graphql-subscriptions

apollo-client