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.

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

[Vue]: skipToken example is misleading #7371

Open
SomaH123 opened this issue May 3, 2024 · 0 comments
Open

[Vue]: skipToken example is misleading #7371

SomaH123 opened this issue May 3, 2024 · 0 comments

Comments

@SomaH123
Copy link

SomaH123 commented May 3, 2024

Describe the bug

The skipToken documentation suggests to me that skipToken can be used similarly to enabled, but enabled can actually be reactive, so if something changes there, the query can actually be turned on/off, but in the case of skipToken, the value is evaluated on creation, and that doesn't change anymore, even if the ternary operator uses reactive values in there.

The example also has an unused isEnabled computed, and it relies on the filter, instead of filter.value in the ternary operator, which will always evaluate to true, thanks to it being a Ref object.

The skipToken solution in its current shape is not usable for use-cases where on component mounting one of the params is empty for example (like on a search page), and the moment somebody enters a search term, the query should be enabled.

Your minimal, reproducible example

https://tanstack.com/query/v5/docs/framework/vue/guides/disabling-queries

Steps to reproduce

  1. Use the example code

  2. See that the fetchTodos is called even if the filter has no actual value

  3. Use the example code

  4. Change the ternary operator to rely on the value of the filter

  5. Set the filter value after mounting happened

  6. See that the fetchTodos is not called

Expected behavior

I'd expect the documentation to make these caveats clearer, or preferably make the skipToken solution reactive somehow.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Probably all of them

Tanstack Query adapter

vue-query

TanStack Query version

5.29.0

TypeScript version

5.4.5

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant