extended-salmon

[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),
  });

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}`);
          }}
        >

<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();
    },
  });

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!

9 Replies

extended-salmonOP•16mo ago

Hmm... wonder if something is going on with my cache altogether? Seems if I navigate around between tabs, it re-fetches every time.. shouldn't this be pulling it from cache and not calling my fetch function?? Where it updated to edit8 correctly on the dashboard... is because on that screen i'm NOT using useQuery to fetch, just using re-focus

extended-salmonOP•16mo ago

More debug -- it seems to almost lose all context or something when going into the modal as the debug tools completely fail then. Forcing a cache refresh via devtools correctly calls the query again... but clicking 'invalidate' does nothing.

extended-salmonOP•16mo ago

More debugging... I added a dummy button to my details page with the same (legit copy/paste) mutation and just hardcoded a simple change and when pressed it immediately invalidated & forced a refetch.

extended-salmonOP•16mo ago

In the dev tools, I immediately see the mutation appear and disappear... I thought perhaps it was related to the modal, so I removed that bit. No dice

extended-salmonOP•16mo ago

spent a few cycles this morning trying to work through this oddity with a brand new create-expo-app and it's just working. perhaps there's a weird dependency issue somewhere

broad-brown•16mo ago

what type of dev-tools do u use on react native? react-query-devtools not work for me

extended-salmonOP•16mo ago

There is a new product react-native-react-query-devtools for RN projects Some more debugging: Wondering if I'm loosing context due to rendering a Slot first..? Seems that if I bypass my auth screen, and go directly to an unprotected stack it works just fine In my root-most layout if I do..

return (
    <QueryClientProvider client={queryClient}>
      <Slot />
    </QueryClientProvider>
  );

return (
    <QueryClientProvider client={queryClient}>
      <Slot />
    </QueryClientProvider>
  );

I lose context to the queryClient for invalidation... however, if I avoid this flow and directly load into a stack it works. Anyone have thoughts? https://codeshare.io/yNPVr9 Here's my current root _layout.tsx FIGURED IT OUT😅😅😅🥵 Some side effects from thst root layout were 100% the cause. Moved over to a session provider and it works. Closing now

broad-brown•16mo ago

Thank you 🙂 thats crazy. Wow I like it !

metropolitan-bronze•16mo ago

About the refetch when come back to the screen, this solution is good?

Gaming

Programming

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

Did you find this page helpful?