mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
Merge pull request #2745 from 9M6/docs/tanstack-query-reactivity
docs: add reactivity section to TanStack Query plugin documentation
+37
+5
.changeset/cute-jokes-lick.md
+5
.changeset/cute-jokes-lick.md
+32
docs/openapi-ts/plugins/tanstack-query.md
+32
docs/openapi-ts/plugins/tanstack-query.md
···
574
574
575
575
:::
576
576
577
+
## Reactivity
578
+
579
+
In Vue applications, you need to wrap the options functions in [`computed()`](https://vuejs.org/guide/essentials/computed) to make them reactive. Otherwise, TanStack Query won't know it should execute the query when its dependencies change.
580
+
581
+
::: code-group
582
+
583
+
```js [reactive]
584
+
// ✅ Query will execute on `petId` change
585
+
const query = useQuery(
586
+
computed(() =>
587
+
getPetByIdOptions({
588
+
path: {
589
+
petId: petId.value,
590
+
},
591
+
}),
592
+
),
593
+
);
594
+
```
595
+
596
+
```js [static]
597
+
// ❌ Query will execute only once
598
+
const query = useQuery(
599
+
getPetByIdOptions({
600
+
path: {
601
+
petId: petId.value,
602
+
},
603
+
}),
604
+
);
605
+
```
606
+
607
+
:::
608
+
577
609
## API
578
610
579
611
You can view the complete list of options in the [UserConfig](https://github.com/hey-api/openapi-ts/blob/main/packages/openapi-ts/src/plugins/@tanstack/react-query/types.d.ts) interface.