将 Int 值传递给 GraphQL

Question

我是运行具有这些数据类型的 graphql 查询：

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

在我的前端，我使用 material 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.

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

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

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

请牢记：

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

Answer 2

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

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

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

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

Answer 3

import { Int } from "type-graphql";

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

将 Int 值传递给 GraphQL

Pass Int Values to GraphQL

javascript

typescript

reactjs

graphql

formik