useEffect not updating dependency with queryClient.getQueryData in React Query

[nanghadiios]

I am putting queryClient.getQueryData in dependency of useEffect hook to observer when data updating to cache but the useEffect never trigger update. What is the problem here?

My code below:

...
const queryClient = useQueryClient();
const queryKey = ['user', userId];
const userCache = queryClient.getQueryData(queryKey);
const [user, setUser] = useState(userCache || initialUserData);

// useEffect never trigger update even if userCache updated as new cache value
useEffect(() => {
    if (!userCache) return;        
    setUser((prevUser) => ({ ...prevUser, ...userCache }));
    console.log('this useEffect trigger update');
}, [userCache]);

return user;

[TkDodo]

queryClient.getQueryData does not create a subscription, so your component doesn't re-render when data gets updated. You need useQuery to create a subscription.

[IonelLupu]

@TkDodo I have a similar issue. In my case I have a custom hook which contains a useQuery. Inside it, I have some useEffects that handle error reporting:

export function useHotelRooms() {
    const rooms =  useQuery(
        ['rooms'],
        () => fetch('....')
    )

    useEffect(() => {
        if(rooms.error){
            // log error here
        }
    }, [rooms.error])

    return rooms

}

Now, I use useHotelRooms a bunch of times in the code because a lot of components use it (it is far more complex in reality and the component tree is complicated). Having it used many times makes it log the error many times.

Then, I thought maybe I can use queryClient.getQueryData('room') for the other components and only keep one useHotelRooms at the top of the page. But queryClient.getQueryData('room') doesn't rerender the components.

I guess I need to do prop drilling to achieve the desired results where I call useHotelRooms once at the top of my page and then pass it to all other child components? This is be messy 😞 . What other solutions are there without any context libraries? Or, how can I manually create a subscription

[TkDodo]

Having it used many times makes it log the error many times.

please see: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#a-bad-api

[IonelLupu]

@TkDodo, thank you! I thought you would mention it 😅 . I had to remove the use effect from my custom hook and add the in my main page component