Auto-Cancel Query - Avoid Memory Leaks

[PhillipNinan]

hello! I apologize if this is a rookie question. I am new to query and attempting to learn the ropes and all the use cases! Thank you @NetanelBasal and all the other OSS contributors!

I defined a query example below. I was toying around with the refetchOnWindowFocus option. It appears that this query will continue to update once the function is called, even after the component is destroyed. This is great for global state, but what if I want to use local state for a family of components? What if I call this for 100x people? If I have 50 queries will each query continue to refresh?

I know I have some options:

• removeQueries(...)
• clear()
• refreshOnXXX: false
• enabled: someVariable

Is there any way to automatically clear a query once a component is destroyed? I have some colleagues that use react-query and this doesn't seem to be a problem for them.

  getFavoriteAnimalsForPerson(personId: number){
    const query = injectQuery();
    return query({
      queryKey: ["for-person", personId] as const,
      queryFn: () => {
        console.log('findme');
        return of(['dog', 'cat']);
      },
      refetchOnWindowFocus: 'always',
    });
  }  

[NetanelBasal]

It should be destroyed. Can you reproduce it on stackblitz or a repo?