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

dependent-tan

11/6/2025

Different queryFn for same queryKey

Hello, I have some question regarding the queryKey and queryFn, the examples and blog posts suggest that the keys should be exposed in some object/factory to be reusable, but I am wondering if there could be potentially a case when you would like to use different fetcher for the same key in different places. Because if not then I assume that the code from the image makes more sense since we are wrapping both in a single object making it easier to use (obviously queryKey could also be exposed higher for better reusability). Also what would be the valid approach for "querying" the part of the data of the other query ? Is the code in the example a valid approach ? Let's say I have some bigger object which contains various data and I'd like to have some re-usable method to get the parts of this data, is "querying" the parent key and using select with staleTime a good decision ? I certainly don't think I should split it into multiple keys since that would force multiple calls to the API for the same resource only to get the part of it. Cheers 🙂...

reduced-jade

9/26/2025

Nuxt SSR hydration mismatch

Hello all, Nuxt v4, tanstack query v5 I'm trying tanstack with nuxt, looks like SSR works well but I have an hydration mismtach ...

extended-salmon

8/31/2025

cannot be installed with Nuxt 4 via npm

``` npm error code ERESOLVE npm error ERESOLVE could not resolve npm error While resolving: nuxt-app@undefined npm error Found: vue@3.5.20...

correct-apricot

8/7/2025

Errors are being thrown twice with suspense: true, typings for data shouldn't be undefined

The parent is something like this: ``` <script lang="ts" setup> import { queuePostFlushCb } from 'vue' const errors = ref<Error[]>([])...

xenial-black

8/5/2025

queryKey undefined

Hi everyone! Does anyone know what the best approach is when queryKey might be undefined? Should I assign a random key even if I don't want the query to run or be cached? I'm trying to understand the reasoning behind it.

harsh-harlequin

7/2/2025

Unneccessary registered queries

I have a Vue 3 SPA project with three queries on the same page. The first query is independent. After fetching the data, the first item is selected and stored in a selectedId ref. The second query depends on the selectedId to run. The third query depends on selected items from both the first and second queries....

modern-teal

6/3/2025

Using vue query outside of setup functions

Does anybody have a working example of how to use vue query composable outside of the vue component? For example inside an pinia action. I can't find any example of this in the docs or online. Thanks!

genetic-orange

3/22/2025

Nuxt module for Tanstack Query

If you are using Tanstack Query with Nuxt, I have published a module to make setup and debugging easy: https://github.com/peterbud/nuxt-query The module supports simple and complex Tanstack Query setups, and it has an integrated Nuxt Devtool module, so you don't need to use the browser's devtools (which many cases do not show up)....

xenial-black

3/19/2025

Is there a way to have a reactive array of queries?

Hey, we are implementing a chat with vue-query, and the problem is that we need an unread count indicator. Currently we have a query with ['conversations', uuid] key, and would like to have like a computed with all the queries that starts with ['conversations'] and iterate over them and count unread conversations. Is this something possible? I tried getQueriesData but that seems to be not reactive.

rare-sapphire

2/6/2025

Tanstack (vue) query throws error regardless of the throwOnError property

I've been trying to set up my Vue Query mutations so that errors are handled within the onError callback. However, instead of being caught there, the errors propagate to the root of my application, causing the Nuxt framework to display its error page. How to fix that?

distinguished-silver

1/14/2025

Are there any good open source projects which are using Tanstack Query with Vue?

Hi all, I was working with Tanstack Query with Vue 3 and its an amazing experience working with both of them. Although, things are pretty straightforward and just works, I wanted to know if there are any open source projects from which I can take inspiration or learn best practices to implement tanstack query in vue project in medium to large sized codebases?

generous-apricot

1/10/2025

Why the data i get from the useQuery it's undefined on the first render?

So i have this file with my axios request: ``` import { api } from "../lib/axios"; import type { Todo } from "../types/users"; ...

flat-fuchsia

12/11/2024

Is it possible to make reusable useQuery in composables?

Hi, I wanted to create custom hooks in composables like so: ``` import { useQuery } from "@tanstack/vue-query"; import { useAuthStore } from "../stores/useAuthStore"; ...

harsh-harlequin

12/11/2024

I have a api call that gives very big data around 18 mb of pure json

However I think that tanstack is having problems processing/passing that much data, how to handle this ?

other-emerald

11/13/2024

Any examples how to fire each useMutation to get get individual status in Vue 3?

I'm working on a use case where I need to upload multiple files at once. The process generally works, but there's a problem. If I upload, say, 10 files, they are stored in an array which, then processed one by one in a loop using mutate while checking isPending. This means I have to wait for all 10 files to finish uploading before they are displayed in the UI. Instead, I'd like each file upload to be treated as a separate network request, rather than grouping them into a single batch. This way, each file could display individually as soon as it finishes uploading. I've searched online, including checking GitHub discussions, to find a solution or technique to handle this, but I haven't been able to find anything that works....

ambitious-aqua

10/5/2024

Enabled is true and devtools show data in the data explorer but data is empty in the component

I currently have this in the useQuery hook: enabled: computed(() => !import.meta.server && table.value?.isPending === false), where table is the ref value of a table component that is initialized in the current component to ref() and passed as ref= prop. If I remove the computed() I still have this issue. Query explorer in the devtools shows Query.options.enabled is true. If I set enabled to just !import.meta.server it works fine. Is there some issue with using a component ref value? I have confirmed that the query I am having issues with is the one I am viewing in the devtools, I have manually printed the pending and data value in the template to test so I can confirm this is not a rendering issue with one of my components....

like-gold

10/3/2024

QueryOptions as generic prop

Im implementing a Link component with a prefetch prop, Whenever someone hovers a link and it has the prefetch prop i want to call queryClient.prefetchQuery(props.prefetch) My problem is to properly implement the prop type via typescript. I have some queries set up via queryOptions like so ```ts export const authQueries = {...

like-gold

8/1/2024

Nuxt suspense component & vueQuery suspense in SSR app

What i try to do is using suspense in my page to show a fallback e.g. loading indicator as long as my vueQueries are fetching. For what i understand you await suspense() to make sure the data is fetched and available. I tried a lot of combinations but i never ever see the fallback when i excecuting a vueQuery query, it just renders the #default template when it is done fetching the data. ...

foreign-sapphire

7/10/2024

Anyone having SSR issues after update?

After updating to latest version, I started seeing this at runtime:

generous-apricot

6/24/2024

Installing

Hi, I've been using vue-query for a while and really like it. I decided to rebuild my project from the ground up now that I've found all the additional pieces I think I need. I apologize if this a very silly question, but I'm stuck just installing right now. If I start a new project with this command: npx nuxi init -t ui <project-name> ...

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