Multiple refetch calls result in no cache update

[AmauryLiet]

Hello!

First of all, thank you for your work on this repository ;)
I would be happy to provide any additionnal information to help the team tackle this issue, so don't hesitate to ask!

Intended outcome:

Use case: I want to refresh the cache data by calling multiple refetch(myVar) in a row.

Actual outcome:

If at least 2 refetch-s are called in a row (with different variables obviously), the refetch() response is not saved to the cache.

Everything works fine:

• if only 1 refetch is called
• if I wait for the first refetch to resolve before calling the second (...but this is not ideal performance-wise)

How to reproduce the issue:

// 1/2: queries and fragment
const MY_ENTITY_FRAGMENT = gql`
  fragment MyEntityFragment on MyEntity {
    id
    changingField
  }
`;
const MY_ENTITY_BY_ID = gql`
  ${MY_ENTITY_FRAGMENT}

  query MyQuery($id: ID!) {
    entityById(id: $id) {
      id
      ...MyEntityFragment
    }
  }
`;

// 2/2: refetch logic
const client = useApolloClient();
const { refetch } = useQuery(MY_ENTITY_BY_ID, {
	skip: true,
});

myEntitiesToRefresh.map(async myEntity => {
  const refetchResponse = await refetch({ id: myEntity.id });
  // refetchResponse has the NEW entity value

  // ...however

  // sameContentCache still has the OLD entity value
  const sameContentCache = client.readFragment({
    id: client.cache.identify({
      __typename: 'MyEntity',
      id: myEntity.id,
    }),
    fragment: MY_ENTITY_FRAGMENT,
  });
})

Versions

System:
OS: macOS 11.5.2
Binaries:
Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.2/bin/yarn
npm: 7.21.1 - ~/.nvm/versions/node/v14.17.2/bin/npm
Browsers:
Chrome: 93.0.4577.82
Firefox: 92.0
Safari: 14.1.2
npmPackages:
@apollo/client: ^3.4.10 => 3.4.10
apollo-cache-persist: ^0.1.1 => 0.1.1
apollo-upload-client: ^15.0.0 => 15.0.0

Attempted workaround

Playing with refetchWritePolicy=<merge/overwrite> was unfortunately unhelpful

[benjamn]

@AmauryLiet Happy to help! Does anything change if you don't pass skip: true to useQuery?

[AmauryLiet]

Thanks @benjamn, unfortunately no luck with this attempt :/

[AmauryLiet]

for other readers looking for a temporary workaround, I ended up writing in the cache manually:

  const refetchResult = await refetch({ id: myEntity.id });

  // we force the cache to update
  client.writeFragment({
    id: cache.identify({
      __typename: 'MyEntity',
      id: myEntity.id,
    }),
    fragment: MY_ENTITY_FRAGMENT,
    data: refetchResult.data.entityById,
  });