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

inland-turquoise

3/9/2025

Mutation to tackle state update race conditions. Good or bad idea?

Hello. I want to update state with some async result and wondering if this approach is good? If updateConfig called multiple times race condition can happen. ```typescript...

deep-jade

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

fascinating-indigo

3/8/2025

Using component state values in useMutation.mutate (closure/race condition help)

Can someone help me understand why my payload is always an empty string in the code below? I have a state variable that holds a user's comment which works fine. When a button is pressed I call useMutation.mutate() and then reset the comment state. Inside the mutationFn the value of comment is always the reset state and it seems like the setState function executes before the mutationFn even if it's called afterward. ...

conscious-sapphire

3/7/2025

Why data value of queries is not updated on queryClient.setQueryData(['grid'], updatedGrid)

The data variable returned to React component is not updated on setQueryData causing the isDirty function to pretend data is always dirty even after saving data server side. Query code : ```Typescript export const useUpdateGrid = () => {...

sensitive-blue

3/6/2025

React Query + MobX — can I (should I?) mutate query cache data directly?

We recently introduced react query to a semi-old codebase that uses MobX observables for almost everything. In MobX, state updates are done in a mutable manner. Queries call service methods which return MobX observables and as a result the query data across our app is mostly MobX observables. I was wondering if it would be bad practice to mutate the query cache directly (since MobX observables are supposed to be mutated directly for fine grained reactivity to work), instead of doing it immutably by supplying it with completely new objects — for example, a to-do item gets checked off and we mutate its observable Todo model directly inside the "todos" query's cached array, instead of setting the query's data with a new array containing the updated item. I am also interested in hearing about your experiences working with this library combination, or anything similar....

fascinating-indigo

3/6/2025

Query data becomes inactive when switching views (useQuery vs. useQueries with shared queryKey)

Hi, I'm using TanStack Router together with TanStack Query, and I have a page that displays either a list of days or a calendar, depending on the view parameter. - The list of days uses useQueries, since it fetches multiple requests....

useful-bronze

3/5/2025

reference variables in useMutation Key

This question is specific to this blog post: https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations Here is my code:...

helpful-purple

3/5/2025

useQuery() Typescript says only data is returned, not | undefined?

The docs state that the data type should be T | undefined. In our codebase however, data is not optional (see image), it is just T. Does anyone know why this is the case?...

extended-yellow

3/5/2025

Advice for creating query "middle ware"

Hello! I am using a "user" query as the auth state for my react application. I am using TS query and router with recent versions. ...

rare-sapphire

3/4/2025

Issue with Normalization and Performance in Infinite Query with Large Datasets

I'm using useInfiniteQuery from React Query to handle paginated API data. The data is large (1000+ pages with hundreds of thousands of items), and I normalize it by creating random IDs using crypto.randomUUID(). The issue I’m facing is that every time I fetch a new page, React Query is re-running the normalization for all the data (not just the new page), I am bit worried that it might cause a performance bottleneck as the dataset grows. Every time a new page is fetched, the select function is running over all previous pages' data, not just the current page, which might make the app slow as the number of pages increases. What I Expect: Only the new page's data should be normalized and appended to the existing data....

quickest-silver

3/4/2025

Can I normalize every queryKey globally?

I have an issue where queryKey is used inconsistently across the project—it can be an object, an array, etc. To standardize it, I created a function normalizeQueryKey that sorts each key and converts it into a string. For example: ``` const keys = ["user", 123, true, null, undefined, { id: 1, name: "Test" }, { name: "Test", id: 1 }, NaN, Infinity, -Infinity, new Map()];...

unwilling-turquoise

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

sunny-green

3/1/2025

Multiple / dynamic number of query clients?

Hey all! This is more of "should I" rather than a "how do i"? I have users with different roles in different organizations. I am trying to make a seamless experience where the user can swith orgs and then see all of their data for that org. Since the number of orgs a user has is dynamic (and would come from an "app" level query client, I want to create a query client for each org and then use it when they switch orgs. Any gotchas here I am not thinking of? Right now im managing it all with query keys, and the deeper we go the more complicated it gets. I was thinking of storing an object that contains a key/value pair of org Ids and then then their respective queryClient, and then providing the query client to my route loaders based on a cookie or something. Thanks in advance for the insight!...

sensitive-blue

2/28/2025

Is there a way to reset mutations based on key?

My apologies - this is a duplicate of https://discord.com/channels/719702312431386674/1050424579920773180 but that didn't have an answer. I am pretty sure I have a legit use case for this: I have a hook that keeps track of pending & successful mutations: ```ts export function useLeftConvos() { const pending = useMutationState({...

wise-white

2/28/2025

Is there a built-in way to refetch/invalidate queries based on a mutation being successful?

Hi 👋 One condition: while being inside the query's hook context. I.e. I don't want to use invalidateQueries for all the potential queries that might "subscribe" to the data the mutation has just edited, but the other way around....

rising-crimson

2/28/2025

QueryObserver: duplicate queries found warning

I am noticing this error frequently in my terminal:

[QueriesObserver]: Duplicate Queries found. This might result in unexpected behavior.

[QueriesObserver]: Duplicate Queries found. This might result in unexpected behavior.

...

correct-apricot

2/27/2025

Keep running useMutations while tab is not visible

I have a use case of uploading multiple files to my backend, we have one graphql mutation per upload. And we can support upload 300 files at a time. They get uploaded synchronously by using a mutation scope. Every single useMutation is in a separate component... and we have the desire to have the mutations run even when the tab is not visible...

flat-fuchsia

2/27/2025

useMutation for creating object to use with POST

i am trying to make a simple input field that takes an input and on a button click / submit it adds the data to an object so that it can be used with useMutation to send it with a POST request. i am quite stuck as i cannot really find a good source yet how to handle this (might also be that i cannot formualte the qeustion correctly) i tried doing it like this post on Stackoverflow but not getting anywhere really i think...

genetic-orange

2/27/2025

Understanding the default error type in v5.

I can throw anything, i.e. throw 5. I log the error and is indeed 5 with type number but the error type is annotated as Error | null. This can introduce runtime errors when narrowing the union and performing operations on the value such as ```tsx // jobQuery.error is Error | null; if (jobQuery.error === null) return...

plain-purple

2/26/2025

Best way to "trigger" mutation on Page Load?

I have a 1 SPA page orderform. 1) User navigates with some query parameters (IDs) 2) As soon as page loads I need to raise a POST request to create the initial order draft. ...

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