TanStack

T

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

rival-black
rival-black3/9/2025

Non-undefined placeholderData types as possibly undefined

If my placeholderData function always returns a proper result (not undefined), then why is the resulting data property typed as T | undefined? Consider the following example: ```typescript...
eager-peach
eager-peach3/4/2025

How to use the startTransition from react?

I have a page that has a few tabs (tab types). The page feels laggy when I switch between tabs quickly. I think I would like to implement the useTransition() hook from React to prevent rendering when the user tries to switch tabs quickly....
adverse-sapphire
adverse-sapphire1/4/2025

I'm having an issue with an uncaught promise on a mutation

To my knowledge when you give a mutation function a promise Like a server action if it returns an error then you can use the on error and Onsuccess functions. I'm doing that all over my project and it's working just fine except in one section. ``TypeScript const mutationAddQuestion = useMutation({ mutationFn: async (formData: FormData) => { const correctAnswer = Array.from({ length: numberOfAnswers }).findIndex((_, index) => (formData.get(correctAnswer${index}`) === 'on')) + 1;...
conscious-sapphire
conscious-sapphire1/3/2025

Drawbacks of multiple related mutations in one hook?

is grouping related mutations in one hook bad? ```js const useFolderMutations = () => { const queryClient = useQueryClient()...
quickest-silver
quickest-silver12/31/2024

Is it possible to have mutation queue that will run until the queue empty ?

I have a question on modal and on each question I'm sending the answer to backend. because the navigation to question is fast, user can finish going through the question before the mutation finishes and close the modal. so Is a way to handle this case ?...
national-gold
national-gold12/30/2024

Should queryFn(fetcher) be independent of React life cycle?

I'm working on a Next.js 14 project (App Router) and need to set up a centralized axios instance as queryFn(fetcher) in order to use react-query, which should integrates seamlessly with: 1. useSession from next-auth 2. i18n from next-intl: 3. router from next/router...
optimistic-gold
optimistic-gold12/29/2024

How to handle when query depends on a non string/JSON serializable object reference?

I am not fetching any API external data, I am using React Query as an async state manager in one of my projects. A specific query depends on many other object references to be transformed and be available in the shape I want. These other object are very large, and some of them are not JSON serializable. ...
fascinating-indigo
fascinating-indigo12/25/2024

What are some common practices regarding queryOption abstractions?

I basically have two hooks for each API request now. One is strictly queryOptions that utilize the queryKey and queryFn that allows me to spread into any useQuery hook. For most of my API handlers i abstract it even more by doing something like useResource(). These call useQuery and spread in the queryOptions. ...
fascinating-indigo
fascinating-indigo12/24/2024

US partner wanted for a profitable venture

I’m working on an exciting business idea and need a partner to help bring it to life. Here's what you can expect: -A comfortable fixed monthly salary with a light and manageable workload. -No financial investment or technical expertise required—just your willingness to collaborate....
flat-fuchsia
flat-fuchsia12/24/2024

MutateAsync error handling (callback vs. try/catch/finally)

Is it more appropriate to handle the mutation lifecycle during mutateAsync using the callbacks on useMutation (onSuccess/onError/onSettled) or to use a try/catch/finally to do that? Right now we're using mutateAsync during a form submission. The problem is it requires a try catch so if an error occurs it doesn't throw an unhandled exception. Some of the devs are catching the error and putting a //noop as a comment and handling errors via tha callbacks and others are handling the lifecycle within the try blocks instead. Looking to see if anyone has a recommended pattern or if there's a preference so our team can maybe standardize it if possible....
subsequent-cyan
subsequent-cyan12/23/2024

useSuspenseQuery when offline

What is the correct way to use useSuspenseQuery when offline? I am using the experimental_createPersister so the network mode is set to offlineFirst. Whenever I render this when offline, and no data is persisted yet, the suspense fallback (LoadingComponent) keeps showing. Instead I want a placeholder to tell the user they are offline and they should retry when online. ```ts <QueryErrorResetBoundary>...
conscious-sapphire
conscious-sapphire12/23/2024

`keepPreviousData` with `useSuspenseQuery` with nextjs streaming ssr

I am using useSuspenseQuery with ReactQueryStreamedHydration from @tanstack/react-query-next-experimental This works great However my query has a regular changing query key, but I want to show the previous data during loading states So I switched useSuspenseQuery to useQuery with placeholderData: keepPreviousData, this also worked great however it lost all of the server streaming behavior...
genetic-orange
genetic-orange12/22/2024

queryOptions counterpart for useMutation?

Hello everyone, I recently discovered that you can share configurations between queries using queryOptions as mentioned in this section of the documentation: https://tanstack.com/query/v5/docs/framework/react/guides/query-options I was wondering if there was a counterpart for this for useMutation....
vicious-gold
vicious-gold12/21/2024

Query returning old data after mutation when manually setting data using setQueryData

``` import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { getCompanies } from "../services/auth"; const COMPANY_KEY = 'companies';...
conscious-sapphire
conscious-sapphire12/20/2024

How to mock loading/error states.

In storybook I'm using setQueryData to set mock data. How can I manually set loading/error states?
helpful-purple
helpful-purple12/20/2024

Vue Query 401 Unauthorized response

Hello, I'm using Vue Query (TanStack), and I'm trying to handle errors globally. Specifically, I want to redirect users to a login page if any query fails with a 401 Unauthorized response. What are the recommended ways to handle this scenario in the current version of Vue Query? Are there best practices or patterns for managing this globally without duplicating the logic in every query?...
ambitious-aqua
ambitious-aqua12/19/2024

How can I pass an authorization header to all queries and mutations

Hello I have this code that allow to me pass my token to all my queries and it works fine. But I'd like this for my mutations too if possible. ```ts...
genetic-orange
genetic-orange12/19/2024

UI gets stuck after updating React to React 18

Hey, we've recently updated our app to React 18. these are our dependencies: ```json...
sensitive-blue
sensitive-blue12/19/2024

Is there a way to either go back to initial state or set data directly?

I have a use case where if a certain filter is removed, the whole datagrid/filters should reset
extended-salmon
extended-salmon12/18/2024

How do I tell useQuery that initial data is prefetched on the server?

I have a Remix app and in my loader function I prefetch the data. Then on the client side I use useQuery as described in the docs Remix example. However the type of my data is MyData | undefined because useQuery doesn't know the initial data will be there. How do I solve that? For now I solved it by setting initialData: {} as MyData in useQuery but I wonder if there is a better way?