reactjs - Apollo 客户端和更新表单

Question

我想知道是否有人有一个使用 Apollo Client 和新的查询和变异组件的更新表单的好例子。通过更新我的意思是：

• 使用查询结果填充表单值
• 编辑输入时更新组件状态（或 apollo-link-state？）。
• 提交时更新状态（或 apollo-link-state？）

我现在正在努力解决它，我想知道构建它的最佳方法是什么。我应该使用 Apollo-link-state 来存储表单状态吗？如果没有，我找不到不使用查询 HOC 将查询组件中的道具映射到组件状态对象的方法。任何例子都会很棒！

谢谢！

标签： reactjsgraphqlreact-apolloapollo-client

Answer 1

如果您的应用程序的其他部分不需要访问该状态，apollo-link-state则可能是矫枉过正——常规的组件状态就可以了。只需像使用 HOC 时一样创建一个组件：

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      fieldA = props.myQuery.fieldA
      fieldB = props.myQuery.fieldB
    }

    render () {
      // your form fields here
    }
  }
}

然后你可以这样做：

<Query>
  {({data, loading})=>(
    if (loading || error) return null
    <MyComponent myQuery={data.myQuery}>
  )}
</Query>