Apollo 客户端和更新表单

Question

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

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

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

谢谢！

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>

Apollo 客户端和更新表单

Apollo Client and Update Forms

reactjs

graphql

react-apollo

apollo-client