Reactjs Apollo订阅：Apollo Graphql正在操场上接收更新，但没有在客户端接收更新

我在阿波罗GraphQL订阅上使用react，我可以在阿波罗游乐场上接收更新，但不能在客户端接收更新。以下是阿波罗游乐场上的回应：

Graphql服务器已打开

http://localhost:4000/

和对ws://localhost:4000/graphql的订阅。然而，它在操场上工作，但在客户端不起作用。我以这种方式设置了Apollo客户端，以便从服务器接收更新：

import ApolloClient from 'apollo-boost';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

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

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



export const client = new ApolloClient({
  uri: 'http://localhost:4000/',
});

在我看来，我使用了

useSubscriptions

：

const MESSAGE_SENT_SUBSCRIPTION =  gql`subscription {
  messageSent {
    id
    message
  }
}`
const {data: newMessage, loading: newMessageLoading} = useSubscription(MESSAGE_SENT_SUBSCRIPTION, {});

在渲染方面，我使用了：

{!newMessageLoading && JSON.stringify(newMessage)}

但从客户端，它不会接收更新，但我确信它连接到GraphQLWebSockets服务器

服务器端：

let database = require("./src/database.js")
let schema = require("./src/schema.js");
let resolvers = require("./src/resolvers.js");
let {ApolloServer} = require("apollo-server");

// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({ 
  typeDefs: schema, 
  resolvers: resolvers,
  context: {
    database
  }
});

// The `listen` method launches a web server.
server.listen().then(({ url,subscriptionsUrl ,subscriptionsPath}) => {
  console.log(`You need to pass splited link to ApolloClient constructor.
Try to pass it like this (client side):


import ApolloClient from 'apollo-boost';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { onError } from 'apollo-link-error';
import { getMainDefinition } from 'apollo-utilities';

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

export const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/subscriptions`,
  options: {
    reconnect: false
  }
});

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

export const graphqlServer = new ApolloClient({
    link: ApolloLink.from([
        onError(({
            graphQLErrors,
            networkError
        }) => {
            if (graphQLErrors) {
                graphQLErrors.map(({
                        message,
                        locations,
                        path
                    }) =>
                    console.log(
                        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
                    )
                );
            }
            if (networkError) {
                console.log(`[Network error]: ${networkError}`);
            }
        }),
        link // YOUR LINK (NOW MATCHING YOUR CODE)
    ])
});

let database=require（“./src/database.js”）
让schema=require（“./src/schema.js”）；
let resolvers=require（“./src/resolvers.js”）；
让{apollo服务器}=require（“apollo服务器”）；
//ApolloServer构造函数需要两个参数：您的模式
//定义和解析程序集。
const server=新服务器（{
typeDefs:schema，
解析程序：解析程序，
背景：{
数据库
}
});
//“listen”方法启动web服务器。
然后（{url，subscriptionsUrl，subscriptionsPath}）=>{
log（`您需要将拆分的链接传递给客户端构造函数。
尝试这样传递它（客户端）：

和服务器端：

import ApolloClient from 'apollo-client';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { getMainDefinition } from 'apollo-utilities';

export const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql", // use https for secure endpoint
});

// Create a WebSocket link:
export const wsLink = new WebSocketLink({
  uri: "ws://localhost:4000/subscriptions", // use wss for a secure endpoint
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
export const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

// Instantiate client
export const client = new ApolloClient({
  link,
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache()
})

请注意，
/subscriptions
也传递给apollo客户端
我必须从
apollo客户端
导入apollo客户端。以下是客户端的工作配置：

我将对此进行测试并让您知道。看起来您是从其他地方复制了代码，您可以配置您的答案以匹配我的代码吗？我使用相同的堆栈管理器从我的项目中复制。唯一的更改是-我已删除缓存选项。“OneError”未定义，您是否也可以粘贴到错误方法上。是否可以使用上述方法编写代码？出于某些原因ons，您的代码在我这边不起作用。我更改了端口，出现错误
ws
，即
WebSocket在连接建立之前已关闭。
@DanielRearden客户端位于端口3000，graphql端口为4000。我添加了相同的代码，但订阅仍然不起作用。您可以发布新问题吗？我想帮助您.也许你的情况有所不同。我已经在这里发布了我的问题。
import ApolloClient from 'apollo-client';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { getMainDefinition } from 'apollo-utilities';

export const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql", // use https for secure endpoint
});

// Create a WebSocket link:
export const wsLink = new WebSocketLink({
  uri: "ws://localhost:4000/subscriptions", // use wss for a secure endpoint
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
export const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

// Instantiate client
export const client = new ApolloClient({
  link,
  uri: "http://localhost:4000/graphql",
  cache: new InMemoryCache()
})