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

unwilling-turquoise

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.

flat-fuchsia

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

optimistic-gold

3/8/2024

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

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

vicious-gold

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

flat-fuchsia

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

afraid-scarlet

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

afraid-scarlet

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

cloudy-cyan

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

xenial-black

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

typical-coral

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

inland-turquoise

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?

exotic-emerald

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

national-gold

3/5/2024

Query after timeout?

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

genetic-orange

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

fair-rose

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?

harsh-harlequin

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

adverse-sapphire

3/4/2024

Refetch polling with large amounts of data in the response

One of my endpoints returns a large amount of data. I want to occasionally poll it for changes, but I don't like how I get ALL of the data even when nothing has changed. I've been thinking about redesigning so that I use 2 queries, one for the polling which would watch for a change state return (small payload) which would then trigger a full pull. But this doesn't seem like an ideal practice. I don't have a lot of control over the endpoints, so I can't really redesign the API to send less data without causing lots of drama. ...

flat-fuchsia

3/4/2024

Calculating the total time taken for mutation

Hi I have a function for mutation, and I want to know the total time taken for the function to execute. That is, the difference between the time from onSuccess and start of the function. Currently what I am doing is returning the start time from the mutation function and accessing it in the data on onSuccess function, ...

like-gold

3/3/2024

@tanstack/react-query-devtools

Is this dep a dep ot a devDep? It's not clear at all for me if I should install it as devDep and decrease the bundle, thanks

national-gold

3/3/2024

Use react-query with IndexDb with SSR randomly throws window not defined

I have a code similar to this: ``` const { data } = useQuery("idx", async () => { const result = await indexDb.get("mykey");...

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