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

suneettipirneni · 2024-06-21T17:08:45Z

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 · 2024-06-21T17:08:49Z

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 · 2024-06-21T17:10:05Z

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 · 2024-06-26T22:58:10Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit dc3b6cc. 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 2 targets

Sent with 💌 from NxCloud.

codecov · 2024-06-26T23:01:08Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.42%. Comparing base (d2a92d9) to head (dc3b6cc).
Report is 3 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #7608       +/-   ##
===========================================
+ Coverage   44.46%   71.42%   +26.96%     
===========================================
  Files         185       19      -166     
  Lines        7049      462     -6587     
  Branches     1549      119     -1430     
===========================================
- Hits         3134      330     -2804     
+ Misses       3552      102     -3450     
+ Partials      363       30      -333

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%> (+0.82%)`	⬆️
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

DamianOsipiuk · 2024-06-26T23:22:27Z

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 · 2024-06-26T23:30:58Z

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.

…ttipirneni/query into feat/vue-query-key-getters

suneettipirneni · 2024-06-27T02:06:08Z

@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.

pkg-pr-new · 2024-07-08T08:00:07Z

Run & review this pull request in StackBlitz Codeflow.

commit: dc3b6cc

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@7608

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@7608

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@7608

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@7608

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@7608

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@7608

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@7608

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@7608

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@7608

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@7608

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@7608

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@7608

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@7608

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@7608

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@7608

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@7608

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@7608

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@7608

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@7608

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@7608

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@7608

templates

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

5b06998

github-actions bot added the package: vue-query label Jun 21, 2024

Merge branch 'main' into feat/vue-query-key-getters

45571e5

suneettipirneni added 2 commits June 26, 2024 22:00

add support for nested queries

62099c5

Merge branch 'feat/vue-query-key-getters' of https://github.com/sunee…

e08604e

…ttipirneni/query into feat/vue-query-key-getters

suneettipirneni and others added 9 commits June 27, 2024 16:48

Merge branch 'main' into feat/vue-query-key-getters

bb5e685

fix type test

d55eddf

don't export helper function

09529dd

Merge branch 'main' into feat/vue-query-key-getters

0b453c6

Merge branch 'main' into feat/vue-query-key-getters

ffa1fa2

fix useQueries types

91d47d5

Merge branch 'main' into feat/vue-query-key-getters

16fa210

fix lint issue

b2ed0fc

Merge branch 'main' into feat/vue-query-key-getters

dc3b6cc

DamianOsipiuk merged commit 41009c9 into TanStack:main Jul 8, 2024
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

suneettipirneni commented Jun 21, 2024 •

edited

Loading

vercel bot commented Jun 21, 2024 •

edited

Loading

codesandbox-ci bot commented Jun 21, 2024 •

edited

Loading

nx-cloud bot commented Jun 26, 2024 •

edited

Loading

codecov bot commented Jun 26, 2024 •

edited

Loading

DamianOsipiuk commented Jun 26, 2024

suneettipirneni commented Jun 26, 2024

suneettipirneni commented Jun 27, 2024

pkg-pr-new bot commented Jul 8, 2024

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

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

Conversation

suneettipirneni commented Jun 21, 2024 • edited Loading

vercel bot commented Jun 21, 2024 • edited Loading

codesandbox-ci bot commented Jun 21, 2024 • edited Loading

nx-cloud bot commented Jun 26, 2024 • edited Loading

☁️ Nx Cloud Report

codecov bot commented Jun 26, 2024 • edited Loading

Codecov Report

DamianOsipiuk commented Jun 26, 2024

suneettipirneni commented Jun 26, 2024

suneettipirneni commented Jun 27, 2024

pkg-pr-new bot commented Jul 8, 2024

suneettipirneni commented Jun 21, 2024 •

edited

Loading

vercel bot commented Jun 21, 2024 •

edited

Loading

codesandbox-ci bot commented Jun 21, 2024 •

edited

Loading

nx-cloud bot commented Jun 26, 2024 •

edited

Loading

codecov bot commented Jun 26, 2024 •

edited

Loading