How I can do filter

[shoaibsharif]

I am trying to do filter with vue-query and I noticed something odd. If you go to the demo

https://stackblitz.com/edit/vitejs-vite-gkgdsn?file=src%2Fcomponents%2FUsers.vue

The first page where I am trying to figure out how I can disable refetching if a user select previous options. i.e. if you select javascript, it will fetch the articles that has the following tags, now if I select TypeScript and go back to JavaScript it will refetch the query again. Is there a way to disable this behavior? I would like to retrieve the previos data rathan than fetching it in background.

[DamianOsipiuk]

I think what you want to achieve is to increase time before query becomes stale (should be refetched).
You can read about defaults here: https://vue-query.vercel.app/#/guides/important-defaults

By default all queries are considered stale the second they are retrieved. You can change that behavior and manually set staleTime globally for all queries, or per-query to the time that you would consider valid.

[shoaibsharif]

Ah! so that's because of slateTime. I was trying another test with dependent query. If you click on Users Nav, you will notice that If you select a user, I can't get the articles. i was trying to do with

const { data, isFetching } = useQuery(
  ['articlesUser', filter.user],
  () => axios.get('/articles?user=' + filter.user),
  {
    enabled: userSelected,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    staleTime: 1000
  }
);

But it is working as expected if I do this

const { data, isFetching } = useQuery(
  ['articlesUser', filter],
  () => axios.get('/articles?user=' + filter.user),
  {
    enabled: userSelected,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    staleTime: 1000
  }
);

Is it because fetch.user is not reactive (vue issue?)?

[DamianOsipiuk]

Yes, you are correct.
Still i think that including whole filter object is better, since you will make sure that all filters are also present in the queryKey (proper cache splitting)