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

absent-sapphire

7/29/2024

Use my queryClient oustide React context

Hey there, I'm here because I'm not sure of how it would work to use my queryClient both inside & outside my react context. Let me explain: Suppose I have this file: ```typescript const queryClient = new QueryClient({ defaultOptions: {...

quickest-silver

7/27/2024

Prefetching, client side hydration and updating parameters

In my page.tsx I am using prefetchQuery to grab some data from an API. I am then wrapping a client side component within a hydration boundary as per the documentation. Within the client side component, I have a useQuery call to hydrate the pre-fetched data. This works fine. Data is loaded instantly when the page renders. Great....

environmental-rose

7/27/2024

UseQuery. How to reset hydrated value to undefined in vue 3 + nuxt.

I have a query that is called on the server side using suspense and I have a problem with resetting a value to undefined. The queryClient.resetQueries doesn't work because the hydrated value becomes the default value as well. How can I reset the current value to undefined?

passive-yellow

7/26/2024

Looking for a quick review, first time using Tanstack Query - React

Here is the file: https://github.com/lwears/word-synonyms/blob/refactor-use-react-query/frontend/src/Form.tsx Would be nice to get a review to see if i am doing things correctly. Thanks in advance...

adverse-sapphire

7/26/2024

Mutation are in pending state in browser

it happens sometimes when mutation request get stuck in browser as Pending and User cant do basic things like login so is there a way to debug this why its happening and it is Back-end issue or frontend . need some pointers to solve this issue

extended-salmon

7/26/2024

How can I set data to only update after a successful query is complete?

I understand data from useQuery() will be undefined initially, but when the query is refetching I don't want data to change until the new data has come in. Instead it briefly changes back to undefined before updating to new data. Does useQuery() have an option for the behaviour I want or do I have to store query results myself with useState() and useEffect()s?

robust-apricot

7/26/2024

React-query testing

Hi am trying msw to test my components where am using the react-query. While testing the happy paths it's just great it works easily. On error i managed to get the error response but the error message is not the right one. ```...

genetic-orange

7/26/2024

Enabled sets data to undefined - solution?

Hi, having such a modal that is opened based on search params, I fetch user info and show a spinner or data after fetching. The problem appears when we close the modal - the enabled option, from what I see, immediately sets the data to undefined, and because of this, a spinner appears briefly when closing. I have no idea what to do to prevent this. Any ideas? Tanstack query v5 by the way. ```ts export const UserModal = () => { const [query, setQuery] = useQueryStates(userModalParsers); ...

national-gold

7/26/2024

QueryClient configuration: Invalidating all queries when a 401 is returned (solid-query)

Hi, Is there a way to do something like: ```...

harsh-harlequin

7/26/2024

Does partial matching apply to query keys?

For invalidateQueries, do query keys just need to meet the subset of query keys or must it be exact. For example, if i have two queries that have the following queryKeys: ['hello'] and ['hello', 'world'] would invalidating ['hello'] invalidate both of the queries? I assume not since queryKeys are hashed at some point?...

adverse-sapphire

7/25/2024

useQuery() in recursive component - how to know when all fetches are complete

I'm working on a rendering a tree-like structure (think of nested folders where each folder needs it's own fetch request). What's the best way to know when all the descendant queries are completed to render everything at once? I first reached for <Suspense> and useSuspenseQuery() however useSuspenseQuery() doesn't support enabled (there are some reasons why I need to conditionally run the query)....

extended-salmon

7/25/2024

testing a query cache

Hey guys, I'm using a query with a stale time (I mean the cache is activated) and in my test I would like to check that the data from the cache is well retrieved. I have access to my queryClient in my test but I don't know what to use to get this assertion. For exemple I have my keys: ['tests', 1] and ['tests', 2] I start with ['tests', 1] and I expect the queryFn to be called then I swap to ['tests', 2] and I expect the queryFn to be called...

rare-sapphire

7/24/2024

Dynamic dependent queries

Hi, I'm not sure what's the way to go about this situation ```ts const useOwnedTokensMetadata = (chain) => { const {data: accounts} = useQuery({ querykey: ['accounts', chain],...

rising-crimson

7/24/2024

Problem with react query and nextjs query params

Hi, I am using react query with a custom hook for pagination but the query is not executed, it is always pending for some reason and it does not make the call, is it because of the line where I push the queries, did it happen to anyone? ```js import { OptionalParams, Pagination } from '@/types/commonTypes' import { usePathname, useRouter, useSearchParams } from 'next/navigation' import { useEffect, useState } from 'react'...

sharp-indigo

7/22/2024

Prevent Refetch on invalidateQueries() unless certain time has past.

My use case is I have a SignalR message that comes in that tells me when I should Refetch the page. So I call invalidateQueries each time. The problem is this can occur hundreds of times per second. By default it cancels existing queries which manifests itself by making the UI never refresh until there is no more messages for a while. I set the cancelRefetch to false. This kind of does what I want but there is no way to set an interval. Maybe there is a better way to do this. I basically need to disable refetchInterval when there hasn't been any SignalR messages within the last 1 second....

sunny-green

7/22/2024

I can't adjust how many retries I want to perform in useSuspenseQuery where a prefetch is occurring?

adverse-sapphire

7/22/2024

Change `useQuery` error type

Hi, I'm trying to update the error type for my useQuery calls to ``` export class HTTPError extends Error { code: number;...

like-gold

7/21/2024

useInfiniteQuery with maxPages considers empty data a page and removes a full page

I'm using useInfiniteQuery to get more messages as the user scrolls up, sort of like discord. now my backend does not tell me if there are more messages to fetch after I request them. It just gives me an array of messages before a specified message id. now, the getPreviousPageParam will not know if there are more pages. So what I've done is to will fetch the previous page but then if the data is empty, it will prevent further fetching. ...

firm-tan

7/20/2024

Infinite Query making redundant calls?

My infinite query seems to be making redundant calls after the initial call (see attached video and images). If anyone has any ideas about why this would be, I would appreciate it. Thanks....

conscious-sapphire

7/20/2024

Infinite query with maxPages scrolling

In my react-native app I have a list of posts supplied by an InifiniteQuery. When maxPages isn't set, it works as it should. Scroll to the bottom of the list -> new posts are fetched -> list gets longer -> I can scroll more. But when maxPages is set, there's an issue. ...

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