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

exotic-emerald

2/13/2024

Migrating v4 to v5 give me couple of errors on some of the queries

Hi there i'm trying to migrated to v5 using the codemod in the docs. After running it, I get some queries where I have to manually migrate te query. But I'm having problems understanding the error and how to migrate them. For example ```ts // v4...

absent-sapphire

2/13/2024

onSuccess analogue in queries?

Hello, I am migrating from v4 to v5, using vue. I can't figure out how I can do same in v5? ```ts...

helpful-purple

2/13/2024

query key problem

import { ContentType } from "../types/content"; export const contentKeys = { all: ["contents"] as const, lists: () => [...contentKeys.all] as const,...

graceful-beige

2/13/2024

seeding-the-query-cache

@/services/queries/boards ``` import { createQueryKeys } from '@lukemorales/query-key-factory'; import { infiniteQueryOptions, QueryClient, useInfiniteQuery, useQueryClient } from '@tanstack/react-query'; import { getBoards } from '@/server/actions';...

metropolitan-bronze

2/12/2024

Transpile react-query in Next.js

Has anyone been able to use the transpilePackages option in next.config.js to successfully transpile React Query 5? Whenever I try I get the following error: TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function on the client.

wise-white

2/12/2024

Usequeries results referencing

In all the examples I have seen the useQueries function references results by number. Is it possible to acces results by query key also? Something like const dataInfo1=results['info1'].data; const dataInfo2=results['info2'].data; This would dramatically improve readability if it were available, I believe. ...

eastern-cyan

2/12/2024

useMutation Hook triggers rerender of component when a non-related subscription receives new data

Hello, I'm using trpc with hooks from TanStack-Query. I noticed something very strange regarding the useMutation hook: I have a subscription in one part of my app that receives new data about every third second. Internally, this seems to trigger a rerender for all of my components using any useMutation hook. I noticed this because one of those components is very heavy and creates a stutter whenever new data arrives. The first picture shows the frequent heavy rerender, the second and third ones show the causing change inside the react profiling-devtools (hook 37 and 40)....

gradual-turquoise

2/11/2024

setState

Warning: Cannot update a component (ChatNotificationsProvider) while rendering a different component (Navbar). To locate the bad setState() call inside Navbar and the same goes to the NotificationsProvider when i try to set state to the context and i dont understand how to prevent this error

conscious-sapphire

2/10/2024

prefetchQuery has old data on page refresh

Hi folks, I have a Next.js 14 application (app dir) where I am trying to utilize TanStack Query with prefetchQuery, HydrationBoundary and client-side query after that. The problem I am currently facing is: 1. I make a query to my backend (prefetch + useQuery) 2. I make a simple mutation which updates data and invalidates the original query 3. Query gets invalidated sucessfuly, refetches the data and everything is OK 4. I refresh the page and I have old data (they come from the prefetch for 100%, if I give staleTime 0 to the client query, correct data is fetched [but it flickers as I get old data from server component])...

extended-salmon

2/9/2024

AI chatbot for user support

Hey! My team is building an AI chatbot that can help people understand your developer documentation more easily and answer users’ questions. Would you be interested in checking out a demo?

afraid-scarlet

2/9/2024

Dynamically prefix all queryKeys

We have a setup whereby our APIs return different data, based on which account_id the JWT is issued for. E.g. posts.list returns posts only for the authorised account_id without having to specify any filters, etc. Is there a good way to dynamically transform all query keys and prefix them with the account_id, so that we wouldn't have to manually update all queries to do so, and avoid us missing to add it, in which case we can accidentally display stale data from a previously loaded account. I know we could flush the cache every time the account_id changes, but would much prefer to keep the caching in place....

multiple-amethyst

2/9/2024

Does `ensureQueryData` support passing a signal?

As per title

complex-teal

2/8/2024

HMR/Vite hot code reload clears entire cache

I'm using react-query in a pretty standard vite/react. I was having issues when updating the query cache using setQueryData after running a mutation, so I used the dev tools to look at the query data. It seems like after every Hot Module Reload triggered by vite, the entire query cache is wiped, and even though my interface still displays the data, calls to setQueryData will no longer affect it (oldData, the first argument to the update function, is always undefined, even if the data is currently being displayed on screen), and the devtools won't show any queries in the cache at all. I haven't found any information about how this is supposed to work - is this expected behavior or am I missing something? I can provide more data about my setup and configuration files if needed, but it's pretty much taken straight from the examples....

adverse-sapphire

2/8/2024

Does ReactDom's flushSync works with setQueryData in same way as it works with setState()?

In reference to this example in react docs(https://react.dev/learn/manipulating-the-dom-with-refs#flushing-state-updates-synchronously-with-flush-sync) where flushSync API from React DOM can be used to sync DOM to state updates synchronously, Can we wrap setQueryData call for a active query in flushSync callback and expect to access the updated DOM for scrolling etc? ``` ...

fascinating-indigo

2/8/2024

What if I need to pass custom information to my query function?

In v4 docs we can find this section: https://tanstack.com/query/v4/docs/framework/react/guides/infinite-queries?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Finfinite-queries#what-if-i-need-to-pass-custom-information-to-my-query-function. Unfortunately it's not present in v5, and as far as I can see passing additional data to fetchNextPage doesn't do anything and the data gets lost anyways. This feature is crucial for me, as I'm implementing a kanban board, where each kanban stack will be infinitely scrollable. My API can work in two ways: - I can fetch data for all stacks at once, which is very convenient when doing initial data fetching - I can specify which stack I want to fetch next, which is convenient when scrolling one of the stacks and trying to fetch more data for it...

conscious-sapphire

2/7/2024

Is there a chance to reload part of a query only?

Hi, I am using react-query to get data for tables. As almost any data can potentially become a column in those tables, the initial query already loads all details for every row. For example I got a query with the key ['users']. Now I want to reload the user with id 10. I wish I could do something like querying for ['users', 10] and see the cached list for ['users'] updated. Is there any way to tell the ['users'] query how to match sub-query keys?

equal-aqua

2/7/2024

Dependee useQueries only randomly executing, despite successful dependend useQuery result

I have a simple useQuery, which is enabled in my onMounted call: ``` const { isSuccess, isError, data: assetManagerEvents } = useQuery( {...

fascinating-indigo

2/6/2024

isPending always false and status always 'idle'

I am using the react-query integration with TRPC and successfully calling mutations. However the isPending never changes to true and status is always "idle". Can anyone spot why? ``` function ProfileImageModal() { const { toast } = useToast()...

firm-tan

2/6/2024

Dynamically modifying queryKeys?

A little context, what I'm doing is writing "controllers" that do some data manipulation and return them as queryOption objects. This way I can make the call on the server and hydrate the client side queryClient. (NextJS pages directory.) I have to call one API to get an array of address books, then run through those address books and get all the addresses in them. And return them categorized into sepearte billing and shipping addresses. /addressbooks -> /addressbooks/{addressBookId}/addresses -> groupBy(addressType) What I would like to do is dynamically push to a queryKey array and make sure that's used so I can easily invalidate edits on individual addresses....

genetic-orange

2/5/2024

How to handle nested objects without re-render the whole app?

App example: user has columns, columns has todos, each todo has a done checkbox that can be toggled on and off, basic stuff How should I manage the requests to this use-case? One request to fetch all data? or split the data fetch into individual requests for each column? At some point, the entry data will have to be refetched/mutated/optimistic updated, and this will change the entry data reference and trigger a re-render to my whole app....

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