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

Posted 2023-03-08

【中文标题】给定 GraphQL 模式，是不是可以进行客户端预突变验证？

【英文标题】：Given GraphQL schema, is it possible to do client-side pre-mutation validation?给定 GraphQL 模式，是否可以进行客户端预突变验证？

【发布时间】：2017-02-11 12:55:06

【问题描述】：

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

【问题讨论】：

这正是我想要的。找到任何解决方案了吗？

【参考方案1】：

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

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

javascript 解决方案：根据自定义输入类型创建验证模式，并将验证模式传递给 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 
 ...>
 ...
</>