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

18 messages · Page 1 of 1 (latest)

clear tree
#

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!

clear tree
#

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

clear tree
#

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.

clear tree
#

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.

clear tree
#

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

limber stump
#

what type of dev-tools do u use on react native?

react-query-devtools not work for me

clear tree
#

There is a new product react-native-react-query-devtools

#

for RN projects

clear tree
#

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

clear tree
#

In my root-most layout if I do..

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?

clear tree
#

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

clear tree
#

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

limber stump
limber stump