将 Int 值传递给 GraphQL

Question

I am running a graphql query with these data types:

mutation AddVehicle(
    $freeSeats: Number!
    $numberPlate: String!
    $userId: Number!
  )

On my front-end, I am using material ui text-fields, which take an input as a string by default. To change it into integers, I used Number(freeSeats) etc while passing parameters into the submitForm function.

However, when I submit the form I still get these errors, which means that the values are still being passed as strings. How can I fix this?

 The specified value type of field `freeSeats` does not match the field type.
GraphQL error: The specified value type of field `userId` does not match the field type.

I also tried to console.log(isNumber(freeSeats) in the beginning of the submitForm function. It prints true. So I know that the strings are being converted to integers but not being passed correctly in the mutation.

export default function AddVehiclePage() {
    const [isSubmitted, setIsSubmitted] = useState(false);
    const [isAdded, setIsAdded] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');

    const [addVehicle] = useMutation(ADD_VEHICLE);

    const formik = useFormik({
        initialValues:{
            freeSeats: '',
            numberPlate: '',
            userId: '',
        },
        onSubmit:(values, actions) => {
          submitForm(Number(formik.values.freeSeats),formik.values.numberPlate,Number(formik.values.userId));           
           validationSchema:schema
        })

    let submitForm = (
        freeSeats: Number,
        numberPlate: string,
        userId: Number,
    ) => {
      setIsSubmitted(true);
      addVehicle({
        variables: {
          freeSeats: freeSeats,
          numberPlate: numberPlate,
          userId: userId,
        },
      })
        .then(({ data }: ExecutionResult<CreateVehicleResponse>) => {
          if (data !== null && data !== undefined) {
            setIsAdded(true);
          }
        })
        .catch((error: { message: string }) => {
          console.log('Error msg:' + error.message);
        });
    };

    return (
      <div>
                <Form
                  onSubmit={e => {
                    e.preventDefault();
                    formik.handleSubmit();
                  }}>
                  <div>
                    <TextField
                      variant="outlined"
                      margin="normal"
                      id="freeSeats"
                      name="freeSeats"
                      helperText={formik.touched.freeSeats ? formik.errors.freeSeats : ''}
                      error={formik.touched.freeSeats && Boolean(formik.errors.freeSeats)}
                      label="Free Seats"
                      value={formik.values.freeSeats}
                      onChange={props => {
                        formik.handleChange(props);
                        formik.handleBlur(props);
                      }}
                      onBlur={formik.handleBlur}
                    />
                    <br></br>
                    <TextField
                      variant="outlined"
                      margin="normal"
                      id="numberPlate"
                      name="numberPlate"
                      helperText={formik.touched.numberPlate ? formik.errors.numberPlate : ''}
                      error={formik.touched.numberPlate && Boolean(formik.errors.numberPlate)}
                      label="Number Plate"
                      value={formik.values.numberPlate}
                      onChange={props => {
                        formik.handleChange(props);
                        formik.handleBlur(props);
                      }}
                      onBlur={formik.handleBlur}
                    />
                    <br></br>
                    <TextField
                      variant="outlined"
                      margin="normal"
                      id="userId"
                      name="userId"
                      helperText={formik.touched.userId ? formik.errors.userId: ''}
                      error={formik.touched.userId && Boolean(formik.errors.userId)}
                      label="User Id"
                      value={formik.values.userId}
                      onChange={props => {
                        formik.handleChange(props);
                        formik.handleBlur(props);
                      }}
                      onBlur={formik.handleBlur}
                    />
                    <br></br>
                    <CustomButton                    
                      text={'Add'}
                    />
                  </div>
                </Form>
      </div>
    );
  }

Answer 1

You can use parseInt(freeSeats) to convert a string to a number.

Please bear in mind:

• In some cases for example if the number in the string is preceded by a 0, this may give you an incorrect value as there are various rules to determine whether the number in the string is binary, hexadecimal (base 6) or octal (base 8) instead of our standard base 10 counting system. If this happens you'll need to add a second parameter to the method telling it the number is in base 10: parseInt(freeSeats, 10)
• If the string is incorrectly formed or empty, you could still end up with the values NaN or undefined. You may want to put checks in against these values before trying to use them.

Answer 2

There is no Number type in graphql (check docs)... probably should be Int or even ID!

Defining type Number can be not enough in typescript... https://spin.atomicobject.com/2018/11/05/using-an-int-type-in-typescript/

If Int is enough (for graphQL) then at least do conversion here:

addVehicle({
    variables: {
      freeSeats: parseInt(freeSeats),

Answer 3

import { Int } from "type-graphql";

Changing the type from Number to Int within the mutation worked.