Why do i get error 400 on my graphQL mutation create user

Question

I'm working with Reactjs and GraphQL integration. i got a problem when i'm doing mutation for new user.

Scenario: Creating user using Modals bootstrap. when successful create new user, it shows alert or information success.

Code: Here's my ModalCreate component code.

import React, { useState, useEffect } from 'react';
import { Button, Modal, Form } from "react-bootstrap";

const ModalCreate = (props) => {
    // state for check input component
    const [value, setValue] = useState({ 
                                    username: props.username || '', 
                                    email: props.email || '', 
                                    fullname: props.full_name || '',
                                    password: props.password || '', 
                                    phone: props.phone || '', 
                                    address: props.address || '', 
                                    groupid: props.group_id,
                                });
    
    const onChange = event => {
        setValue({
            ...value,
            [event.target.name]: event.target.value
        })
    }

    useEffect(() => {
        if (props.show) {
            document.body.classList.add("modal-open");
        }

        return () => {
            if (document.body.classList.contains("modal-open")) {
                document.body.classList.remove("modal-open");
            }
        };
  }, [props.show]);

  return (
    <Modal show={props.show}>
      <Modal.Header>
        <Modal.Title> <span>FORMULIR AKUN PENGGUNA</span> </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={e => { 
            e.preventDefault();
            props.action({
                variables: {
                    ...value
                }
            })
         }}>
            <Form.Group className="mb-3">
                <Form.Label>Role Akun</Form.Label>
                <Form.Select aria-label="pilih user role" value={value.groupid} onChange={onChange}>
                    <option value="superadmin">Super Admin</option>
                    <option value="admin">Admin</option>
                    <option value="admin_rj ">Admin RJ</option>
                </Form.Select>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Username</Form.Label>
                <Form.Control name="username" value={value.username} onChange={onChange}/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Nama Lengkap</Form.Label>
                <Form.Control name="fullname" value={value.fullname} onChange={onChange}/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" name="email" value={value.email} onChange={onChange}/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" value={value.password} onChange={onChange}/>
            </Form.Group>
            <Form.Group className="mb-3">
                <Form.Label>Phone</Form.Label>
                <Form.Control type="text" name="phone" value={value.phone} onChange={onChange}/>
            </Form.Group>        
            <Button variant="secondary" type='submit'>
                Simpan
            </Button>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={props.onClose}>
          Keluar
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ModalCreate;

and action/performing mutation in page call index.js:

import React, { useState } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import { Container, Card, Button, InputGroup, FormControl, Form, Spinner } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/fontawesome-free-solid';

import CardInfo from '../../../component/PengaturanPengguna/CardInfo';
import TableUserInfo from '../../../component/PengaturanPengguna/Table';

import { Loading } from '../../../component/Common';
import ModalCreate from '../../../component/PengaturanPengguna/Modals/ModalCreate';

import { GET_ALL_USERS, GET_USER_BY_ID } from '../../../gql/query';
import { REGISTER_USER } from '../../../gql/mutation';

const SearchInput = () => {
    return (
        <InputGroup className="mb-3">
            <InputGroup.Text>
                <FontAwesomeIcon icon={faSearch} />
            </InputGroup.Text>
            <FormControl
                type="text"
                placeholder="Search..."
            />
      </InputGroup>
    )
}

const PengaturanPengguna = (props) => {
    // refetch and query data
    const { data: usersdata, loading: usersloading, error: userserror } = useQuery(GET_ALL_USERS);
    const { refetch, loading } = useQuery(GET_ALL_USERS);

     // show modals
     const [showModal, setShowModal] = useState(false);

    // mutation new register user
    const [registerUser, { loading: registerloading, error: registererror }] = useMutation(REGISTER_USER, {
        refetchQueries: [{ query: GET_USER_BY_ID }, { query: GET_ALL_USERS }],
        onCompleted: data => {
            console.log(data)
        },
        onError: err => {
            console.error(err);
        }
    }) ;

    const handleRefreshClick = () => {
        refetch();
    }

    const handleShowModal = () => setShowModal(true);
    const handleCloseModal = () => setShowModal(false);

    if (usersloading || registerloading) return <Loading/>
    if (userserror || registererror) return <p>Error!</p>

    return (
        <Container>
            <CardInfo/>
            <Card>
                <Card.Title>
                    <span className='base-md text-regular mt-2 std-txt-primary-200'>Data Pengguna Dashboard</span>
                </Card.Title>
                <Card.Body>
                    <div className='d-flex justify-content-between'>
                        <Form inline>
                            <SearchInput/>
                            <Button variant='secondary' onClick={handleRefreshClick} disabled={loading}>{loading ? ( <Spinner
                                as="span"
                                animation="border"
                                size="sm"
                                role="status"
                                aria-hidden="true"/> ) : 'Muat Ulang'}</Button>
                        </Form>
                        <div>
                            <Button variant='success' onClick={() => { setShowModal(true) }}>Daftar Akun</Button>
                        </div>
                    </div>
                    <TableUserInfo users={usersdata}/>
                </Card.Body>
            </Card>
            {
                showModal ? <ModalCreate show={handleShowModal} onClose={handleCloseModal} action={registerUser} /> : null
            }
        </Container>
    )
}

export default PengaturanPengguna;

and here's my mutation:

const REGISTER_USER = gql`
    mutation($input: RegisterInput!) {
        register(input: $input) {
            username
            email
            full_name
            phone
            address
            group_id
        }
    }
`;

Error:

I got this error

Also, Network Status Tabs:

I've been try any solution but it still not working, any help will be appreciated, thank you

Answer 1

If you are getting validation error from apollo for required fields then check the form fields may be name attribute is missing and value is not storing inside your state.