TanStackT
TanStack•2y ago•
17 replies
awake-maroon

[SOLVED] Refetch not occurring after router.back (React Native)

Version "@tanstack/react-query": "^5.37.1",


I'm not seeing a refetch automatically occurring after the data is updated.

I have a Project details screen that leveraged useQuery to fetch the data for display:
const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();

  const { isPending, error, data } = useQuery({
    queryKey: ["projects", id],
    queryFn: () => fetchProjectById(id),
  });

Also within this screen the user is presented a button that shows a modal to edit:
<Button
          onPress={() => {
            router.navigate(`/(authenticated)/projects/create?id=${id}`);
          }}
        >

When the user updates their form and saves it calls an update mutation:

/(authenticated)/projects/create.tsx:
const updateProjectMutation = useMutation({
    mutationFn: updateProject,
    onSuccess: (updated: Project) => {
      console.log("Invalidating data now!");

      queryClient.invalidateQueries({
        queryKey: ["projects", updated.id],
      });

      console.log("Going to go back!");
      router.back();
    },
  });


I'm correctly seeing the onSuccess run because it calls router.back() & updates the object in the DB. However, when presented back to the ProjectDetails screen it doesn't re-fetch to get the updated object.

Any thoughts? 🙂 Appreciate the assistance!
Was this page helpful?