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

quickest-silver

2/14/2024

How to install old version of tanstack react query using yarn

I was following a tutorial on youtube where there was an error because tanstack/react query isnt compatible with trpc so I had to try installing an older version, when i tried using 'yarn add @tanstack/react-query 4.36.1' i got the following error 'Error: https://registry.yarnpkg.com/4.36.1: Not found'

national-gold

2/14/2024

Migrated from v4 to v5, don't know how to use it without onSucess

I have tried removing the onSuccess as I should, and then including it in the an independent useEffect, but the content renders for a split second and disappears. ``` export default function Facturados() { const [desde, setDesde] = useState(router.query.desde || '')...

exotic-emerald

2/13/2024

Hide API key to frontend

Hi, short question can https://tanstack.com/query/latest/docs/framework/react/guides/suspense help me on making queryFn invokation in a rsc; because i dont want my api key to be leaked in frontend ? thank you

correct-apricot

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

subsequent-cyan

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

correct-apricot

2/13/2024

query key problem

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

foreign-sapphire

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

wise-white

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.

jolly-crimson

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

foreign-sapphire

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

afraid-scarlet

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

deep-jade

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

correct-apricot

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?

fair-rose

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

equal-aqua

2/9/2024

Does `ensureQueryData` support passing a signal?

As per title

flat-fuchsia

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

flat-fuchsia

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

rising-crimson

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

automatic-azure

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

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