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

complex-teal

3/10/2024

how to cancel / disable previous mutation onSuccess calls?

For now the best I could come up with is this: ```typescript ...

other-emerald

3/10/2024

Delay query invalidation

Is there a way to invalidate query request after successful mutation, but only after a couple of seconds? Settimeout doesn't seem to do the work, since the query gets called ~2 seconds after success no matter how high the timeout is Also, is there a way to retry the query every X seconds but only a specific amount of times with invalidation?...

conventional-tan

3/10/2024

How to know HTTP status code in `onError`

onError = (error: Error)  => {

}

onError = (error: Error)  => {

}

...

other-emerald

3/10/2024

Infinite query + loader

When using infinite query inside loader function of tanstack router, I see that in the RQ kitchen sink example, ensureQueryData is used, but there is no ensureInfiniteQueryData. Is the alternative to do prefetchInfiniteQuery or is there something more appropriate?

fair-rose

3/9/2024

useSuspenseQuery loop

Hello everyone, I need your help with a bug related to the useSuspenseQuery function. It happens that when I do a data update on a page and return to the list that has the useSuspenseQuery function, it starts sending a loop to my API.

rare-sapphire

3/8/2024

How to await useQuery result in a custom hook test

Hello, So, I already know how to test a useQuery hook, and that it needs to await waitFor the success or error. But how do you await a useQuery completion from "within" a custom hook ? ...

conventional-tan

3/8/2024

How to use `useMutation` with fetch (not axios)

```ts const postData = () => { const res = await fetch("/profile", { method: "POST",...

constant-blue

3/7/2024

Accessing all mutations, filtered by variables + preventing duplicate mutations in MutationCache

I have an array that is used to render input fields. Each input triggers mutate whenever onBlur is triggered. For example: 1. User enters a value in input 'a', e.g. 'hello' (the variable), and blur is triggered 2. mutate gets called with key ['commonkey', 'a'] and returns some data...

multiple-amethyst

3/7/2024

Refetching data based on another query's response

I am attempting to implement data fetching based on two queries: positionNumbers and positionId. After the initial load, if there is an update in the number of positions (maybe after success in useMutation) , I want to invalidate the positionNumbers query key and refetch only the new index for the positionId query, not all previously fetched indexes. However, currently, all indexes are refetched whenever there is an update in the number of positions. How can I achieve selective refetching of only the new index for the positionId query? ```javascript const { data: numberOfPositions, // bigint (10n)...

diverse-rose

3/7/2024

How to change state, when 1 mutation worked, and you need to fetch result with another mutation?

Ecom project. On pages with catalog list, i have product cards, when i press on "add to cart", i send request to server. After that, i want on cart icon in header counter to appear, showing the number of cart.products.length. My backend partner says, he can send cart items in response to api/add_to_cart. That is ok, But is there any way to listen to add_to_cart and update state instantly in header? ...

genetic-orange

3/7/2024

Error using codemod when upgrading to V5

Hi, I decided to migrate from v4 to v5, and I was trying to use the following "TS" codemod: ```npx jscodeshift@latest ./path/to/src/ \ --extensions=ts,tsx \ --parser=tsx ...

unwilling-turquoise

3/7/2024

Using prefetchInfiniteQuery with a fn that takes multiple params

I'm currently facing an issue when trying to prefetch ```ts export async function getServerSideProps() { const queryClient = new QueryClient(); ...

conscious-sapphire

3/7/2024

Typescript with react query devTools

im using react with typescript and i want to use the devtools of react query but it's not working

eager-peach

3/7/2024

Network response not matching react query data

Hello! I am making an api call and the network response I get from the api does not match the data that request query returns. For example, I make an api call to get a list of users for a vendor here is the response in post man: Here is the that same response logged to the console from the react query data: They do not match and I can not figure out why, the users array becomes undefined and incorrect...

message.txt

metropolitan-bronze

3/7/2024

Why is persistence not instantly restored?

I'm building a local-first app, so I'm using the <PersistQueryClientProvider />, with createSyncStoragePersister(). As it is sync, I expected data to be restored from localStorage instantly, but instead I'm still dealing with a flash of loading states on each reload. How do I avoid this?

correct-apricot

3/6/2024

Mock react query with vitest

  const { permissions } = queryClient.getQueryData(
    "validate"
  ) as ValidateInterface;

How can I mock this example? I'm trying this way:...

deep-jade

3/5/2024

Query after timeout?

If I set to axios a timout for about 5000ms, does the query retry after that time settled?

dependent-tan

3/4/2024

Persist some parts of the queryCache to localstage

I have a pretty basic shoppinglist app where data is split it ints volatility: ingredients and recipes change infrequently, while the shoppinglist itself does changes often. Is it possible to hold the recipes and ingredients in local storage for a long time (e.g 7d) but prevent the shoppinglist from being persisted that long? Since I didn't see anything obvious in the queryClient or persister, I think the easiest choice is to have 2 queryClients differenty configured, one "long term" and one "short term"? The long term one would have proper localStorage persistence....

other-emerald

3/4/2024

V5: setting global state

In V5, the onSuccess callback was removed from useQuery, but I need to set the global state after I receive the data. Is there a better alternative other then using useEffect and monitoring data?

ratty-blush

3/4/2024

How to get all of a paginated resource

Currently I've built this FN that serially fetches all of a resource: ```ts import type { QueryFunction } from '@tanstack/react-query'; import type { Metadata, ResourceListOptions } from '@dn-types/api';...

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