Pass new metadata when calling fetchQuery

[zakariamofaddel]

I am facing a limitation with fetchQuery, where I would like to refetch an existing query by doing this:

await client.fetchQuery({
  queryKey: [QUERY_KEYS.GET_CART],
  meta: {
    updatedCart: { items: [] },
  },
});

So that the query (which already exists in cache) can run again and get a some arbitrary data that will influence the new result of the query.

Unfortunately it does not seem like the new meta is passed to the original queryFn when using fetchQuery on an existing query.

Is there any suggestion as to how to handle this case?

[TkDodo]

I wrote a quick test that confirms that queryClient.fetchQuery respects new meta passed to it, and the test passes:

test('should allow new meta', async () => {
  const key = queryKey()

  const first = await queryClient.fetchQuery({
    queryKey: key,
    queryFn: ({ meta }) => Promise.resolve(meta),
    meta: {
      foo: true,
    },
  })
  expect(first).toStrictEqual({ foo: true })

  const second = await queryClient.fetchQuery({
    queryKey: key,
    queryFn: ({ meta }) => Promise.resolve(meta),
    meta: {
      foo: false,
    },
  })
  expect(second).toStrictEqual({ foo: false })
})

So, from what I can tell, your code should work.

[zakariamofaddel]

Thanks for the reply!

Just for context, I am using Svelte.

The key difference in my snippet is that I don't pass a queryFn when calling fetchQuery. I only give it the query key of a query that has already been fetched in the past in a svelte component using createQuery and that already exists in cache. fetchQuery then reuses the queryFn used the first time, since I did not give it a new queryFn to use.

I am using fetchQuery as a way to refetch a query with a specific key, but I would also like to pass new metadata to it while refetching.

[TkDodo]

I only give it the query key of a query that has already been fetched in the past in a svelte component using createQuery and that already exists in cache.

that's really not a good idea because it creates implicit coupling. Your fetchQuery call will only work if a component was rendered before.

[zakariamofaddel]

But that's expected when not passing a new query function.

I only do this in components that render only if the data from the query is already in cache, so I always expect it to exist, that's why I am ok with the coupling.

[TkDodo]

In my experience, this rarely works out over time. What usually works better is to abstract queryKey and queryFn with queryOptions and use that everywhere.

[zakariamofaddel]

That's how I have worked around this "limitation", I extracted the query function from the original query and reused it.

I still think it would be nice to have the new metadata passed to the old query function or go the opposite direction and always require the query function when using the fetchQuery API.