Refetching Data after navigating back to Page

[JCharante]

Hi there, I'm using React useQuery (technically tRPC client which built a wrapper around it) and I'm hoping to refetch data whenever a page is re-loaded after navigating back to it. Currently when I first load a page useQuery will make the data requests, and then if I navigate back and land on the previous page, because useQuery already made these requests and the state is maintained in the stack (I presume, I don't know how it works) then useQuery doesn't make a new request. This is fine and dandy except I want to refetch data when I go back to a page like I used to when I used React Navigation.

Currently I'm using usePathname() in _layout.tsx to accomplish this, but I'm wondering if there is a cleaner way that anyone has devised. Here's a minimal copy of my code:

hooks.ts

export interface IRefetchContext {
    url: string,
    hasRefetched: boolean,
    setHasRefetched: (hasRefetched: boolean) => void,
}

export const RefetchContext = React.createContext<IRefetchContext>({
    url: '',
    hasRefetched: false,
    setHasRefetched: () => {}
})

_layout.tsx

import React, {useEffect, useState} from "react";
import { Stack, usePathname } from "expo-router"
import {IRefetchContext, RefetchContext} from "../util/hooks";

export default function App() {
    const pathname = usePathname();

    const [refetchDetails, setRefetchDetails] = useState<IRefetchContext>({
        url: pathname,
        hasRefetched: false,
        setHasRefetched: (hasRefetched: boolean) => setRefetchDetails(state => ({
            url: state.url,
            hasRefetched,
            setHasRefetched: state.setHasRefetched
        })),
    })

    useEffect(() => {
        setRefetchDetails(state => ({
            url: pathname,
            hasRefetched: false,
            setHasRefetched: state.setHasRefetched
        }))
    }, [pathname])

    // @ts-ignore
    return (
        {/* ... */}
        <RefetchContext.Provider value={refetchDetails}>
            <Stack />
        </RefetchContext.Provider>
          {/* ... */}
    );
}

foods.tsx (the page)

import {RefetchContext, useRefetchOnFocus} from "../../../../../../util/hooks";
import {Stack, usePathname, useRouter, useSearchParams} from "expo-router";
import React, {useEffect} from "react";

export const AllFoodsScreen = ({ route }) => {
    const { url, hasRefetched, setHasRefetched } = React.useContext(RefetchContext)
    const pathname = usePathname();
    const { restaurantID } = useParamFetcher()
    const foodItems = trpc.getRestaurantFoodItems.useQuery({ restaurantID }, {
        staleTime: 5 * 1000 // Unit: ms
    })

    useEffect(() => {
        if (pathname === url) {
            if (!hasRefetched && foodItems.isFetched) {
                setHasRefetched(true)
                // console.log('Refetching foodItems after page reload')
                foodItems.refetch().then(() => {
                    // console.log('Refetched foodItems after page reload')
                })
            } else if (!hasRefetched && !foodItems.isFetched) {
                // console.log('First page load so did not refetch foodItems')
            }
        }
    }, [url, hasRefetched])

    if (!foodItems.data) return <Text>Loading...</Text>

    return null
}

export default AllFoodsScreen

[wcastand]

useFocusEffect
https://reactnavigation.org/docs/use-focus-effect/