feat(vue-query): add support for getters in query keys

[suneettipirneni]

This is a based on the discussion I found in #5990. According to the author of the PR which made enabled a getter, they stated they didn't find a use case for query keys so it was not implemented.

Personally, I have found many use cases for getters inside of query keys. Commonly, I'll define composables for my API and then have them accept reactive variables like so:

export function useProjectDetailsQuery(userId: MaybeRef<string>, projectId: MaybeRef<string>) {
  return useQuery({
    queryKey: ['users', userId, 'projects', projectId, 'details'],
    queryFn: () => api.fetchProjectDetails(toValue(userId), toValue(projectId))
  })
}

When I use these composable I often have to make intermediate computed variables to keep the data from props reactive:

import { useQuery } from '@tanstack/vue-query';

export interface Props {
  user: User;
  project: Project;
}

const props = defineProps<Props>();

const { data: project } = useProjectDetailsQuery(
  computed(() => props.user.id),
  computed(() => props.project.id),
);

With this PR the we don't need intermediate computed properties to do this, you can write the code using getters instead:

const { data: project } = useProjectDetailsQuery(
  () => props.user.id,
  () => props.project.id,
);

This also makes composables like the one I defined above fall more into line with the recommended practices for vue composables https://vuejs.org/guide/reusability/composables#input-arguments.

CC @DamianOsipiuk

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jul 1, 2024 11:00pm

[codesandbox-ci]

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 b2ed0fc:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b2ed0fc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3

---

Sent with 💌 from NxCloud.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.42%. Comparing base (f1cdea9) to head (b2ed0fc).

Additional details and impacted files

@@            Coverage Diff            @@
##           main    #7608       +/-   ##
=========================================
+ Coverage      0   71.42%   +71.42%     
=========================================
  Files         0       19       +19     
  Lines         0      462      +462     
  Branches      0      119      +119     
=========================================
+ Hits          0      330      +330     
- Misses        0      102      +102     
- Partials      0       30       +30     

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	∅ <ø> (∅)
@tanstack/eslint-plugin-query	∅ <ø> (∅)
@tanstack/query-async-storage-persister	∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	∅ <ø> (∅)
@tanstack/query-core	∅ <ø> (∅)
@tanstack/query-devtools	∅ <ø> (∅)
@tanstack/query-persist-client-core	∅ <ø> (∅)
@tanstack/query-sync-storage-persister	∅ <ø> (∅)
@tanstack/react-query	∅ <ø> (∅)
@tanstack/react-query-devtools	∅ <ø> (∅)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	∅ <ø> (∅)
@tanstack/solid-query	∅ <ø> (∅)
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	∅ <ø> (∅)
@tanstack/svelte-query	∅ <ø> (∅)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	∅ <ø> (∅)
@tanstack/vue-query	71.42% <100.00%> (∅)
@tanstack/vue-query-devtools	∅ <ø> (∅)

[DamianOsipiuk]

This could improve ergonomics, but solution is insufficient.

QueryKey can be infinitely nested structure, so checking only the top level of QueryKey would not resolve deeply nested getters. This in turn will break query key serialization.

We would need to create a variant of cloneDeepUnref that will unwrap getters as well, but we would need to run this only on QueryKey as other parameters might be functions on purpose.

[suneettipirneni]

This could improve ergonomics, but solution is insufficient.

QueryKey can be infinitely nested structure, so checking only the top level of QueryKey would not resolve deeply nested getters. This in turn will break query key serialization.

We would need to create a variant of cloneDeepUnref that will unwrap getters as well, but we would need to run this only on QueryKey as other parameters might be functions on purpose.

Ok thank you for your feedback on this. I'll look into how I can conditionally deep unwrap getters specifically for the query key.

[suneettipirneni]

@DamianOsipiuk I think I've managed to get nested getter functions to work. The new and old tests are passing so I (assume?) nothing broke in the process. Basically I added a level and key parameter to the customize callback to detect if we hit the top level queryKey. For useQueries I've refactored it to first unref the top level array and then process each element the same way useQuery process it's options.

I'm pretty confident useQuery will work as expected, I just wanted to verify with you if the changes to useQueries are ok.