Apollo-client returns “400 (Bad Request) Error” on sending mutation to server

Question

I am currently using the vue-apollo package for Apollo client with VueJs stack with django and graphene-python for my GraphQl API.

I have a simple setup with vue-apollo below:

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import Cookies from 'js-cookie'


const httpLink = new HttpLink({
  credentials: 'same-origin',
  uri: 'https://localhost:8000/api/',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

// Install the vue plugin
Vue.use(VueApollo)

I also have CORS setup on my Django settings.py with the django-cors-headers package. All queries and mutations resolve fine when I use graphiQL or the Insomnia API client for chrome, but trying the mutation below from my vue app:

'''

import gql from "graphql-tag";
import CREATE_USER from "@/graphql/NewUser.gql";

export default {
  data() {
    return {
      test: ""
    };
  },
  methods: {
    authenticateUser() {
      this.$apollo.mutate({
        mutation: CREATE_USER,
        variables: {
          email: "[email protected]",
          password: "pa$$word",
          username: "testuser"
        }
      }).then(data => {
          console.log(result)
      })
    }
  }
};

NewUser.gql

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email)
  user {
    id
    username
    email
    password
  }
}

returns with the error response below:

POST https://localhost:8000/api/ 400 (Bad Request)

ApolloError.js?d4ec:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400

Regular queries in my vue app, however, work fine resolving the right response, except mutations, so this has me really baffled

score 32 · Accepted Answer · 2018-09-09 20:27:06Z

32

400 errors generally mean there’s something off with the query itself. In this instance, you’ve defined (and you’re passing in) a variable called $username — however, your query references it as $name on line 2.

answered Sep 9, 2018 at 20:27

Daniel Rearden

81.1k11 gold badges187 silver badges184 bronze badges

2

Oh wow, thanks! never saw that, but I have it changed now to the right variable and I still get the same error

– Feyisayo Sonubi

Sep 9, 2018 at 20:34
1

So I finally figured this out, thank you so much for leading me in the right direction, Daniel! My mutation field was missing an outer curly brace after its arguments and I was able to discover this after pasting the query in graphiQL. Could have never thought just one curly brace would have me this stressed.

– Feyisayo Sonubi

Sep 9, 2018 at 21:07

RenzoRenzo 1612 silver badges3 bronze badges · Accepted Answer · 2019-07-08 02:40:18Z

In addition to graphiQL, I would like to add that apollo-link-error package would also had been of great help.
By importing its error handler { onError }, you can obtain great detail through the console about errors produced at network and application(graphql) level :

import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    console.log('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.log('networkError', networkError);
  }
});

const httpLink = ...

const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  ...,
  link,
  ...
});

By adding this configuration where you instantiate your Apollo Client, you would have obtained an error similar to this one:

GraphQLError{message: “Syntax Error: Expected {, found Name “createUser””}

Further information can be found in Apollo Doc – Error handling: https://www.apollographql.com/docs/react/features/error-handling.
Hope it helps in the future.

Oh wow, this is so helpful. Thank you!

– Andrew Einhorn

Jun 6 at 4:19 — Jun 6 at 4:19

cpitcpit 14711 bronze badges · Accepted Answer · 2019-11-22 19:33:39Z

4

For me, it was the fact that I was using a field not defined in the GraphQL schema. Always be careful!

answered Nov 22, 2019 at 19:33

cpit

14711 bronze badges

AustioAustio 5,94920 silver badges34 bronze badges · Accepted Answer · 2018-09-09 21:07:40Z

For sure the mutation is not formatted correctly if that is exactly what you are sending. You need an opening bracket in the mutation

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email) {
    user {
      id
      username
      email
      password
    }
  }
}

With any of these queries when i run into bugs i paste it into either graphiql or graphql playground to identify what the formatting errors is in order to isolate what is wrong.

Yeahh, thanks Austio, I had to paste the mutation in graphiql to detect that. — Sep 9, 2018 at 21:09

Ngugi KiarieNgugi Kiarie 1,35311 silver badges9 bronze badges · Accepted Answer · 2023-01-23 17:15:12Z

For people using laravel for backend, this helped me solve the problem

In the laravel project find file config/cors.php and change line 'paths' => ['api/*', 'sanctum/csrf-cookie'], to 'paths' => ['api/*', 'graphql', 'sanctum/csrf-cookie'],

Also in your vue app ensure that you’re not using the no-cors mode in apollo config

Regards

stalinstalin 213 bronze badges · Accepted Answer · 2023-10-10 09:55:58Z

0

For me, query field name is wrong in schema.

answered 28 mins ago

stalin

213 bronze badges

Apollo-client returns “400 (Bad Request) Error” on sending mutation to server