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