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

eastern-cyan

9/18/2024

How to properly type data in useMutation?

Hello everyone! I am using Tanstack React Query v4.36.1. Please help me to type this correctly? I don't understand why it's not working! I'm using type AxiosResponse<User> and I can see that the correct data is being returned. But it still results in the following error: ```javascript ...

noble-gold

9/18/2024

Pagination with only one query key

I actually go through the docs regarding react query pagination. But somehow, I have a requirement to implement one only query key. My current implementation was to through queryClient.setQueryData() just to override the cache. Appreciate any advise regarding this one. Thank you very much....

fascinating-indigo

9/18/2024

Updating react query cache frequently without spamming my backend

Hello, I'm working on an app that requires to consume a single cache entry from different components at the same time. This entry is initially populated from a query (useGraph) and then is updated when an specific mutation is used (useUpdateNode). Because of a new feature I'm building I need to frequently update the useGraph query cache optimistically (useUpdateNode mutation is called when a text input onChange event is triggered), and it must be reflected instantly in the other components that consume the query. What I'm looking for is a way to debounce the execution of the fetch function, without debouncing the execution of the mutation itself as it would also debounce the optimistic update....

adverse-sapphire

9/18/2024

l Query Revalidation Completes After Mutation

Hey! I've globally set up my MutationCache like this: ```ts mutationCache: new MutationCache({ onSuccess: (data) => {...

continuing-cyan

9/17/2024

Enabled condition

I have "enabled" to only run if there is an objectType passed in, but for some reason it's still running even though objectType is undefined. I confirmed this by console.log objectType in the queryFn where it should always exist, but even in the log it show undefined. It's causing the network request to be like ...objectTypes/undefined/events... I've never had this problem when using enabled so unsure what I'm doing wrong: ``` export const eventTypesForObjectQueryKey = (objectType: string) =>...

flat-fuchsia

9/17/2024

Query tree data structure with parent-children loading

Hello everyone, I'm working on an app with a page system similar to Notion, where I need to load data asynchronously. The goal is to initially load only the parent pages, and then, when a parent node is expanded, load its child pages via an async query. I'm considering using useInfiniteQuery for this, but the challenge is that the tree structure isn't loaded in a linear order. Users can expand any parent at any time, meaning pages can be opened in a random sequence....

flat-fuchsia

9/17/2024

Using react query cache enough for my use case, or do I need to include a state management lib?

Hey all! Let me first simplify my use-case using some pseudo code: ``` const ChatManager = () => { return (...

graceful-blue

9/17/2024

Convert api data to client state waiting for a save action

Hello folks, I’ve been trying to figure out how to manipulate “server state” without immediately persisting it to the back-end. Imagine you have “server state” as a list. Each time want to add or remove an object, this would be persisted to the server The solution to only use api data would be to update your back-end logic to store a draft and active version of your table or something like that (which sounds very weird)...

ambitious-aqua

9/16/2024

How to access cached data from React Query in a different component?

I have fetched data using useQuery in one component, and now I need access to that same data in another component that is not a child of the first component. Should I refetch the data in the second component, or is there a way to access the cached data from React Query without refetching it?

fascinating-indigo

9/15/2024

in tanstack query, how do I find if a mutation has already run once?

Same as title.

implicit-lime

9/14/2024

Long waiting time for queryFn to run

Hi, I'm experiencing a strange issue with react-query. When the useQuery function is mounted, and I can see it registered in the devtools, it takes several milliseconds (1500 - 3400) to run queryFn. My code:...

fair-rose

9/13/2024

Attempted to invoke queryFn when set to skipToken. This is likely a configuration error

```js loader: ({ context, params }) => { const [cookies] = context.cookies return context.queryClient.ensureQueryData({ ...getProjectQueryOpts({...

sunny-green

9/12/2024

Tips for debugging over-fetching of data / duplication of http requests?

can anyone share tips / pointers for how to debug duplicated http requests emanating from react-query usage? specific behavior i'm seeing is that a single query invoked via ensureQueryData() is re-run despite having just fetched and returned valid data only a few ticks prior. this results in 2 http requests to the same endpoint with the same parameters returning the same data. as far as i can tell, this is NOT due to react's strict mode mechanism as i see it in production as well. i've been manually inspecting the cache with queryClient.getQueryCache().getAll() but from that perspective, everything should be working as expected (iow, i didn't see any mislabeled cache items or duplicate entries). ...

vicious-gold

9/12/2024

log-out/sign-out clarification

What is the recommended way to flush all of the react query data?

like-gold

9/11/2024

Trying to disable caching (with gcTime & staleTime) does not seem to work

Im trying to disable cache for some queries, or all queries, but no luck so far. I have tried setting gcTime: 0 and staleTime: 0. Additionally, if i call manually refetch, it hits also cache always. Is it possible to force fetching new data somehow?...

constant-blue

9/11/2024

Best practices for state management and fetching data

I have been using react-query for a few months now but still feel very green. So I have a Quote component with a bunch of form fields that the user can fill in. I am using that same Quote component for both creating a new Quote and editing an existing Quote because that's the point of React, reuse components. So I am trying to figure out how to handle the react-query state in this case. So here one of my useQuery functions for the Quote component. ```js const { data: selectedPackaging,...

robust-apricot

9/11/2024

Tanstack Router loader integration question

Could someone explain why ensureData is used in the loader but useQuery is used in the component in this example? https://github.com/TanStack/router/blob/main/examples/react/with-trpc-react-query/app/routes/dashboard.posts.%24postId.tsx Thank you...

eastern-cyan

9/10/2024

Get all query cache ?

Hello, I'm using trpc, but its related to useQuery/getQueryCache ```typescript const itemsIds = useMemo(() => {...

automatic-azure

9/10/2024

Pass initial data in a server component

Hi. I'd like to achive something like this using nextjs app router and tanstack query: 1. Root layout renders and fetches initial user vip level by session id from cookies 2. Root layout renders a QueryClientProvider and passes just fetched level - lets say bronze to the provider 3. Client component somewhere else uses hook useVipLevel which should never be loading because there should be initial data passed on the first user enter even before client components render...

probable-pink

9/10/2024

Completely disable cache between two pages.

I just found this thread: https://discord.com/channels/719702312431386674/1003327027849474198/1064541918186442763 So looks like since v4, the behaviour is do not refetch even we set gcTime (cacheTime before v5) to 0. But I want to disable a cache completely, When components mount and unmount, the query should refetch. I also set staleTime to 0 but it's sitll no working. Any suggestions?...

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