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

【问题标题】：Given GraphQL schema, is it possible to do client-side pre-mutation validation?给定 GraphQL 模式，是否可以进行客户端预突变验证？
【发布时间】：2017-02-11 12:55:06
【问题描述】：

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

【问题讨论】：

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

标签： forms validation graphql relay

【解决方案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} 
 ...>
 ...
</>

【讨论】：