给定 GraphQL 模式，是否可以进行客户端预突变验证？

Question

我有一个 Relay 应用程序，它与服务器共享一个 GraphQL 模式。对于每个突变，它都会查询服务器，服务器返回关于哪个字段值无效的错误消息。但是鉴于客户端上也存在模式，是否可以针对此模式进行客户端验证？

Answer 1

一个实用的解决方案可以是使用 Yup 和 Formik 共生，然后围绕您的 inputType 手动创建 yup 模式对象，该对象在前端和后端共享。

虽然您没有针对中继编译器提供的模式进行一对一验证，但它仍然是在客户端进行验证的实用方法。

JavaScript 解决方案：根据自定义输入类型创建验证架构，并将validationSchema 传递给 Formik：

const Schema = object().shape({
  coolOrWhat: boolean()
});

return (
  <Formik
    initialValues={{
      coolOrWhat: true
    }}
    validationSchema={Schema}
    ...
  >
  {/* form inputs here */}
  </Formik>
)

TypeScript 解决方案：创建用于验证的对象，在实例化 formik 组件时推断类型并注释该对象：

const Schema = object({
 foo: string()
});

export type SchemaType = InferType<typeof Schema>;

type Props = {
 onConfirm: (value: SchemaType) => void;
 onCancel: () => void;
};

<Formik<SchemaType>
 validationSchema={Schema} 
 ...>
 ...
</>