Cache dynamic keys

[imyourm8]

Hi team!

I have the following code:

const offset = ref(0)
  const { state, ...rest } = useQuery({
    key: () => ['data', offset.value],
    query: () => $fetch<Data>('/api/ai/data', {
      query: { offset: offset.value },
      responseType: 'json'
    }).then(res => res ? res.content : null)
  })

My expectations were that keys with different values like, ['data', 0], ['data',1], and so on are going to be cached. But it keeps resending queries for the same keys over and over. How can I enforce not sending queries for keys that were already fetched?

[posva]

You expectation is correct! This should work so I think something is wrong in the surrounding code

[imyourm8]

Thank you for quick replies. I will post a link to a project with minimal reproduction code.

[imyourm8]

@posva Hi! https://github.com/imyourm8/dynamic-key-cache here is the repo with minimal code. It keeps hitting the backend.

[posva]

I tried and things work normally. Maybe you want a higher staleTime?

[imyourm8]

Even with higher stale time it randomly queries it. I tried using something like 1_000_000 for stale time and it keeps "randomly" querying server. Not often as before, but a lot earlier than 1000 seconds.

[posva]

You must have something missing in the repro.
Let me know if you manage to consistently reproduce it