Sep 23 '24 10:09 S-sohofi

As of https://github.com/TanStack/query/pull/7608. You no longer need an intermediate computed statement for props. You can just use the getter syntax () => props.foo directly. It would probably be worth documenting this as using a computed ref for a simple property access is less efficient than using a getter.

Sep 23 '24 12:09 suneettipirneni

As of #7608. You no longer need an intermediate computed statement for props. You can just use the getter syntax () => props.foo directly. It would probably be worth documenting this as using a computed ref for a simple property access is less efficient than using a getter.

you mean I should do like this?

<script setup>
  const props = defineProps([todoId])
  const queryKey = ['todos', ()=>props.todoId]
  const result = useQuery(queryKey, () => fetchTodoById(todoIdValue.value))
</script>

but it didn't work for me. are these changes merged with the main branch?

Sep 24 '24 08:09 S-sohofi

As of #7608. You no longer need an intermediate computed statement for props. You can just use the getter syntax () => props.foo directly. It would probably be worth documenting this as using a computed ref for a simple property access is less efficient than using a getter.

you mean I should do like this?
<script setup>
  const props = defineProps([todoId])
  const queryKey = ['todos', ()=>props.todoId]
  const result = useQuery(queryKey, () => fetchTodoById(todoIdValue.value))
</script>
but it didn't work for me. are these changes merged with the main branch?

Yes make sure you’re on the latest version of the package.

Sep 24 '24 14:09 suneettipirneni

ok then, I changed the doc to contain these changes.

Sep 25 '24 07:09 S-sohofi

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 69be23d9977f19daef92a5da48314852a35fe16a. 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.

Oct 01 '24 18:10 nx-cloud[bot]

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8088

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8088

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8088

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8088

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8088

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@8088

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@8088

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8088

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8088

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8088

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@8088

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8088

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8088

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@8088

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8088

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8088

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8088

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@8088

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8088

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@8088

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8088

commit: 9b9c095

Oct 01 '24 18:10 pkg-pr-new[bot]

@TkDodo i've fixed the problem with prettier.

Oct 21 '24 11:10 S-sohofi

I’ve fixed the problem with prettier.

you’ve worked around prettier. Now prettier runs again and it automatically re-formats again.

see: https://github.com/TanStack/query/pull/8088/commits/9b9c095147eeae6dc2d4f7da1bfcc3b17bc32cf4

Oct 21 '24 12:10 TkDodo

I've done it in another way, recheck it @TkDodo .

Dec 02 '24 08:12 S-sohofi

please use prettier locally; it re-formatted again; gonna close this as it kinda wastes my time, sorry.

Dec 02 '24 16:12 TkDodo

document: add guide for using props as a key of query

☁️ Nx Cloud Report