DEV Community

Marco Fusco
Marco Fusco

Posted on

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

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;
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)