将 Int 值传递给 GraphQL

Question

我正在使用以下数据类型运行 graphql 查询：

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

在我的前端，我使用材料 ui 文本字段，默认情况下将输入作为字符串。要将其更改为整数，我在将参数传递给submitForm函数时使用了Number(freeSeats)etc。

但是，当我提交表单时，我仍然收到这些错误，这意味着这些值仍然作为字符串传递。我该如何解决这个问题？

 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.

我也在submitForm函数的开头尝试了console.log(isNumber(freeSeats)。它打印真实。所以我知道字符串被转换为整数，但没有在突变中正确传递。

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

import { Int } from "type-graphql";

在突变中将类型从 Number 更改为 Int 有效。

Answer 2

graphql 中没有 Number 类型（检查文档）...可能应该是 Int 甚至 ID!

在 typescript 中定义类型 Number 可能是不够的...https://spin.atomicobject.com/2018/11/05/using-an-int-type-in-typescript/

如果 Int 足够（对于 graphQL）那么至少在这里做转换：

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

Answer 3

您可以使用parseInt(freeSeats) 将字符串转换为数字。

请记住：

• 在某些情况下，例如，如果字符串中的数字以 0 开头，这可能会给您一个不正确的值，因为有多种规则可以确定字符串中的数字是二进制、十六进制（以 6 为基数）还是八进制（以 8 为基数）而不是我们的标准以 10 为基数的计数系统。如果发生这种情况，您需要在方法中添加第二个参数，告诉它该数字以 10 为底：parseInt(freeSeats, 10)
• 如果字符串格式不正确或为空，您仍然可能会得到 NaN 或 undefined 值。在尝试使用这些值之前，您可能需要检查它们。