Search code examples
reactjsreact-hooksapolloapollo-clientreact-apollo

Auto saving form without save button - Apollo, React

I'm building React app with Apollo.
I would like to make a form like...

  • call mutation onChange of input
  • the value of input is changed as the user type

I tried...

  • useMutation to save the value
  • useQuery for the value of input

But the value is changed after saved. It's a little late. Also, I have to press delete key twice to make the value empty.

I know that I can use useState for the form value, but is there any way to do this easier? Is there any way to hold the form value even under unstable network, and try resending later?

Solution

  • 'optimisticResponse' is the option for this case.

    It's often possible to predict the most likely result of a mutation before your GraphQL server returns it. Apollo Client can use this "most likely result" to update your UI optimistically, making your app feel more responsive to the user. https://www.apollographql.com/docs/react/performance/optimistic-ui/