Apollo 订阅 - Nextjs - 错误：Observable 在 Concast.removeObserver 过早取消

Question

我正在尝试在我的 nextjs 项目中使用 apollo/graphql 订阅，我的 graphql 服务器放置在外部 nextjs 服务中，我可以毫无问题地处理查询和突变，但是当我使用 useSubscription 的实现时，我收到以下错误：

“错误：Observable 在 eval (webpack-internal: ///../../node_modules/@apollo/client/utilities/observables/Concast.js:21:47) 在 cleanupSubscription (webpack-internal:///../../node_modules/zen-observable- ts/module.js:92:7) 在 Subscription.unsubscribe (webpack-internal:///../../node_modules/zen-observable-ts/module.js:207:7) 在 cleanupSubscription (webpack-internal) :///../../node_modules/zen-observable-ts/module.js:97:21) 在 Subscription.unsubscribe (webpack-internal:///../../node_modules/zen-observable- ts/module.js:207:7) 在 eval (webpack-internal:///../../node_modules/@apollo/client/react/hooks/useSubscription.js:106:26) 在 safeCallDestroy (webpack-内部:///../../node_modules/react-dom/cjs/react-dom.development.js:22763:5）在commitHookEffectListUnmount（webpack-internal:///../../node_modules/react -dom/cjs/react-dom.development.js:22927:11) 在 invokePassiveEffectUnmountInDEV (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24998 :13) 在 invokeEffectsInDev (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:27137:11) 在 commitDoubleInvokeEffectsInDEV (webpack-internal:///. ./../node_modules/react-dom/cjs/react-dom.development.js:27110:7) 在flushPassiveEffectsImpl (webpack-internal:///../../node_modules/react-dom/cjs/react -dom.development.js:26860:5) 在flushPassiveEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26796:14) 在eval ( webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26592:9) 在 workLoop (webpack-internal:///../../node_modules /scheduler/cjs/scheduler.development.js:266:34）在flushWork（webpack-internal:///../../node_modules/scheduler/cjs/scheduler.development.js:239:14）在MessagePort。 PerformWorkUntilDeadline（webpack-internal:///../../node_modules/scheduler/cjs/scheduler.development.js:533:21）”

我知道订阅服务器工作正常，因为我可以从 apollo studio 收听，并且我已经使用 create-react-app 创建了一个水疗中心，并且工作正常

我用过了：

服务器：

• "apollo-server-express": "^3.6.7"
• “graphql-ws”：“^5.7.0”

客户

• “下一个”：“^12.1.5”
• "@apollo/client": "^3.5.10"
• “graphql-ws”：“^5.7.0”

钩子实现

const room = useSubscription(
    gql`
      subscription onRoomAdded($roomAddedId: ID!) {
        roomAdded(id: $roomAddedId) {
          id
          name
        }
      }
    `
  );

客户端实施

import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';
import fetch from 'isomorphic-fetch';

const HOST = 'http://localhost:3001/graphql';
const HOST_WS = 'ws://localhost:3001/graphql';
const isServer = typeof window === 'undefined';

if (isServer) {
  global.fetch = fetch;
}

const httpLink = new HttpLink({
  uri: HOST,
});

const link = isServer
  ? httpLink
  : split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      new GraphQLWsLink(
        createClient({
          url: HOST_WS,
        })
      ),
      httpLink
    );

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

export default client;

对这个问题有什么想法吗？我认为问题可能是 NextJS 仅适用于 subscriptions-transport-ws 但在官方 apollo 文档中表明新的官方方法是使用 graphql-ws 另一个库已经不再维护

更新！ 我已经检查了订阅在生产构建中是否正常工作，我正在研究如何在开发过程中实施。欢迎任何建议。

Answer 1

如果它在生产中工作，但在开发中不工作，您可能会遇到与我的 React SPA 相同的问题：严格模式和双重渲染，如本 github 问题中所述。到目前为止，我已经找到了两种让它发挥作用的方法：

1. 消除StrictMode
2. 使用 vanilla JS 订阅而不是useSubscription

const ON_USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      name
      id
    }
  }
`;

const subscribe = () => {
client.subscribe({
  query: ON_USER_ADDED,
}).subscribe({
    next(data) {
      console.log('data', data);
    },
    complete(){
      console.log('complete');
    },
    error(err) {
      console.log('error', err);
    }
  })
};