refetch from useSuspenseQuery doesn`t return the updated data with fetchPolicy: 'cache-first' about apollo-client HOT 4 CLOSED

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!

from apollo-client.

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!

from apollo-client.

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.

from apollo-client.

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.

from apollo-client.