More details about content of queryKey in documentation (Vue)

[alinnert]

It just took me a while to make my query work. The reason was it depends on the state in a Pinia store. It seems I need to convert store properties to refs before putting them into a query key. Also it seems that refs are being unwrapped automatically when accessing them from the query function parameters. Here's a code example:

const store = useSomeStore()
const { id } = storeToRefs(store) // this is required for `useQuery`

const result = useQuery({
  queryKey: ['todo', id],
  //                 ^? const id: RemovableRef<number>
  // If I use `id.value` or `store.id` the query
  // doesn't refetch if the ID changes.
  queryFn: getTodo,
})

async function getTodo({
  queryKey: [, id]
  //           ^? (parameter) id: unknown
  // `id` here is the raw ID, not a `Ref` anymore!
}: QueryFunctionContext) {
  return await fetch(`/api/todos/${id}`)
}

Unfortunately, the docs don't mention any of this. They don't tell me if Refs in general are ok to be used or even required or if plain values are fine and if so under which circumstances. Could the docs please be extended to cover those topics?

(Btw. with the current API it's very difficult to type queryKey properly. It gets boilerplatey very quickly, and the type of getTodo needs to be compatible with useQuery but the types of queryKey in getTodo and useQuery are technically different...)