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

xenial-black

12/28/2023

Is a query not supposed to be generated upon page refresh?

I've observed this behavior where navigation from Page 1 to Page 2 adds the desired queries to the query cache, such that mutations that invalidate the target queries results in the desired refetches. However, if I refresh Page 2, which calls custom hooks that in turn call useQuery, and then call the mutation method, the queries never appear in the cache to be invalidated, and therefore no refetch happens. Is this expected behavior? Is there a way to resolve the difference in behavior between navigation and page refresh? Thank you in advance. ...

extended-salmon

12/27/2023

Access Mutation Data

Hello Guys, What is the best way to access data returned by a mutation? ```js const mutation = useMutation({ mutationFn: useCreateInvitation });...

sensitive-blue

12/27/2023

infinite scroll network 200 but undefined

I'm trying to implement infinite scrolling of chat content. The data result is 200. If you check the preview, you will see the following. However, when outputting to console.log, undefined is displayed. What's the problem? "react-query": "^3.39.3",...

ratty-blush

12/26/2023

onSuccess migration: what to do for this use case?

Hey friends, I read TkDodos blog about killing the onSuccess APIs and that seems great, I'd love to hop on board. Everything he writes about makes a good amount of sense and I totally see the overarching reason -- onSuccess for useQuery creates a lot of anti-patterns. There is one use case I still can't wrap my head around -- creating arbitrary values for client side rendering in server side data. I have this state for ingredients, which, from the client, accepts a "selection". The database does not need to know, and should not know this information. The client messes with it and we do something with that client side state later....

wise-white

12/24/2023

angular-use-query: track refetches

Hello, I'm using angular v17. I would like to monitor the query changes from tanstack query, and publish the results to a local store of mine. Basically, each time it refetches, i would like to be notified somehow, so i can retrieve the latest data,errors,isFetching,etc and publish them. I could imagine an API like this:...

extended-salmon

12/22/2023

Filtering data in a Tanstack (Mantine) React Table

I want to filter the data on two fields which are not in one of the columns, the fields are called isActive and isArchived. When the isActive button is pressed in the table header I want the data to only show the active employees otherwise all employees should be shown, if the isArchived button is pressed I want the data to only show the archived employees otherwise I only want to show the unarchived employees. Is it best to use the select option inside the useQuery or are there better solutions...

sunny-green

12/22/2023

Disable horizontal scrolling by keyboard keys

Hi, does anyone know if its possible to disable that the keyboard keys scroll (left and right) horizontally through the table? I have not found an option to do so

afraid-scarlet

12/21/2023

Batching single queries for better caching?

Hi all, let's say I have a situation where I'm fetching a paginated list of a users todos and then as a dependent query I want to fetch extra details about those todos. The issue I'm running into is that a page of todos can change based on sort/filter etc so I can end up fetching details of the same todo multiple times if the set of IDs on the page changes as those IDs are in my query key for the details. For example: 1. I have todos with IDs 1, 2, and 3 on page 1, my dependent query fetches with key ['todos', 'details', [1, 2, 3]] 2. User sorts by name...

ambitious-aqua

12/21/2023

Use `select` or return from inside query function?

We have an API that returns { metadata: Record<string, CustomType> }. Often times we only want one of the returned CustomType. The Record is of IDs to CustomType so when we pass in one ID, we only want one returned. Should we be using the select function to return that one object or can we return it right inside the query function? Using select:...

xenial-black

12/21/2023

I'm stuck with latest changes to use query and mutation

Docs didn't provide much on use query and mutation after 'removing the callback', use query and mutation, and no examples provided!! I need examples on how to use both, Thanks in advance

fair-rose

12/20/2023

Query Invalidation with NextJS App Router + RSC

Hi there, running into a bit of a tricky situation with React-Query, Next.JS (App router), and server components. I have a feeling I'm using RSC + react-query incorrectly, so if this is just a dumb use case, feel free to let me know. I'm following a similar setup to the getQueryClient() example here: https://tanstack.com/query/latest/docs/react/guides/advanced-ssr ``` import { AscOrDesc } from "@/gql/graphql";...

fair-rose

12/20/2023

Codegen with useSuspenseQuery

Anyone managed to figure out a way to codegen useSuspenseQuery hooks

foreign-sapphire

12/20/2023

do i need to check cache before query?

do i actually need it? as i understand RQ will do this under the hood for me ?

flat-fuchsia

12/19/2023

I could not understand why I can not add onSuccess on useQuery

here is the code. ``` } = useQuery({...

unwilling-turquoise

12/19/2023

Fetching infinite query data without any UI action to invoke fetchNextPage

Hi, I have a use case where I need to call a paginated API but I need to show all the data at once on UI instead of asking the user to load the next page. Since I can't invoke the api to return all data at once, is there a way to achieve this by fetching all pages in the background without any use interaction?

sunny-green

12/19/2023

In what situations the `data` content gets reset?

I'm trying to use Query to handle an analytics dashboard. The query key is made of the url plus query params, the latter contains a start and end property. Every 30 seconds the time filter gets updated to use the latest timestamp. What happens is that React Query re-triggers the isPending because, after some debugging, I found out that at every call the content of data goes undefined even though there was some stuff before. I've tried to check for some unwanted rerender but everything looks fine. In your experience, when does the data content gets reset?...

ratty-blush

12/15/2023

isPending is true by default without query.

I want to show a loading message while isPending is true but its true by default, so what could i do?

if(isPending) return <p>Loading...</p>

if(isPending) return <p>Loading...</p>

...

extended-salmon

12/15/2023

Bypass loading state between two queries

Let's say you are iterating over a paginated list where each page data is fetched with useQuery How to avoid the spinner during the time where the data is getting fetched? In most cases, and assuming that the queries are optimized enough, you'd rather want to show the page1 data for some amount of time until we receive page2 data, and avoid the spinner phase. ...

flat-fuchsia

12/14/2023

useMutation not updating

Is this correct way to use mutate? ```json { "states": [...

harsh-harlequin

12/14/2023

Cache update not working (maybe SSR?)

I have a next app with this page that prefetches data

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