Graphql 阿波罗配置错误?

Graphql 阿波罗配置错误?,graphql,apollo,apollo-client,apollo-server,Graphql,Apollo,Apollo Client,Apollo Server,我有很多Apollo代码,在Apollo库的旧版本中已经完美地工作了6个多月。我正在寻求更新它,以便与阿波罗图书馆的最新版本一起使用 当前,当在graphIQL中运行时,我的查询运行良好,但当从我自己的前端代码运行时,我得到错误: 未处理(在react apollo中)错误:网络错误:网络请求失败,状态为200-“正常” 以下是显示堆栈跟踪的屏幕截图: 这可能是连接阿波罗的初始设置中的配置错误吗 服务器设置 import { subscriptionManager, pubsub } from

我有很多Apollo代码,在Apollo库的旧版本中已经完美地工作了6个多月。我正在寻求更新它,以便与阿波罗图书馆的最新版本一起使用

当前,当在graphIQL中运行时,我的查询运行良好,但当从我自己的前端代码运行时,我得到错误:

未处理(在react apollo中)错误:网络错误:网络请求失败,状态为200-“正常”

以下是显示堆栈跟踪的屏幕截图:

这可能是连接阿波罗的初始设置中的配置错误吗

服务器设置

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
});
…以下是我在客户端上的设置代码:

客户端设置

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中运行良好

我在连接阿波罗的代码中出错了吗


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

客户端上的此编辑似乎已经修复了它:

//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
});