Error: Response not successful: Received status code 400

Question

The application uses apollo server and react in the frontend. In the backend I use apollo server. The request works via the Playground and Postman and I don't get any errors. Queries in the frontend without parameters also work perfectly. When I make a mutation in the frontend, I get the following error error: Response not successful: Received status code 400. When print debugging in the backend, I also don't get any args. In the Web-console: The XHR POST http://localhost:4000/ contains the following request: {"variables":{},"query":"mutation ($title: String!, $dotColor: String!) {\n newStack(title: $title, dotColor: $dotColor) {\n stackID\n title\n dotColor\n __typename\n }\n}\n"}

src/queries/queries.js

import { gql } from "@apollo/client";

[...]

const newStackMutation = gql`
  mutation($title: String!, $dotColor: String!) {
    newStack(title: $title, dotColor: $dotColor) {
      stackID
      title
      dotColor
    }
  }
`;

[...]

export {[...], newStackMutation};

src/components/NewStack.js

import { useMutation } from "@apollo/client";
import { newStackMutation } from "../queries/queries";
import { useState } from "react";

export default function NewStack() {
  const [newStack] = useMutation(newStackMutation);
  const handleNewStackSubmit = (e) => {
    //newStack({variables}); actually I would pass the variables from the setState here
    newStack({ title: "Test", dotColor: "red" });
  };
  return (
    <div>
      <form onSubmit={handleNewStackSubmit}>
      [...]
          <button type="submit" />
        </div>
      </form>
    </div>
  );
};

Is the mutation type in your type definitions? should look like the query type definition but for mutations — imGreg
Sure, as I said, it works with postman and the playground. So in the backend everything "works" as far as I know. The problem must be in the frontend — heitzlki
I dont see anything wrong with the code snippets you have posted, the only other thing I could think of, would be something wrong with the configuration like if the uri to the hosted graphql server is correct in the frontend — imGreg
Client const client = new ApolloClient({ cache: new InMemoryCache(), uri: "http://localhost:4000", }); Backend const server = new ApolloServer({ cors: { origin: "http://localhost:3000", credentials: true, }, typeDefs, resolvers, playground: true, context: (ctx) => ctx, }); — heitzlki
I know now where the problem is but don't know how to solve it. So the apollo client sends that: mutation ($title: String!, $dotColor: String!) {\n newStack(title: $title, dotColor: $dotColor) as response, that means apollo client don't replac the $-sign with the passed variables. never had anything like that before — heitzlki

imGreg imGreg · Accepted Answer · 2020-12-23T19:24:24

Ah, you know what its probably because you need to add the name of the mutation

const newStackMutation = gql`
  mutation newStack($title: String!, $dotColor: String!) {
    newStack(title: $title, dotColor: $dotColor) {
      stackID
      title
      dotColor
    }
  }
`;// Notice the `newStack` next to `mutation`, that should work

Also this

newStack({variables: { title: "Test", dotColor: "red" }});

Error: Response not successful: Received status code 400

1 Answers