Apollo Client 3 - how to properly implement optimistic response?

Viewed 134

I have some queries and mutations and one mutation updates quite big entity so I want to add optimistic response after mutate function is fired. The thing is that even if I pass to optimisticResponse object, full data that will be also returned when mutation completes the job it does not add it to cache - it seems that data is refreshed when mutation response is ready since having optimistic response or not the time of updating UI is the same so I assume optimistic response does not work.

Some code examples I have:

Mutation:

mutation UpdateList($id: ID, $data: ListData) {
  updateList(id: $id, data: $data) {
    list_id // 1
    name
  }
}

action

const [action] = useMutation(mutation_from_above)
// async body function so await can be used
await action({ variables: { id: 1, data: { name: 'secret name' }}, optimisticResponse: {
    updateList: {
      __typename: 'List',
      list_id: 1,
      name: 'some updated name until data is back'
    }
  })

and of course I have updated my id field for typename in the cache config like that:

  cache: new InMemoryCache({
    typePolicies: {
      List: {
        keyFields: ['list_id'],
      },
    },
  }),

and it looks pretty simple but for me it does not work. I also checked on API side and response from mutation is the same I pass to the optimisticResponse object. Is there some important point why it is not working ? Can someone explain me what to do in order to get this work ?

Thanks, cheers!

0 Answers
Related