Update the cache of Apollo client 3 when polling not working

[gregoryforel]

Intended outcome:

I am playing with the cache of @apollo/client v3. codesandbox

I am adding a user to a cached list of users using client.writeQuery, and the query has a pollInterval to refetch every few seconds.

I am able to add the user to the list, it does refresh the UI, and I can see the pollInterval working in the network tab of Chrome.

THE PROBLEM

I would expect the list of users to return to its initial state when the polling kicks in, and overwrite the user I added manually to the cache, but it does not.

Apollo config

export const cache = new InMemoryCache();

const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: "https://fakeql.com/graphql/218375d695835e0850a14a3c505a6447"
  })
});

UserList

export const UserList = () => {
  const { optimisticAddUserToCache, data, loading } = useUserList();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <button onClick={() => optimisticAddUserToCache()}>Add User to cache</button>
      <ol>
        {data?.users.map(user => {
          return <li key={user.id}>{user.firstname}</li>;
        })}
      </ol>
    </div>
  );
}

useUserList

const GET_USER_LIST = gql`
  query Users {
    users {
      id
      firstname
    }
  }
`;

export const useUserList = () => {
  const { loading, error, data, refetch } = useQuery(GET_USER_LIST, {
    pollInterval: 4000 // It does poll (check chromes's network tab), but it doesn't seem to overwrite the cache
  });
  const client = useApolloClient();

  const optimisticAddUserToCache = () => {
    const newUser: any = {
      id: `userId-${Math.random()}`,
      firstname: "JOHN DOE",
      __typename: "User"
    };

    const currentUserList = client.readQuery({ query: GET_USER_LIST }).users;

    // This works, it does add a user, and UI refreshes.
    client.writeQuery({
      query: GET_USER_LIST,
      data: {
        users: [newUser, ...currentUserList]
      }
    });
  };

  return { optimisticAddUserToCache, loading, error, data, refetch };
};

How to reproduce the issue:
codesandbox
Just click on the button. It will add a user. The polling works but it won't overwrite the cache to remove the newly added user.

Versions
System:
OS: Windows 10 10.0.18363
Binaries:
Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - D:\code\schedio\web\node_modules.bin\yarn.CMD
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.18362.449.0)
npmPackages:
@apollo/client: ^3.2.2 => 3.2.2

[mvincent7891]

I have almost the exact same issue.

In my case, the optimistic update is of an existing record in the cache.

The optimistic update succeeds, verified in the UI. When the refetch (on a polling interval) comes back, I can see in the network tab that the data is different than the cached (displayed) data. Yet there is no update of the cache. I've attempted each of the fetchPolicy options as well, with no luck.

[kharithomas]

I ran into this same issue today. Polling is being called as verified in the Network tab - but the UI will not refresh.

*Edit: I polling works fine and UI updates are also working as expected.

I realized the issue was using React Table component which memoized the state to decrease renders.

This prevented the UI from updating as it should so for future viewers, if your network tab is updating its likely a component issue.

[alexandrchebotar]

I run into the same issue.
Polling query returns non-normalized object that contains an array of normalized objects. All those normalized objects successfully update in cache, but query result stays the same in the root query object.
Playing with fetchPolicy doesn't change anything. Btw, "no-cache" policy is ignored on polling query. There is open issue - #9691. Maybe it's something related.
Workaround with manual calling refetch on that query works fine. All data is updated once a response is received.