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

correct-apricot

8/13/2024

multiple toast messages

Hello, anyone can review this code, and tell me why the toast.success is being rendered 4-5 times? As you can see I am using query ```javascript const Success: React.FC = () => {...

other-emerald

8/13/2024

Global error handler for mutations and meta

Hello ! I would like to know what is the best way of passing down data to a global handler ? I checked meta and it seems almost too simple, it is better to use it or instead leverage the onMutate to provide context ? With onMutate, if you want to use the context in the onError handler, it is harder to use it with typescript than meta because of the unknown type...

grumpy-cyan

8/13/2024

What are the correct types for UseQueryOptions that will make select infer correctly?

Trying to make this work without using partial , else select will emit TS error if returned data is mutated and doesnt equal the exact type. ```js export const getProjectsQuery = <TData = { projects: Array<Project> }>( options?: Omit<UseQueryOptions<TData>, "queryKey" | "queryFn">,...

secure-lavender

8/12/2024

LocalStorage is being cleared when I go offline and refresh the browser

This is my setup of PersistQueryClient. Everytime I go offline and refresh the page the data disappeared. ``` persistQueryClient({ queryClient,...

extended-salmon

8/11/2024

NextJS, SSR Prefetch/Hydration not working

I am having a problem where prefetch/hydration does not work. I am prefetching the query on the Server (api call. If I log the resolved data on the server I can see it is there). Then I call the same query in a client component and isLoading is first set to true with no data. Indicating the cache was empty...

helpful-purple

8/11/2024

Is there a way to use a promise for the initial data?

Is there a way to use a promise for the initial data? Thank you!...

like-gold

8/11/2024

refetching isnt working

```ts const userHoldings = useQuery({ queryKey: ['userHoldings', searchParams.get('selected')], queryFn: () => getUserHoldings(searchParams.get('selected') as string), })...

rare-sapphire

8/9/2024

Declare type of useQuery with initialData

Hello! I have a custom hook that is defined as follow: ```typescript...

evident-indigo

8/9/2024

useSuspenseQuery with Next.js app router

I've read through the docs, and I have a grid of project objects that uses the app router prefetching with streaming technique successfully: ``` const ProjectGrid: React.FC<ProjectGridProps> = ({ allProjectsPromise }) => { ...

extended-salmon

8/9/2024

Throw Error in Selector

I'm applying parser in my select function, bascially to ensure I have the correct data types from the server and transform the API response into an object that the type is defined by me. I'm using zod to catch the errors and the parser function does throw error. Now, I would like to tell react query that there's something wrong when doing data transformation in select function. But it does nothing. How to let react query knows that something wrong is happening?...

frail-apricot

8/9/2024

Is there a way to use interceptors in tanstack query ?

A few days ago i learn how to use interceptors.request/response with axios and know i am curious if tanstack i can do the same JUst a bit of code about how i do it: ```import axios, { AxiosError, AxiosInstance } from "axios" _axiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_URL,...

typical-coral

8/8/2024

State syncing with local state - is there a better way?

So I was reading this article from TkDodo where he basically says that state syncing is to be avoided if at all possible https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose . So I'm wondering the best way to handle this situation. I have a useQuery that gets a list of quotes that each have a quote ID. The quotes are displayed in a table with a checkbox next to each quote. Now I have a local state for checkedQuoteIDs to keep track of which ones are checked. I want them all to be checked by default to begin with. Here is my useQuery and state: ```js...

evident-indigo

8/8/2024

Why do I need to use `lastValueFrom` to convert Observable to Promise in TanStack Angular Query?*

I'm using TanStack Query in an Angular project, and I need to use lastValueFrom to convert an Observable to a Promise in the query function. Here's an example of my code: ```typescript import { of, lastValueFrom } from 'rxjs'; ......

wise-white

8/8/2024

Invalidate query and wait for it to repopulate and then run a function

So as the title says, I want to invalidate the query and in the same scope ideally I would like to know when it gets populated back so I can run a function when that is finished. Another option I have in mind is to manually update the query data using a mutation and run my function in the success callback...

harsh-harlequin

8/8/2024

react-query + react + astro + ssr

Hello guys, I'll be trying to integrate react-query with Astro and React using SSR. Is this possible? I've been doing dome research but I couldn't find any repo/blog about this. Have you guys faced any issues with this?

national-gold

8/8/2024

UseInfiniteQuery with a function that takes other parameters as well.

So i am trying to use useInfiniteQuery with a fetcher function that takes in some other parameters like search value and pageSize , and i am ending up using a ugly version of code which is the only thing typescript accepts. all other ways typescript is throwing errors. cannot get my way around it. if someone can show a better way to write this that will not cause a typescript error it would be really helpful. Attaching the code for the hook as well as the fetcher function. Please do let me noe if there are grave errors if any. I have tried ai tools/google but no luck. what irritates me the most is the way the query function is defined here , this is the only way that typescript is not giving errors. i noe there has to be a better way....

typical-coral

8/7/2024

how to refetch with a passed in variable, state is behind

I'm strugging with the best way to handle this. I have a button in my web app that generates an Excel spreadsheet in the backend and sends it to the browser as a download. When the button is clicked, it passes an id to a function so it knows which list to go create a spreadsheet of. I am saving that id into state, but that is not working because of how state works and it is always behind by a click. The function that runs on the click is this one: ```js const createXLSXFromPriceList = (id: string) => { console.log({id});...

xenial-black

8/7/2024

query data type is (Type | undefined) after `isError` check

``ts
const getVisitById = async (id: number): Promise<VisitResponse> => {
  return await GET(

/visits/${id}`); }; ...

mute-gold

8/6/2024

Redux-Saga takeLatest equivalent in react-query land

this is a screenshot from redux saga using takeLatest. really good for picking the latest of multiple queries or requests fired rapidly ( think of adding items to a shopping cart). I wanna know if there's something like this if I'm using only react query in my project

optimistic-gold

8/6/2024

How to do dependent queries in svelte?

I can figure it out for the life of me 😦 best solution I have found is something like this: ```ts...

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