Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 10 commits into from

Conversation

S-sohofi
Copy link

No description provided.

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Sep 23, 2024
@suneettipirneni
Copy link
Contributor

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.

@S-sohofi
Copy link
Author

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?

@suneettipirneni
Copy link
Contributor

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.

@S-sohofi
Copy link
Author

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

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Oct 1, 2024 •
edited
Loading

☁️ Nx Cloud Report

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

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Oct 1, 2024 •
edited
Loading

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

TkDodo
TkDodo requested changes Oct 1, 2024
View reviewed changes
Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure what happened here but prettier seems to not handle those setups scripts very well ?

@S-sohofi
Copy link
Author

@TkDodo i've fixed the problem with prettier.

@TkDodo
Copy link
Collaborator

TkDodo commented Oct 21, 2024

I’ve fixed the problem with prettier.

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

see: 9b9c095

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TkDodo TkDodo TkDodo requested changes

Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@S-sohofi @suneettipirneni @TkDodo