refetch from useSuspenseQuery doesn`t return the updated data with fetchPolicy: 'cache-first'

[berzhavycha]

Issue Description

When the refetchQueries option in useMutation isn't triggering the fallback in the Suspense component, we have to resort to using refetch to achieve this goal. However, it seems that with fetchPolicy: 'cache-first', we cannot obtain the updated data. In the provided reproduction, I've included the ability to add a new task to a task list. Yet, when I refetch the list of tasks, it doesn't display the new task until I refresh the page. We can resolve this by using 'cache-and-network', but in doing so, we won't see the fallback because partial data is already in the cache.

Link to Reproduction

https://github.com/berzhavycha/repro

Reproduction Steps

1 - git clone https://github.com/berzhavycha/repro.git
2 - cd web
3 - npm i
4 - npm run dev
5 - cd ../server
6 - npm i
7 - npm run start:dev

@apollo/client version

3.9.8

[jerelmiller]

Hey @berzhavycha 👋

This is an interesting one and after digging into it a bit, I'd classify this as "working as expected". Let me explain why:

I see you're using useFetchTasks in both TaskList and the useAddTask, which means you're actually running useSuspenseQuery twice for the same query in the same component. This actually is working, just not in the way you're expecting. If I destructure data from useFetchTasks inside useAddTask and console.log that, I see that data gets updated to the value you're expecting after refetch is run.

Without going into too much technical detail, I'll just say that you're running into issues due to the way we've setup the hook for Suspense promise caching and support for React transitions. Instead, I see this is a misuse of the useSuspenseQuery hook, so please try one of the suggestions below to get this working.

To be honest, it is very unlikely I will put much effort to "fix" this to work as you're expecting with this particular pattern because the adjustments needed in Apollo Client have a high probability of breaking support for React transitions. This is much easier to fix on your end with some adjustments to how you're consuming the hook.

Without further ado, try one of the following two things to get this working:

1. Remove useFetchTasks from useAddTask and move the refetch call inside TaskList.

I'm able to get the desired behavior you're after with these changes:

TaskList.tsx

-  const { data } = useFetchTasks();
+  const { data, refetch } = useFetchTasks();

TaskList.tsx

-        <button onClick={() => onAddTask(title)}>Add Task</button>
+        <button onClick={() => onAddTask(title).then(() => refetch())}>Add Task</button>

useAddTask.ts

export const useAddTask = (): { onAddTask: (title: string) => Promise<void> } => {
  const [addTaskMutation] = useMutation<AddTaskData, AddTaskVariables>(ADD_TASK);

- const { refetch } = useFetchTasks();

- const onAddTask = async (title: string): void => {
+ const onAddTask = async (title: string): Promise<void> => {
    await addTaskMutation({ variables: { input: { title } } });
-   refetch();
  };

  return { onAddTask };
};

2. Switch to useBackgroundQuery and pull in useQueryRefHandlers inside useAddTasks to get access to a refetch function. This would require useAddTasks taking in queryRef as an argument.

Option 1 is probably the simplest, but if you prefer the refetch function inside the mutation hook, option 2 can get you there without the quirks.

Hope this helps!

[jerelmiller]

Hey @berzhavycha 👋

I see you reacted to my comment above, so I'm assuming the above works for you and I will go ahead and close this issue. Feel free to reopen if I've made a mistake in my assumption!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[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.