TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

wise-white

8/25/2023

How to keep 'enabled' prop reactive when a Ref is passed

My code: ``` export const useSearchQuery = (input: Ref<string>) => useQuery({ queryFn: async ({ signal }) => { const { data: { data } } = await fetchSearch(input.value, signal)...

fascinating-indigo

7/15/2023

Make useQuery re-run when refs change

Hello, i'm a React developer trying to get the hang of using vue-query with Vue Is there any example out there showcasing how do i go about making useQuery fire again when one of my refs change? Do i have to call it once inside the setup function and then again within the onUpdated lifecycle hook?...

plain-purple

6/29/2023

Usage from within a Vue plugin

I am looking to create a Vue plugin that needs to be able to access the cache and refetch if necessary. Is this even possible considering useQuery can only be used in a setup function?

absent-sapphire

6/17/2023

Refecth using cache instead execute queryFn

It is possible to "refetch" withouth execute queryFn when is on cache? this is my simply code: ```ts import axios from 'axios'; import { AjaxResponse, AvailableSelect } from '@/types';...

complex-teal

6/15/2023

Is there a working example of how to properly use in Nuxt/SSR?

I've set this up in Nuxt 3, like so: ```ts const { data,...

complex-teal

6/15/2023

Getting `Hydration node mismatch` in nuxt 3

I've set up vue-query as a nuxt plugin as explained in the docs, but now I always seem to get a hydration error. Is this a bug? Is there a working example somewhere?...

flat-fuchsia

6/7/2023

useQuery is rerunning when route query / param change ?

Some of my useQuery composables depend on route query or route param like userId. I pass the query param to useQuery queryKey with Vue 3.3 toRef (toRef(() => route.query.userId)). I wrap like... ```...

other-emerald

5/10/2023

Query on user action while respecting cache

Hi everyone ! I'm trying out Vue (Nuxt) and tanstack query currently, and I'm trying to create a query that only fetch data when a user makes an action (ex: a search when the user click on a submit button). For that, I use enable: false and the refetch() method, but, unless I'm mistaken, this method ignore the cache and the request is fired every time. Is there a way to make it work ?...

blank-aquamarine

5/6/2023

Vue Query Reactive SWR

Hello, folks! I'm new to Query (using it in a Vue3 application) I have a couple of queries that look similar this one. https://gist.github.com/jarrettgreen/0c8b504dc0f736515162bfb517e3e3d7 - The 'feels bad' vibes going off is using ref within the query, the boilerplate needed for SWR cache to work, and this leans on onSuccess in a bad way, which is deprecated. I feel like I'm overthinking something and am just overall not using query correctly. Any thoughts on this would be greatly appreciated! Edit:...

rare-sapphire

5/4/2023

how to filter data while maintaining minimum results per page?

When using useInfiniteQuery with a select function to remove some results is there a way to do it so the amount of results per page remains consistent where each result moves back 1 when a result is removed

harsh-harlequin

4/14/2023

Default Mutation Fn ?

Hi, is there a way to make a default mutation Fn like the default query Fn for all mutations ? as i do not wish to keep writing the same fetch function for mutations too i tried the below but doesn't work on useMutation ...

harsh-harlequin

4/13/2023

useQuery Fetching twice?!

hi, i am new the tanstack query. this is my first time using, i followed the guide, however when call "onRefreshCaptcha" the network fetch is doing twice for "captcha_img" ``` const isImgLoading = ref(false) const queryClient = useQueryClient()...

optimistic-gold

4/12/2023

How to assign useQuery's "data" to a Pinia composition store Ref?

Hi, I'm trying to use vue-query with Pinia in order to share data across my app, but still make use of vue-query's great features, such as providing all the different states of fetching and refetching automatically. However, I am not sure if this is an anti-pattern. In this snippet, "expeses.value" would be of type ObjectRefImp instead of Array which creates some unexepcted results. For example in the "pop()" function I get an Error taht pop is not a method of express.value. Is there a correct approach to this...? 👀 ...

rare-sapphire

4/4/2023

How to utilize useQuery to update multiple variables?

Currently I am passing multiple reactive variables into useQuery and setting there values in the select function as well as cross referencing data from different endpoints to generate newly formatted data. this works but im not sure if this is the best design. since the useQuery is triggered whenever the querykey changes it makes it easy for these values to be updated along with the new request. but should i use using a watcher in the component to update these values? the select function logic i...

exotic-emerald

3/31/2023

Query Key Array not Updating with key is changed

I'm running into an issue where my query key array isn't updating when I change a selected warehouse ID in a dropdown menu. As a result, useQuery is using old query data instead of fetching new data for the selected warehouse ID. I'm not sure how to update the query key array when the selected warehouse ID changes, and I was wondering if you could provide any guidance on how to resolve this issue? Thank you! I've attached a video to this message that explains the issue in more detail. ```js...

fascinating-indigo

3/7/2023

Nuxt 3 persistent cache

I'm trying to convert the Nuxt SSR plugin example into a localstorage persister. But i'm getting stuck on the different QueryClients between the @tanstack/vue-query package and the @tanstack/query-core package. Did anyone manage to get this to work in Nuxt 3? This is my plugin at the moment but it fails on the QueryClient ...

harsh-harlequin

3/6/2023

cancelQueries Promise doesn't resolve in Cypress/Storybook

Using the "Optimistic Updates" documentation, I created a mutation that uses queryClient.cancelQueries({ queryKey: [myQueryKey] }). Running the app locally with a real backend behaves as expected. However in both Cypress tests and in Storybook (both with HTTP requests mocked), the onMutate function gets stuck on cancelQueries, because the Promise never resolves....

automatic-azure

2/20/2023

I cannot install vue-query with Vue.use using @vue/compat

Hi, I've been trying to find a solution for a few hours now and I'm just really stuck on this one. I'm currently in the process of converting our Vue 2.7 codebase to Vue 3 using @vue/compat but I cannot get vue-query to install properly. Because I cannot switch vue-i18n to the Vue 3 version without reconverting all of my modules first I decided to keep the Vue 2 version for now. That means I have to use Vue.use to install plugins. However I can't get vue-query to install that way, it seems like there's something that is not working with vue-demi and vue/compat because it was working just fine on Vue 2.7 and my other Vue 2 plugins are installed properly with Vue.use....

helpful-purple

2/15/2023

life cycle timing problem with useQuery

My application needs to load general config data via an ajax request. This config contains things like BASE_URL, STALE_TIME and other constants. When I initialize my useQuery, I need these constants to set up the request. Here's a code snippet to help understanding the problem: `const store = useStore();...

vicious-gold

2/8/2023

Is it possible to simple pass in props to the query key?

```ts <script lang="ts" setup> import { clientClient } from "@/clients/clientClient"; import { useQuery } from "@tanstack/vue-query"; import { useAutocomplete } from "@/composables/useAutocomplete";...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs