GraphQL (Prisma) Mutation data undefined - reactjs

Question

I’m trying to do a mutation and I keep getting an error about data being null on the React side. However, if I try the same mutation in the GraphQL console it works. Also, I know the endpoint is working because I can Query data with no problem.
Everything
Server code (resolver):
async signup(parent, args, ctx, info) {
// lowercase their email
args.email = args.email.toLowerCase();
// hash their password
const password = await bcrypt.hash(args.password, 10);
// create the user in the database
const user = await ctx.db.mutation.createUser({
data: {
...args,
password,
}
}, info);
return user;
}
Mutation (React Side)
mutation signupUser($email: String!, $password: String!, $name: String!) {
signup(email: $email, password: $password, name: $name) {
__typename
id
email
password
name
}
}
TypeError: Cannot read property 'data' of undefined
at Mutation._this.onMutationCompleted (react-apollo.esm.js:477)
at react-apollo.esm.js:434
Also here is a snippet of my Mutation on the component
<Mutation
mutation={signUpUserMutation}
onCompleted={(user) => {
handleClose();
}}
onError={(error) => {
console.log(error)
setOpen(true);
}}
>
{signup => (
<Form
onSubmit={async (values, { setSubmitting }) => {
await signup({
variables: {
name: values.name,
email: values.email,
password: values.password,
},
});
setSubmitting(false);
}}
>
{({
values, errors, handleChange, handleBlur, isSubmitting,
}) => (

Answer 1

In your schema
type User {
id: Int
name: String
email: String
password: String
}
type Response {
status: Boolean
message: String
data: User
}
type Mutation {
signUp(name: String!, email: String!, password: String!) : Response
}
On Mutation resolver signUp function
async signUp(parent, args, { db }, info) {
// lowercase their email
args.email = args.email.toLowerCase();
// hash their password
const password = await bcrypt.hash(args.password, 10);
// create the user in the database
const data = {
...args,
password,
}
const user = await db.mutation.createUser(data, info);
return user;
}
in database mutation createUser function you can access like that
const createUser = async ({ name, email, password }, info) => {
try {
// Code to save user information in database
return { status: true,
message: "User registration successful. You can login now.",
data: createdUser
}
} catch(e) {
return { status: false, message: e.message, data: null }
}
}
And your query
mutation signupUser($email: String!, $password: String!, $name: String!) {
signup(email: $email, password: $password, name: $name) {
status
message
data {
id
email
password
name
}
}
}