After following tutorials and attempting to learn GraphQL with React and Express, I've hit a roadblock. The mutation works fine when I test it in graphiql but fails when called from my client.
Client Code:
async addBook(params) {
var title = params["title"];
var author = params["author"];
var src = params["src"];
var mutation = `
{ addBook($author: String!, $title: String!, $src: String!) {
addBook(author: $author, title: $title, src: $src) {
id
title
}
}
}`;
const res = await fetch(this.apiUrl, {
method: 'POST',
mode: 'cors',
headers: new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json',
}),
body: JSON.stringify({
query: mutation,
variables: {author: author, title: title, src: src}
}),
});
if (res.ok) {
const body = await res.json();
console.log(body.data);
return body.data;
} else {
throw new Error(res.status);
}
}
Schema Code:
const typeDefs = `
type Book {
id: ID!
author: String!
title: String!
src: String!
}
type Query {
Books: [Book]
}
type Mutation {
addBook(author: String, title: String, src: String): Book
}
`;
Resolver
Mutation: {
addBook: (root, args) => {
const newBook = {id: Books.length+1, author: args.author, title: args.title, src: args.src};
Books.push(newBook);
return newBook;
},
},
The error
{"errors":[{"message":"Syntax Error GraphQL request (2:25) Expected Name, found $\n\n1: \n2: { mutation ($author: String!, $title: String!, $src: String!) {\n ^\n3: addBook(author: $author, title: $title, src: $src) {\n","locations":[{"line":2,"column":25}]}]}
My "database" is a .js file containing a const books
I can successfully send queries and receive results, but mutations prove to be more challenging.
Any assistance on this matter would be greatly appreciated. Thank you!