CODEWITHSUNDEEP
graphqlapolloapollostack
VikR
VikR

Reputation: 5142

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

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:

enter image description here

Upvotes: 1

Views: 1127

Answers (1)

VikR
VikR

Reputation: 5142

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

Upvotes: 1

Related Questions