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

genetic-orange

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[]>([])...

adverse-sapphire

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.

constant-blue

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....

frail-apricot

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!

conscious-sapphire

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)....

exotic-emerald

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.

national-gold

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?

harsh-harlequin

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?

metropolitan-bronze

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"; ...

stormy-gold

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"; ...

wise-white

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 ?

optimistic-gold

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....

flat-fuchsia

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....

optimistic-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 = {...

afraid-scarlet

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. ...

stormy-gold

7/10/2024

Anyone having SSR issues after update?

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

optimistic-gold

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> ...

optimistic-gold

6/3/2024

optimistic update not updating dom

Im trying to optimistically update an item in an array but it doesnt trigger an update in the dom. My response of the query is something like ```ts const data = {...

optimistic-gold

5/26/2024

Waiting for invalidated query to be refreshed before navigating

Hello all: I have a page where the user creates a new item in the database. I am invalidating the query that has the list of these items. I would like to wait for the invalidated query to be reloaded before navigating back to the list so the user doesn't see it pop in after the fact....

correct-apricot

5/21/2024

Help with vue query together vue table

Hi, i need help with my implementation of vue query. I try to fetch data for my useVueTable data. The problem is that either it executes the query infinite times or the data is not shown in the table. ...

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