I'm kind new to Apollo Client. Let's talk less and show the code. I have a server that is running and I'm trying to make a mutation using react.

mutation in the server.js

const RootMutationType = new GraphQLObjectType({
  name: "RootMutation",
  description: "Root Mutation Type.",
  fields: () => ({
    addBook: {
      type: BookType,
      args: {
        authorId: { type: GraphQLID },
        name: { type: GraphQLString },
      },
      resolve: async (parent, args) => {
        const book = new Book({
          name: args.name,
          authorId: args.authorId,
        });
        return await book.save();
      },
    },
......
// other crazy stuff here 

Using graphiql Im able to add a book which means the server is running fine. But on the react client when i try to add a book i get the error. Here is what i have.

mutations.js

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

const ADD_BOOK_MUTATION = gql`
  mutation addBook($authorId: Integer!, $name: String!) {
    addBook(authorId: $authorId, name: $name) {
      name
      id
    }
  }
`;

export { ADD_BOOK_MUTATION };

Form.jsx

import React, { useEffect, useRef } from "react";
import { useMutation } from "@apollo/client";
import { ADD_BOOK_MUTATION } from "./mutations";
const Index = () => {
  const [addBook, { data, error }] = useMutation(ADD_BOOK_MUTATION);
  const idRef = useRef(null);
  const nameRef = useRef(null);
  useEffect(() => {
    if (error) {
      console.error(error);
    } else {
      console.log(data);
    }
  }, [data, error]);
  const addBookHandler = (e) => {
    e.preventDefault();
    addBook({
      variables: {
        authorId: idRef.current.value,
        name: nameRef.current.value,
      },
    });
  };
  return (
    <form className="form">
      <input ref={idRef} type="number" placeholder="author id" />
      <input ref={nameRef} type="text" placeholder="book name" />
      <button onClick={addBookHandler}>addBook</button>
    </form>
  );
};
export default Index;

Can someone tell me where am i wrong here!! An help input will be appreciated folks!!

I'm kind new to Apollo Client. Let's talk less and show the code. I have a server that is running and I'm trying to make a mutation using react.

mutation in the server.js

const RootMutationType = new GraphQLObjectType({
  name: "RootMutation",
  description: "Root Mutation Type.",
  fields: () => ({
    addBook: {
      type: BookType,
      args: {
        authorId: { type: GraphQLID },
        name: { type: GraphQLString },
      },
      resolve: async (parent, args) => {
        const book = new Book({
          name: args.name,
          authorId: args.authorId,
        });
        return await book.save();
      },
    },
......
// other crazy stuff here 

Using graphiql Im able to add a book which means the server is running fine. But on the react client when i try to add a book i get the error. Here is what i have.

mutations.js

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

const ADD_BOOK_MUTATION = gql`
  mutation addBook($authorId: Integer!, $name: String!) {
    addBook(authorId: $authorId, name: $name) {
      name
      id
    }
  }
`;

export { ADD_BOOK_MUTATION };

Form.jsx

import React, { useEffect, useRef } from "react";
import { useMutation } from "@apollo/client";
import { ADD_BOOK_MUTATION } from "./mutations";
const Index = () => {
  const [addBook, { data, error }] = useMutation(ADD_BOOK_MUTATION);
  const idRef = useRef(null);
  const nameRef = useRef(null);
  useEffect(() => {
    if (error) {
      console.error(error);
    } else {
      console.log(data);
    }
  }, [data, error]);
  const addBookHandler = (e) => {
    e.preventDefault();
    addBook({
      variables: {
        authorId: idRef.current.value,
        name: nameRef.current.value,
      },
    });
  };
  return (
    <form className="form">
      <input ref={idRef} type="number" placeholder="author id" />
      <input ref={nameRef} type="text" placeholder="book name" />
      <button onClick={addBookHandler}>addBook</button>
    </form>
  );
};
export default Index;

Can someone tell me where am i wrong here!! An help input will be appreciated folks!!

• javascript
• reactjs
• graphql
• apollo-client
• react-apollo

3 Answers 3

Generally these type of error arise because of mismatch between types of mutation parameters and the user defined GraphQL mutation query parameters.

For example, the mutation query I wrote was missing a ! whereas the type definition for the mutation had !.

A mon and easy way to check errors is to install the apollo-client plugin to your browser.

I just figure out myself after some time. $authorId: Integer! should be $authorId:ID.

New mutation

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

const ADD_BOOK_MUTATION = gql`
  mutation addBook($authorId: ID, $name: String!) {
    addBook(authorId: $authorId, name: $name) {
      name
      id
    }
  }
`;

export { ADD_BOOK_MUTATION };