How to stop useQuery execution

[krishnar97]

I have a site with multiple pages where one of the page has my react component which use useQuery to fetch data and on window focusing on the same page again fetching data. Now when i navigate to other page which doesn't have any react component still on window focus fetch call is trigger which suppose to not.
Is there any way to control useQuery to execute only when user is on a page where react component which use useQuery exists and stop its execution on navigate to different page where it doesn't exist

[TkDodo]

Not sure I fully understand. If you unmount a component that has useQuery, the query will become inactive. No more fetching will go on for that query. It sounds like you have the query still mounted somewhere.

Can you try and create a minimal codesandbox example to reproduce your issue please.

[krishnar97]

Thank you for your response. I have attached a gif for reference. In the video I have a site called Test with 2 pages 1) My Profile 2) Page.
My Profile has a react component with an input field and Page (2nd page in the site) is empty.

I have following code written inside my functional component

const { isLoading, isIdle, data } = useQuery(
'search',
() => {
console.log('useQuery...')
return fetch(https://api.github.com/repos/tannerlinsley/react-query
).then((res) => res.json())
},
{ retry: false }
)
Please observe the console when i'm in a page My Profile and when ever i focus window useQuery gets called and logging simple text which is expected behaviour but when i navigate to the other one Page (2nd page in a site) useQuery still executing. Is there any workaround to fix this issue?

Thanks in advance.

[TkDodo]

Really hard to say without the code, please provide a runnable example. One scenario I can imagine is that the Profile Page is not really unmounted when you switch away from it, but only visually hidden. The react-query devtools will also help you finding out which state a query is in and how many subscribers it has.

[krishnar97]

You are exactly right when I navigate to the next page the component is still alive so the trigger, Now I found a way to unmount it. Thanks for giving such a great Hook