2017-06-18 118 views
0

我有很多Apollo代碼可以和舊版本的Apollo庫一起工作6個月以上。我正在設法更新它與最新版本的Apollo庫一起工作。Apollo配置錯誤?

目前graphIQL運行時我的查詢運行正常,但是從我自己的前端代碼運行的時候,我得到的錯誤:

Unhandled (in react-apollo) Error: Network error: Network request failed with status 200 - "OK"

這裏顯示堆棧跟蹤的屏幕截圖:

enter image description here

初始設置中是否存在與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的代碼中發生錯誤?

非常感謝所有的任何想法或信息。

回答

0

在客戶端上這個編輯似乎已經解決了它:

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