带有订阅的 Apollo 客户端：失败：WebSocket 握手期间出错：意外响应代码：400

Question

我有一个带有 nestjs + graphql + subscription 服务器的 reactjs 应用程序。

我已经在服务器上成功设置了 graphql+订阅。我可以通过交互式游乐场界面对其进行测试。服务器端一切正常。

现在我一直在尝试在客户端上设置 graphql 订阅，但没有成功。我看过无数的教程和类似（甚至相同）的 github 问题。这是我的客户端设置。

我不知道我做错了什么：

import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient } from 'apollo-client';
import { getMainDefinition } from 'apollo-utilities';
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { IntrospectionFragmentMatcher, InMemoryCache } from 'apollo-cache-inmemory';


// this is a factory function I'm using to create a wrapper for the whole application

const ApolloProviderFactory = (props) => {

  const { graphQlUrl, introspectData } = props;

  const httpLink = new HttpLink({
    uri:`http://${graphQlUrl}`,
  });

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

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

  const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: introspectData,
  });
  const cache = new InMemoryCache({ fragmentMatcher });

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

  // this component will wrap the whole application
  const ApolloWrapper = ({ children }: ApolloWrapperProps) => (
    <ApolloProvider client={client}>{children}</ApolloProvider>
  );
  return ApolloWrapper;
}

这是我在运行应用程序时遇到的错误：

任何帮助将不胜感激。

Answer 1

我有 pace.js 库，它以某种方式干扰了整个套接字。在我禁用它之后，一切都按预期工作。