Question

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

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

我现在正在努力解决它，我想知道构建它的最佳方法是什么。我应该使用Apollo-link-state来存储表单状态吗？如果没有，我找不到一种方法将查询组件中的道具映射到组件状态对象而不使用查询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客户端和更新表单

1 个答案: