Errors and null returned value with React.js Apollo queries and mutations to Node.JS GraphQL API

Marco Fusco — Fri, 01 Mar 2024 14:41:17 +0000

Hi, I'm having trouble configuring queries and mutations with React.js, Apollo, and GraphQL. Below I have a component with a query and mutation. These queries and mutations work with GraphiQL, but not with my React app. The query returns undefined, and the mutation gives me a status code 400 error. Within my Node.js API, I have a console.log() statement that prints the passed value to the query, so that query is receiving the request properly, and just isn't returning a value. The mutation also works with GraphiQL, but not with my React app. Below is the code that I have. Any help would be greatly appreciated. Thank you.

Component:

import { useQuery, useMutation } from "@apollo/client";
import { TEST, CREATE_CLIENT_ACCOUNT } from "../queries/accountQueries";
import TextInputField from "./TextInputField";

function CreateAccountFormWrapper({ name, email, password, confirmPassword, onChangeState }) {
    const { testData, testLoading, testError } = useQuery(TEST, {
        variables: {
            id: 0
        }
    });
    const [ createClientAccount, { data, loading, error }] = useMutation(CREATE_CLIENT_ACCOUNT);

    console.log(testData);

    return (
            <form onSubmit={(e) => {
                e.preventDefault();

                createClientAccount({
                    variables: {
                        name: name,
                        email: email,
                        password: password
                    }
                })
            }}>
                <div className="flex col">
                <TextInputField 
                        type={"text"}
                        label={"Name"}
                        value={name}
                        onChangeState={onChangeState}
                    />
                    <TextInputField 
                        type={"text"}
                        label={"Email"}
                        value={email}
                        onChangeState={onChangeState}
                    />
                    <TextInputField 
                        type={"password"}
                        label={"Password"}
                        value={password}
                        onChangeState={onChangeState}
                    />
                    <TextInputField 
                        type={"password"}
                        label={"Confirm password"}
                        value={confirmPassword}
                        onChangeState={onChangeState}
                    />
                    <input type="submit" className="button centered"/>
                </div>
            </form>
    )
}

export default CreateAccountFormWrapper;

Queries:

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

const TEST = gql`
    query Test($id: Int!) {
        test(id: $id) {
            id
        }
    }
`;

const CREATE_CLIENT_ACCOUNT = gql`
    mutation CreateClientAccount($name: String!, $email: String!, $password: String!) {
        createClientAccount(name: $name, email: $email, password: $password) {
            id
            auth
        }
    }
`;

export { TEST, CREATE_CLIENT_ACCOUNT };

Schema:

const Test = new GraphQLObjectType({
    name: 'Test',
    fields: () => ({
        id: { type: GraphQLInt }
    })
})

const AccountType = new GraphQLObjectType({
    name: 'Account',
    fields: () => ({
        id: { type: GraphQLID },
        name: { type: GraphQLString },
        email: { type: GraphQLString }
    )}
)}

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
        test: {
            type: Test,
            args: {
                id: { type: GraphQLInt }
            },
            resolve(parent, args) {
                console.log(args.id);

                return {
                    id: args.id
                }
            }
        }
    }
)}

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        createClientAccount: {
            type: AccountType,
            args: {
                name: { type: new GraphQLNonNull(GraphQLString) },
                email: { type: new GraphQLNonNull(GraphQLString) },
                password: { type: new GraphQLNonNull(GraphQLString) }
            },
            async resolve(parent, args) {
                return await account.createAccount({
                    name: args.name,
                    email: args.email, 
                    password: args.password
                });
            }
        }
    }
})

module.exports = new GraphQLSchema({
    query: RootQuery,
    mutation: Mutation
})

DEV Community: Marco Fusco

Errors and null returned value with React.js Apollo queries and mutations to Node.JS GraphQL API