query icon indicating copy to clipboard operation
query copied to clipboard

[Vue]: skipToken example is misleading

Open SomaH123 opened this issue 1 year ago • 0 comments

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

SomaH123 avatar May 03 '24 13:05 SomaH123