graphql - 阿波罗配置错误？

Question

我有很多 Apollo 代码，它们在旧版本的 Apollo 库中完美运行了 6 个月以上。我正在寻求更新它以使用最新版本的 Apollo 库。

目前我的查询在 graphIQL 中运行时运行良好，但是从我自己的前端代码运行时，我收到错误：

未处理（在 react-apollo 中）错误：网络错误：网络请求失败，状态为 200 - “OK”

这是显示堆栈跟踪的屏幕截图：

与 Apollo 连接的初始设置中是否存在配置错误？

服务器设置

import { subscriptionManager, pubsub } from '/imports/api/subscriptions-server';
import schema from '/imports/api/schema';
import  cors  from 'cors';

//SET UP APOLLO QUERY AND MUTATIONS
import express from 'express';
import bodyParser from 'body-parser';
import { graphqlExpress, graphiqlExpress } from 'graphql-server-express';
const GRAPHQL_PORT = 3010;
var graphQLServer = express().use('*', cors());
graphQLServer.use('/graphql', bodyParser.json(), graphqlExpress(request => ({
    schema: schema
})));
graphQLServer.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
}));
graphQLServer.listen(GRAPHQL_PORT);


console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql`
);
console.log(
    `GraphIQL available on http://localhost:${GRAPHQL_PORT}/graphiql`
);
//END OF SET UP APOLLO QUERIES AND MUTATIONS

//SET UP APOLLO PUBSUB
// WebSocket server for subscriptions
import { createServer } from 'http';
import { execute, subscribe } from 'graphql';
import { SubscriptionServer } from 'subscriptions-transport-ws';
const SUBSCRIPTION_PORT = 5000;
// Create WebSocket listener server
const websocketServer = createServer((request, response) => {
    response.writeHead(404);
    response.end();
});
// Bind it to port and start listening
websocketServer.listen(SUBSCRIPTION_PORT, () => console.log(
    `Websocket Server is now running on http://localhost:${SUBSCRIPTION_PORT}`
));
const subscriptionsServer = new SubscriptionServer(
    {
        execute,
        subscribe,
        schema,
    },
    {
        server: websocketServer
    }
);
//END OF SET UP APOLLO PUBSUB

...这是我在客户端上的设置代码：

客户端设置

import {GET_USERINFOFORIMS_QUERY} from '/imports/api/query-library';
import { gql, ApolloClient, createNetworkInterface, ApolloProvider, graphql, createBatchingNetworkInterface, addTypename } from 'react-apollo';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

const subscriptionClient = new SubscriptionClient(`ws://localhost:5000/`, {
    reconnect: true
});

// Create a normal network interface:
const networkInterface = createNetworkInterface({
    uri: 'http://localhost:3000',
    opts: {
        credentials: 'same-origin',
    },
    transportBatching: true,
    batchInterval: 10

});
// Extend the network interface with the WebSocket
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    subscriptionClient
);

const ApolloClientWithSubscribeEnabled = new ApolloClient({
    networkInterface: networkInterfaceWithSubscriptions,
    queryTransformer: addTypename,
    dataIdFromObject: (result) => {
        if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
            return result.__typename + result.id; // eslint-disable-line no-underscore-dangle
        }
        return null;
    },
    shouldBatch: true,
    initialState: window.__APOLLO_STATE__, // eslint-disable-line no-underscore-dangle
    ssrForceFetchDelay: 100
});

客户端查询

getUserInfoForCurrentUser() {
    const userIsLoggedIn = Meteor.userId() ? true : false;
    if ((userIsLoggedIn) && (this.originatingUser == null)){
        const localThis = this;
        const userID = Meteor.userId();
        this.client.query({
            query: GET_USERINFOFORIMS_QUERY,
            variables: {userID: userID},
        }).then((result) => {
            localThis.originatingUser = result.data.getUserData[0];
        });
    }
}

如前所述，查询从 graphIQL 运行良好。

我在连接到 Apollo 的代码中是否出错？

非常感谢大家的任何想法或信息。

Answer 1

客户端上的此编辑似乎已修复它：

//import ApolloClient, { createBatchingNetworkInterface, addTypename } from 'apollo-client';
// import {addGraphQLSubscriptions} from '/imports/api/subscriptions-client';

import {GET_USERINFOFORIMS_QUERY} from '/imports/api/query-library';

import { ApolloClient, createNetworkInterface } from 'react-apollo';
const networkInterface = createNetworkInterface({
    uri: 'http://localhost:3010/graphql'
});
const ApolloClientWithSubscribeEnabled = new ApolloClient({
    networkInterface: networkInterface
});