TanStack

T

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

metropolitan-bronze
metropolitan-bronze1/9/2024

Why do PATCH and DELETE requests not refetch the data from the database?

Hello! When I store data in the database, I usually do it the following way: ```js...
sensitive-blue
sensitive-blue1/9/2024

Need help to find out why my query is not marked as stale

Hey guys, I don't understand what I am doing wrong. Maybe it is just some async stuff. I have one query to fetch some bank data. On top of that I have written some more queries which filter the list of bank data I am getting. Once I am posting new data I want to invalidate all filters and the initial query which gets the data. However, one query is always using initial data set and not the updated data set. ```ts...
automatic-azure
automatic-azure1/9/2024

Using react-query with Axios and intercepting requests and responses

Does anyone have a good example of using react-query with Axios and intercepting requests and responses? I googled it quite a bit and couldn't find any good examples. I am using react-query for the first time. From the tutorials I've looked it, it seems pretty straight forward for basic use cases. Just struggling with this example.
sensitive-blue
sensitive-blue1/9/2024

Using infinite query to restore and scroll to certain cursor point

Hi, Have a question on a use case that I'm about to start implementing, but a little unsure how best to implement it with useInfiniteQuery We basically have a thread of messages (which is list of messages in date order - think the same as a slack channel where message are displayed based on a cursor (timestamp the message was created))....
complex-teal
complex-teal1/8/2024

Handling Error

When i make a request, when api fails i dont receive the api payload from the api that has been sent. Here is the mutation fn ``` export const verifyEmail = async (token: string) => {...
harsh-harlequin
harsh-harlequin1/7/2024

queryClient type issue?

Hello, Please see attached screenshot. Can anyone point me in the right direction?...
No description
dependent-tan
dependent-tan1/5/2024

Paginated queries, optimistic updates and data structure

Hello everyone! I have been using react-query for over 2 years, and normally it solves all my problems related to fetching and caching data, but there's always been a specific problem I haven't been able to solve, so I'm wondering if I'm missing something. Imagine a blog page where a user can write comments about the post they are seeing. The normal flow is to fetch the post comments in a paginated manner that allows the user to keep loading more comments as he scrolls. If the user writes a comment, we produce an optimistic update by displaying the comment in a transient state in the list of comments. If the comment's publication succeeds, the transient state is removed. If the publishing fails, the comment is updated to an error state, and the user can retry the action. Furthermore, the user can take actions such as deleting comments, editing comments, and so on....
harsh-harlequin
harsh-harlequin1/5/2024

useQuery not updating after query key changing in custom hook

Hi all, thank you for your time. I'm composing a custom hook to retrieve an array in this manner. I realized that destructured data returning from useQuery was not being updated on query key changes when pageUp or down is called. Could anyone point out my mistake? ```js import { useQuery, useQueryClient } from '@tanstack/react-query';...
like-gold
like-gold1/4/2024

Refresh Infinite Query on Interval

We are using useInfiniteQuery but want to fetch the previous page every 5 seconds. So we've created a custom hook that calls useInfiniteQuery and then has a useEffect that sets up an interval. However, when there are multiple components calling the hook, we only want one interval between them. Is there a way to check how many subscribers a hook has (which we can use to set up an interval on the first subscriber)?
typical-coral
typical-coral1/4/2024

Handling HTTP errors using Fetch with useQuery

First, new to react. New to react-query. I have a POST API where the server is returning a 422. And while checking to see if the response is okay using fetch(), i'm struggling to how to pass the error back to useQuery, because if i just pass the response.json, useQuery obviously isn't going to see the error. ` // my .tsx file ...
exotic-emerald
exotic-emerald1/2/2024

Store non-sequential page with Infinite Query

Hi, is it possible to store result page of queryfn of useInfiniteQuery non-sequentially when a custom a custom page param is passed to fetchNextPage function of useInfiniteQuery eg. When we do this: ` // Pass your own page param const skipToCursor50 = () => fetchNextPage({ pageParam: 50 })...
correct-apricot
correct-apricot1/1/2024

fetch and consume data during ssr process

Hi, my goal is to fetch external data and share the result to a prefetchInfiniteQuery() and all that during ssr data is fetched from there ``export default async function useGetProjects() {...
genetic-orange
genetic-orange12/31/2023

Fetch during server side render

I am trying to run my useQuery's during SSR on a custom Vite setup, but for some reason it is not working due to do queries being in the idle fetchingStatus while their status is loading. When does the fetchingStatus change? And how can I force this/wait for this during SSR? Thanks...
typical-coral
typical-coral12/31/2023

TS error:

Argument type UseQueryOptions<T, Register extends {defaultError: infer TError} ? TError : Error, T, string[]> & {initialData?: undefined} & {queryKey: DataTag<string[], T>} is not assignable to parameter type FetchQueryOptions<[T][T extends any ? 0 : never] & T, Register extends {defaultError: infer TError} ? TError : Error, T, QueryKey> I would not know what are details are necessary but it seems like lightsListQueryOptions does not implement correctly FetchQueryOptions...
No description
extended-salmon
extended-salmon12/30/2023

Solid-query - query.isPending causing Type Error

I am getting the error "Cannot read properties of undefined (reading 'when')" on the switch branch for when={query.isPending} on the page load. On page refresh it resolves the content. Commenting out the branch removes the error. I can't find relevant issues on GitHub for this. Can anyone advise how to deal with the type issue on that? using solid-query v 5.15.0...
equal-aqua
equal-aqua12/29/2023

Subscribe to a query without useQuery

I have a list of 300+ items rendered on the page and want to avoid mounting useQuery for each item. However, each item is wrapped with React.memo and I need the component to update whenever one particular query's data is updated. is there a way to subscribe to one particular query's changes and update the component accordingly without performance issues? thanks!
extended-salmon
extended-salmon12/28/2023

re-route and fetch new data via refetchQueries

i want when click to a button to re-route and fetch new data base search params when i wait for refetchInterval to refetch data it success but i'm looking for similar behavior via queryClient.refetchQueries({ queryKey: ['x'] }); but i don't success, any help to trigger the update? ...
graceful-beige
graceful-beige12/28/2023

Recommendation on storing list data as is and by id with one server side response

After reading through the deprecation post on onSuccess for useQuery, I'm having a hard time wrapping my head around how to massage a single response from my API into multiple query keys. I have a number of JSON APIs that return back a list of Widgets that the user has in their account. We fetch them all in one go and each JSON object of a widget returns a unique id for that widget. There are routes that require all widgets and some that focus on a single Widget by ID in that list. Ex. [ { "widgetId": "1", ... }, { "widgetId": "2", ... }] etc ...
rare-sapphire
rare-sapphire12/28/2023

Only throw error if there is no data in the cache

Hi everyone, I'm configuring react-query with throwOnError option set to true but I only want the error to be throw when there's no data in the cache. Is there any way to achieve that with react-query ?
stormy-gold
stormy-gold12/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. ...