Apollo Configuration Error?

Question

I've got a lot of Apollo code that has worked perfectly for 6+ months with old versions of the Apollo libraries. I'm seeking to update it to work with the latest versions of the Apollo libraries.

Currently my queries run fine when run in graphIQL, but when run from my own front-end code, I get the error:

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

Here's a screen shot showing the stack trace:

Could it a configuration error in the initial setup for connecting with Apollo?

SERVER SETUP

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

...and here is my setup code on the client:

CLIENT SETUP

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

CLIENT-SIDE QUERY

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

As noted, the queries run fine from graphIQL.

Am I making an error in my code that connects to Apollo?

Thanks very much in advance to all for any thoughts or info.

VikR VikR · Accepted Answer · 2017-06-19T04:56:25

This edit on the client seems to have fixed it:

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

Apollo Configuration Error?

1 Answers