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

flat-fuchsia

7/11/2023

Is there a way to set a types for queryClient without casting everytime?

Hello, I have a custom useQuery hook: ``` export function useGetChannels(userId: string | undefined) { return useQuery({ queryKey: ["channels"],...

fair-rose

7/11/2023

How to prevent a no data issue on further query if I unmount a component that is fetching data?

https://codesandbox.io/p/sandbox/confident-banzai-kjyrcn?file=%2Fsrc%2FApp.tsx%3A27%2C19

flat-fuchsia

7/10/2023

Quick question, can I use react-query to not only load data, but to manage state instead of redux?

I am trying to manage users channellist where I will be fetching and constantly updating the channel state such as what was the last message, read receipts etc. it will be updated in realtime, so whenever I receive a new notification, I would use queryclient to set the data with the new payload. Is this common use case?...

eastern-cyan

7/10/2023

invalidateQuery - Error: Not implemented

I'm running a nextjs app and trying to invalidate a prefetched query after a mutation but am getting Error: Not implemented. in the code terminal. I have the query client set up, etc. Any ideas on how to fix this?

stormy-gold

7/10/2023

Custom hook typing overload

Hello ! I am trying to implement the great example of tkdodo for react-router/react-query but unlike him here : https://tkdodo.eu/blog/react-query-meets-react-router#:~:text=the%20loader%20function%3A-,initial%2Ddata,-Copy , I want to use my custom hook. Since then, I have the ts error : charactersQuyery.data is possibly "undefined". I guess I have to implement some overload for my custom hook but I don't know how to write that down. Here is my implementation, can someone help me on that please. Thx Characters.tsx ```tsx...

fair-rose

7/10/2023

Bug? Unable to narrow the discriminated union type for vue-query

Failed to narrow the data type from a discriminated union when using vue-query A minimal example below ```vue <script setup lang="ts">...

wise-white

7/9/2023

How do I handle errors locally?

How do I handle errors locally? I am looking here. https://tkdodo.eu/blog/react-query-error-handling I have my query setup with this

useErrorBoundary: (error) => error.response?.status >= 500,

useErrorBoundary: (error) => error.response?.status >= 500,

...

conscious-sapphire

7/9/2023

How to tie a list of IDs with fetched data

Hi so on my app on the home page I want the user to see some status of a bunch of IDs they have subscribed/saved

xenophobic-harlequin

7/8/2023

React router and queryClient.fetchQuery() inside loader make useQuery() to only return 'success'

React router useQuery() is only returning status 'success' when we call queryClient.fetchQuery() inside the loader, when it should be returning 'loading' or 'success', link to codesandbox.io, check src/routes/contact.jsx: https://codesandbox.io/p/sandbox/dark-http-q2zkgk?embed=1&file=%2Fsrc%2Froutes%2Fcontact.jsx%3A24%2C12

continuing-cyan

7/7/2023

useInfiniteQuery with RSCs

I'm using the useInfiniteQuery hook with Next 13, inside of the app directory. An RSC loads the initial data, which then gets put into initialData in the useInfiniteQuery hook. This works perfectly. The rub is, on the page, the user can modify filters, which causes the querystring to change, and the RSC to reload data, and send down the updated data....

frail-apricot

7/7/2023

React Query Persist Question

I am looking into using Persisters for a project & feel like I have set everything up correctly between documentation & watching videos. I however am getting "Cannot read properties of undefined (reading 'restoreClient')" & "Cannot read properties of undefined (reading 'removeClient')" errors whenever I try to run the project. I've recreated the issue in a sandbox: https://codesandbox.io/p/sandbox/brave-voice-x8z6m8?embed=1&file=%2Fsrc%2Findex.jsx Any advice is appreciated!...

firm-tan

7/7/2023

How to mock refetch in jest with typescript

Hello! I have a custom hook that calls useQuery and exports its refetch property. How could I mock this in jest? its definition is <TPageData>(options?: RefetchOptions & RefetchQueryFilters<TPageData>) => Promise<QueryObserverResult<TData, TError>> , which means the return type itself has a refetch so not sure how to handle the recursion.

noble-gold

7/7/2023

What are the current options for type-safe codegen based on openApi spec?

Im currently setting up https://orval.dev/ but I haven't found very many alternatives that spit out hooks.

xenophobic-harlequin

7/6/2023

How to use next.js router.push() properly with an useQuery custom hook call?

Hi all, I am wondering what is the best way to redirect to another page when calling a custom hook that uses useQuery. Specifically, on the dashboard page of an app I am calling useCognitoUser to check if there is a current user logged in. If a user is not logged in an error will be returned from the fetch and I want to route the user to the login page. See custom hook below. export function useCognitoUser({ onSuccess, onError,...

magic-beige

7/6/2023

useInfiniteQuery - Resets data on change to input value.

Hello! Before getting deep into it, I should mention I am using the TRPC implementation of react-query, matched I believe https://trpc.io/docs/client/react/useInfiniteQuery. I am also a noob, but very willing to learn! I am attempting to load 3 of a specific input, then query for an additional 3 of a similiar (but not the same) of another input. ...

vicious-gold

7/6/2023

How to implement react-query in this use-case? And how to transition from Zustand to React Query?

Hey folks, so i'm working on a web application. It is an online editor, for planning templates to use in a digital audio workstation (DAW). by making a list of tracks and giving each track a name and other properties. I'm struggling with how to handle state. Until now i handled everything locally in a zustand store, with actions for adding/deleting and changing tracks. But of course i want a user to be able to save templates they are working on. It is expected today that apps like these auto-save, so I think auto-saving using debouncing would be best (to reduce db requests). ...

quickest-silver

7/6/2023

How can i re run a mutation using it's key?

Like in the title

flat-fuchsia

7/5/2023

Best way to have an inactivity timer in react-query?

Essentially, if a user is inactive for 30 minutes we want to prompt them to remain active or automatically log them out. My question is what's the best approach to restart a countdown timer when query/mutations happen? - My own QueryCache/MutationCache with onSuccess calling to a provider/store? - Subscribe within my component using mutationCache/queryCache.subscribe? - Something else?...

noble-gold

7/5/2023

Can I call cancelQueries from any queryClient instance?

I don't know how Tanstack Query works deep-down and I have a lot of custom hooks to handle queries. The design of the application I am working on have minimal buttons for a lot of different behavior accross the app and I was wondering If I have to use the queryClient instance from a custom hook to cancel a query or can I create an instance when I need to and passing the appropriate key to cancel my query?

xenial-black

7/5/2023

How to clear cached data (security standpoint)

We have a multi-stage data loading partially subscriptions from the server. A typical flow - 1) Get the uid from out auth library ex. "someUid" - 2) Based on the auth we subscribe for the group ids the user is added to ex. ["aaaAAA", "bbbBBB", "cccCCC"] - 3) Based on each of the group ids we subscribe for group info. in our case it's 3 separate subscriptions. xx. "aaaAAA" -> { "name": "A team"}, bbbBBB -> { "name": "Betas" }, cccCCC -> { "name": "Crips" }...

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