Exposing queryKey as an argument in placeholderData & initialData functions

[ugurcanatas]

Firstly, Levaraging the Query Function Context is a great blog post that explains the possible closure problems with queryFn. Thanks for that.

After reading the post, I was wondering if the same can be considered with placeholderData and initialData functions? If I am not mistaken, placeholderData or initialData will also create a closure over values.

// query hook

  const someUuid = useSomeUuid()
  const anotherUuid = useAnotherUuid()

  return useQuery({
    queryFn,
    queryKey: queryKeyFactory.get(someUuid,anotherUuid),
    placeholderData: (queryKey) => { // Here, does it make sense to expose queryKey
     // if I try to use `someUuid` or `anotherUuid`, placeholderData function creates a closure over it(?)
      const anotherUuid = queryKey[1]
      const data = queryClient.getQueryData(
        queryKeyFactory.getAnotherOne(anotherUuid)

.....
    },
  })

Please consider the example as a non-working example.

Does this make sense? Could this be considered as an additional feature in react query? I would love to hear back some thoughts on it.

Thanks!

PS: If same idea was thrown out by someone else before, feel free to close this one. Sorry in advance

[TkDodo]

placeholderData already gets two params - (previousData, previousQuery)

why would you need the queryKey if you could also do:

const someUuid = useSomeUuid()
const anotherUuid = useAnotherUuid()
const queryKey = queryKeyFactory.get(someUuid,anotherUuid)

and then you can close over the queryKey just fine?

[ugurcanatas]

EDIT:

I missed the point where placeholderData is most likely only work once when the query is mounted and the query is still fetching the data. So this makes the original question insignificant. Thanks for the answer regardless.

Hey, thanks for the response.

I tried to think in a similar way that it is explained in the blog post about queryFn and if the same case is applicable to the other query options such as placeholderData.

If I do it in the following way:

const someUuid = useSomeUuid()
const anotherUuid = useAnotherUuid()
const queryKey = queryKeyFactory.get(someUuid, anotherUuid)

return useQuery({
  queryKey,
  placeholderData: () => {
    const anotherUuid = queryKey[1] 

    // And here we can use the query key values to get cached data from another query to provide partial data.
    // ...
  }
})

If someUuid and anotherUuid changes, could placeholderData still reference the old queryKey?
That was my thought process behind it. I believe this is one of the reasons why Query Function Context exist(I might be wrong here also).

Do you think that this is a valid concern?