Error occurs during server to server mutation with Apollo Client (query successful)

Question

Error occurs during server to server mutation with Apollo Client (query successful)

Currently, I am using apollo-client on my web server to interact with my graphql server (which is also apollo). While I have successfully implemented a query that retrieves data correctly, I encounter new ApolloError messages when attempting a mutation. Oddly enough, when I directly paste the same mutation into GraphiQL, it works flawlessly.

I have ensured that CORS is enabled and functioning properly on my graphql server. As mentioned earlier, copying and pasting the mutation from my code editor into the GraphiQL editor yields successful results.

If anyone could provide insight into this issue or direct me on how to access more detailed information on my graphql-server regarding why I'm receiving a 400 error, it would be greatly appreciated.

Below is the Apollo error output:

{
  "graphQLErrors": [],
  "networkError": {
    "response": {
      "url": "http://localhost:9000/api/private",
      "status": 400,
      "statusText": "Bad Request",
      ...
    }
  },
  "message": "Network error: Network request failed with status 400 - \"Bad Request\""
}
Error
    at new ApolloError (/Users/rkstar/dev/projects/crate/microservices/dashboard/node_modules/apollo-client/apollo.umd.js:1490:23)
    at /Users/rkstar/dev/projects/crate/microservices/dashboard/node_modules/apollo-client/apollo.umd.js:2149:24
    at process._tickCallback (internal/process/next_tick.js:103:7)

**** UPDATE **** I have added middleware before my apolloMiddleware to log the req.headers and req.body information:

req.headers -------
{
  "accept": "*/*",
  "content-type": "application/json",
  "authorization": "JWT ",
  ...
}

req.body -------
{
  "query": "mutation updateTwitterAccessToken($data: TokenInput!) {\n  updateTwitterToken(data: $data) {...\n}\n}",
  "variables": {
    "data": {
      "accessToken": "...",
      ... 
    }
  },
  "operationName": "updateTwitterAccessToken"
}

When calling client.mutate({ ... }) from my web server, I notice that in the req.body, the property is set as:

req.body -------
{
  "query": "mutation ..."
....
}

The confusion lies in why it shows "query": "mutation ..." instead of "mutation": "mutation ...". Any insights on this discrepancy?

javascript express graphql apollo apollo-server

Answer 1

Answer №1

Summary

The issue was resolved by correcting the nesting of the return property in my update-token.graphql file.

Finally fixed the problem after realizing a mistake in my graphql mutation. I was attempting to access a field that didn't exist within another field.

I had initially tested my query in graphiql and it worked fine. However, I overlooked the fact that I had un-nested one of my return variables, causing the error. Although I thought I had updated the changes back to the original .graphql file, it turned out I missed that step.

An interesting discovery during this process:

I attempted to use middleware to log my request details ------

router.all('/private',
  bodyParser.json(),
  (req, res, next)=>{
    console.log(JSON.stringify(req.route, null, 2))
    next()
  },
  apolloMiddleware
)

This approach provided useful information, but comparing the requests from graphiql and apollo-client did not immediately reveal the error due to the query format differences.

Eventually, I utilized formatError to display the specific error message:

const apolloMiddleware: any = graphqlExpress(request => ({
  debug: debugMode,
  schema: executableSchema,
  context: request,
  formatError: e =>{
    console.log(JSON.stringify(e, null, 2))
  }
}))

It highlighted the following error:

{
  "message": "Cannot query field \"token\" on type \"UserServices\".",
  "locations": [
    {
      "line": 9,
      "column": 7
    }
  ]
}

Upon reviewing this message, I quickly updated the .graphql file, resulting in a successful execution of the mutation through apollo-client.

Answer 2

Summary

The issue was resolved by correcting the nesting of the return property in my update-token.graphql file.

Finally fixed the problem after realizing a mistake in my graphql mutation. I was attempting to access a field that didn't exist within another field.

I had initially tested my query in graphiql and it worked fine. However, I overlooked the fact that I had un-nested one of my return variables, causing the error. Although I thought I had updated the changes back to the original .graphql file, it turned out I missed that step.

An interesting discovery during this process:

I attempted to use middleware to log my request details ------

router.all('/private',
  bodyParser.json(),
  (req, res, next)=>{
    console.log(JSON.stringify(req.route, null, 2))
    next()
  },
  apolloMiddleware
)

This approach provided useful information, but comparing the requests from graphiql and apollo-client did not immediately reveal the error due to the query format differences.

Eventually, I utilized formatError to display the specific error message:

const apolloMiddleware: any = graphqlExpress(request => ({
  debug: debugMode,
  schema: executableSchema,
  context: request,
  formatError: e =>{
    console.log(JSON.stringify(e, null, 2))
  }
}))

It highlighted the following error:

{
  "message": "Cannot query field \"token\" on type \"UserServices\".",
  "locations": [
    {
      "line": 9,
      "column": 7
    }
  ]
}

Upon reviewing this message, I quickly updated the .graphql file, resulting in a successful execution of the mutation through apollo-client.

Error occurs during server to server mutation with Apollo Client (query successful)

Answer №1

Similar questions

Is jquery.validate showing errors more than once?

Preventing Double Click Events on jQuery Spinner

Incorrect Request Method for WCF json POST Request Leads to 405 Error (Method Not Allowed)

Issue with Mongoose: The function within the .find method is not returning the expected result

Numerous animated elements within A-frame

Can someone guide me on how to use contract.on() in ethers.js to listen to events from a smart contract in a node.js application?

Experiencing FCM error: Is your data object null?

Add the useState hook from React to an array

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams

discord.js: Imported array not displaying expected values

Is there a way to set up custom rules in eslint and prettier to specifically exclude the usage of 'of =>' and 'returns =>' in the decorators of a resolver? Let's find out how to implement this

Learn the process of utilizing signed URLs in conjunction with ReactJS to securely store files in AWS

Ways to eliminate the lower boundary of Input text

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

While conducting tests on a Vue single file component, Jest came across an unforeseen token

Empty Ajax array sent to PHP

Steps to temporarily turn off Backbone.sync for a fresh model and then reactivate it once the user clicks the save button

Insert metadata tag into the head element of the parent iframe

Personalized jQuery Slider, Go back to initial slide

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?