Apollo Query Works in GraphIQL but Not in Call to graphql()?

Question

I have an Apollo query that works correctly in localhost:3010/graphiql:

QUERY

query getIMs($fromID: String!, $toID: String!){
  instant_message(fromID:$fromID, toID: $toID){
    fromID,
    toID,
    msgText
  }
}

QUERY VARIABLES

{
  "fromID": "1",
  "toID": "2"
}

Here's my code to run the query via a call to graphql():

const GETIMS_QUERY = gql`
query getIMs($fromID: String!, $toID: String!){
  instant_message(fromID:$fromID, toID: $toID){
    fromID,
    toID,
    msgText
  }
}  `;


const CreateIMPageWithDataAndMutations = graphql(GETIMS_QUERY, {
    options({ toID, userID }) {
        return {
            variables: { fromID: `${userID}`, toID: `${toID}`}
        };
    }
})(CreateIMPageWithMutations);

The Chrome Network tab shows the expected Request Payload:

operationName:"getIMs" query: "query getIMs($fromID: String!, $toID: String!) {↵ instant_message(fromID: $fromID, toID: $toID) {↵
fromID↵ toID↵ msgText↵ __typename↵ }↵}↵" variables:{fromID: "DsmkoaYPeAumREsqC", toID: "572bddac4ecbbac0ffe37fdd"} fromID:"DsmkoaYPeAumREsqC" toID:"572bddac4ecbbac0ffe37fdd"

But the data object is coming back with an ApolloError:

"Network error: Unexpected token < in JSON at position 0"

How can I correct this?

Update

Here's a screen shot of the Network tab:

Looks like you're getting HTML as the response from your server. Make sure your server accepts a JSON string **and** an object for the variables. graphiql sends a JSON string where Apollo sends an object, you're server should handle both scenarios. — Marc Greenstock, Oct 17 '16 at 14:51
If you're using Apollo Server it [should already](http://dev.apollodata.com/tools/apollo-server/requests.html) accept strings and objects "Variables can be an object or a JSON-encoded string". Look in the chrome network requests, what's the response from the server? — Marc Greenstock, Oct 17 '16 at 17:28
In "view source" next to "Response Headers": …I clicked “View Source” next to “Response Headers”: > HTTP/1.1 200 OK > content-type: text/html; charset=utf-8 > vary: Accept-Encoding > content-encoding: gzip > date: Mon, 17 Oct 2016 17:14:02 GMT > connection: keep-alive > transfer-encoding: chunked — VikR, Oct 17 '16 at 17:44
Not view source. Once you perform the GraphQL Query on your app, look at the **Network** tab in the developer console. You should see a request to your GraphQL endpoint. That will show you the response from the XHR request that Apollo made. — Marc Greenstock, Oct 17 '16 at 18:05
I've updated the original post with a screen shot of the Network tab for this call to graphql. Does this show the info you noted? — VikR, Oct 17 '16 at 18:31
I think I've got Apollo running on a different port than graphql() expects. I'll post later when I get more info. — VikR, Oct 17 '16 at 18:50

VikR · Accepted Answer · 2016-10-17T20:15:45.510

With the help of Marc Greenstock and @neophi, I found the answer. I had this code setting up Apollo Client:

const networkInterface = createNetworkInterface({
    uri: '/graphql',
    opts: {
        credentials: 'same-origin',
    },
    transportBatching: true,
});

This was defining the uri relatively and using the same port (3000) that Meteor is running on. But the GraphQL server is of course running on a different port, 3010 in my case. This fixed it:

const networkInterface = createNetworkInterface({
    uri: 'http://localhost:3010/graphql',
    opts: {
        credentials: 'same-origin',
    },
    transportBatching: true,
});

Apollo Query Works in GraphIQL but Not in Call to graphql()?

1 Answers1