Reactjs 阿波罗形态状态管理

使用React Apollo客户端处理表单状态管理的最传统方法是什么？基本的apollo查询和简单的todo应用程序有太多的演练，但我没有看到一个演示如何处理现实表单

想象三种不同的用户流：

编辑现有实体（更新表单）

通过添加/删除元素编辑集合（更新表单）

创建新实体（创建表单）

似乎有几种解决方案：

使用有状态的React组件。该有状态表单嵌套在

和

中，或者可以访问

数据
和
mutate
。提交时，直接使用
mutate
功能提交变异，并（如有必要）在成功时手动更新缓存。它可以工作，但需要更复杂的有状态组件。其中一个副作用是，您必须从道具（
组件将接收道具
等）计算状态，因为表单需要一个
查询（对于更新表单，显示当前值）和一个
变异
，并且可能在表单已经呈现后接收新数据（在refetch/poll上）

使用Apollo链接状态和

@client

-作用域查询。这似乎面临着与有状态组件相同的问题，如果不是更多的话，那是因为额外的间接性。创建表单/新实体很直观，因为新实体可以保存在本地缓存中，然后在提交时发送到远程API，并在成功时自动显示在正常缓存中。但是，对于更新表单来说，这就不那么直观了，因为现在您基本上拥有同一对象的两个副本。表单还必须切换其真实来源，最初从普通缓存读取以填充表单，然后在编辑过程中写入/读取本地缓存，然后可能在提交后恢复到普通缓存。否则，好的解释（如）不会显示如何发送本地缓存的数据，而通常只关注本地数据，如设备API结果和用户配置

在api获取的数据上写入权威的/normal“apollo缓存，然后从缓存中读回数据，将其提交给远程api。这对于更新表单似乎更有意义，因为该实体只有一个状态，但对于新实体不起作用，因为该实体还没有id（虽然我们可以在客户机上生成uuid，但我更希望允许后端生成id），因此Apollo缓存无法处理，AFAIK。另一个问题是，用户刚刚提交的表单数据将在获取时被覆盖，如果某些内容不起作用，这可能会令人沮丧

---

感谢您的建议、示例或意见-提前感谢

我发现

apollo链接状态

在您希望管理完全是客户端状态，而不是从服务器获取的数据的一部分的情况下更有用。我认为它不适合管理组件状态，尤其是表单。将阿波罗号和一个类似的图书馆结合在一起才是最有效的。这降低了组件的样板文件和总体复杂性。下面是一个粗略的例子：

<Query query={SOME_QUERY} />
{({ loading, data }) => {
  if (loading) return <LoadingIndicator/>
  return (
    <Mutation query={SOME_MUTATION}>
      {(mutate) => (
        <Formik
          initialValues={_.pick(data.someData, ['foo', 'bar'])}
          validate={/** optional validation function or schema **/}
          onSubmit={values => mutate({ variables: values })}
        >
          {(formikProps) => (
            <YourFormComponent {...formikProps}/>
          )}
        </Formik>
      )}
    </Mutation>
  )
}}
</Query>

{（{加载，数据}）=>{
如果（正在加载）返回
返回(
{（变异）=>(
变异（{变量：值}）}
>
{（formikProps）=>(
)}
)}
)
}}

---

Formik

组件的渲染功能得到了大量的道具，这些道具都有描述。您的实际表单组件可以是无状态的，基本上只呈现传递给它的道具（值、错误、onChange处理程序等）。Formik接受模式进行验证，这也使得验证输入变得很简单。

非常酷，谢谢，这会让它有一个旋转。您是否发现Formik有任何局限性或您必须解决的问题？如果是这样的话，您的回退会是一个有状态的普通组件吗？就我个人而言，我对它没有任何问题，API非常灵活，并且有很好的文档记录。如果您不想使用该库或类似的库，那么是的，有状态组件几乎是您唯一的选择。