Apollo Client 3 - optimistic response with pollInterval doesnt work.

[andymrussell]

Intended outcome:

When using optimisticResponse or using cache.writeQuery as part of a mutation, components using pollInterval don't seem to update until the payload from the mutation has been successful.

I have 2 components using the same data. 1 is polling, the other fetches the data from the cache - network.
The non polling component updates correctly, however the polling component waits from the response to come back from the API before updating.

Actual outcome:

Once, the response comes back from the server the polling component updates.

How to reproduce the issue:

Query some data using a hook:
const { data, refetch } = useGetChannelByIdQuery({ skip: !activeChannel, variables: { id: activeChannelId! }, fetchPolicy: 'cache-and-network', pollInterval: 3000, });

Create a mutation and set an optimistic response:
const onFavoriteChannel = (isFavorite: boolean) => { onFavoriteChannelMutation({ variables: { input: { id: props.channel.id, isFavorite } }, optimisticResponse: { __typename: 'Mutation', favoriteChannel: { id: props.channel.id, name: props.channel.name, isFavorite, __typename: 'Channel', }, }, }); };

OR anything with proxy.writeQuery:

Remove the pollInterval from the query, to confirm it works.

Versions

System:
OS: macOS Mojave 10.14
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
Browsers:
Chrome: 84.0.4147.125
Firefox: 28.0
Safari: 12.0
npmPackages:
@apollo/client: ^3.1.3 => 3.1.3

[benjamn]

Can you try @apollo/client@3.2.0-beta.3? I have a hunch that #6854 could possibly be related to this.

[andymrussell]

Just tried it, and it looks to be the same issue.

However, it looks like if I bump the polling to 30 seconds from 3 seconds, it works as expected until its first poll response comes back.
At that point it starts to fail as mentioned above.
Not sure if that helps in anyway?

[benjamn]

@andymrussell Ok, I have a slightly stronger hunch that @apollo/client@3.2.0-beta.5 (which includes #6893) will help with this issue (thanks to c4d100f), if you want to try that.

[gastonmorixe]

@benjamn this is still broken in v3.3.13

[gastonmorixe]

btw, tried 3.4.0-beta.19 and it's broken too

[andrujoh]

@benjamn this is still broken in v3.3.13

Same for me. For now. I am considering setting up a graphql subscription to handle it.

Edit: I solved this by not having an initial pollInterval and instead controlling it with startPolling and stopPolling. I had the problem appear when the app lost connection as I relied on optimisticResponse and cache.modify in the update function for offline functionality.
Here is part of the solution.

useEffect(() => {
  if (!isOnline) {
    stopPolling();
  } else {
    startPolling(5000);
  }
  return stopPolling();
// eslint-disable-next-line
}, [isOnline]);

[gastonmorixe]

@andrujoh good work around, I ended up going for subscriptions.

[brainkim]

Thanks for reporting!

I attempted to reproduce the issue here but could not replicate the issue you were describing. I am probably misunderstanding the exact way your queries and mutations are set up. If you can try and create a runnable reproduction, I’ll take another look!

[brainkim]

Might be related to #7115

[m-lautenbach]

I had the same issue, but updating from 3.1.3 to 3.4.17 fixed it for me.

As described above, optimistic updates worked until the first polling happened. Afterwards, the cache would only update with the server response of the mutation.

[alessbell]

Thanks for the update, @m-lautenbach! I'm going to close this issue in that case, but if anyone can provide a runnable reproduction with v3.4.17 or greater (via CodeSandbox or forkable GitHub repo), please drop a comment here and we will re-open. Thanks!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.