feat: Add queryKey to QueryObserverResult

[patrick-mcdougle]

When using useQueries it personally makes me nervous that you have to rely on the array order to remap the queryKeys. By passing the queryKey back through into the QueryObserverResult, this remapping can more easily be done by the code that does the result processing.

This feature was suggested here: https://github.com/tannerlinsley/react-query/discussions/2624#discussioncomment-1344889

Disclaimer: This is my first contribution to react-query so please let me know if I didn't follow any required conventions.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/FNECHwG59E6UycWuRwNN97pWRSKu
✅ Preview: https://react-query-git-fork-patrick-mcdougle-key-0f5bc7-tannerlinsley.vercel.app

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6a10e0f649136a37185cafe600baf11ec50dddfb:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

[patrick-mcdougle]

Moving this to a draft to prevent accidental merges while we work through the issue in the comments.

[TkDodo]

not going to merge this for now. What you can always do is relay everything back via the queryFn, like:

const results = useQueries(array.map(x => ({
  queryKey: ['foo', x],
  queryFn: async ({ queryKey }) => {
    const { data } = await api.goFetchMyData(...)
    return { ...data, queryKey }
  }
})))

that way, queryKey or whatever else you want will be available in results.map(x => x.data.queryKey))

hope that helps!