如何解决Apollo订阅“ WebSocket握手过程中的错误：意外的响应代码：400”

Question

我有一个使用React并订阅GraphQL后端的旧版应用程序。今天，我升级了所有软件包，尤其是那些软件包（我认为它们是问题的根源，但我不确定）：

• react-apollo从 ^ 2.4.0 到 ^ 3.1.3

• apollo-link-ws从 ^ 1.0.14 到 ^ 1.0.19

工作代码如下：

import {ApolloClient} from 'apollo-client';
import {HttpLink} from 'apollo-link-http';
import {WebSocketLink} from 'apollo-link-ws';
// Other imports....

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

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

const link = ApolloLink.from([
  onError(({graphQLErrors, networkError}) => {
    // Handle graphQLErrors and networkError
  }),
  withClientState({
    //...
    cache
  }),
  splittedLink
]);

export default new ApolloClient({
  link,
  cache
});

这是Apollo website中描述的基本代码，但是升级后，我收到此错误（在网络中查看我的graphQL响应时）：

  

WebSocket握手过程中的错误：意外的响应代码：400

在我的开发终端中，我看到无限的日志说：

备注

在我的setupProxy.js中，我将ws设置为true：

const proxy = require('http-proxy-middleware');

module.exports = app => {
  app.use(proxy('/graphql', {
    target: 'ws://my-backend-url:my-backend-port',
    changeOrigin: true,
    ws: true,
  }));
};

对此有任何反馈或经验吗？