Apollo Client and Update Forms

Question

I was wondering if anyone has a good example of an update form using Apollo Client and the new query and mutation components. By update I mean:

Populate form values with query results
Update the component state (or apollo-link-state?) when the input is edited.
On submission update the state (or apollo-link-state?)

I'm struggling with it right now and I'm wondering what the best way to build it would be. Should I be using Apollo-link-state to store the form state? If not, I can't find a way to map the props from the query component into component state object without using the query HOC. Any examples would be great!

Thanks!

Daniel Rearden Daniel Rearden · Accepted Answer · 2018-05-25T01:36:12

If the state doesn't need to be accessed by other parts of your app, apollo-link-state is probably overkill -- regular component state will do just fine. Just create a component like you would when using the 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
    }
  }
}

You can then just do:

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

Apollo Client and Update Forms

1 Answers