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

exotic-emerald

5/8/2024

Cannot update a component (Router) while rendering a different component

Hello, it's me again. is there anyway I can avoid using useEffect for fetching data and use useQuery instead? So I created a server action that will get id from URL and then pass it as a queryFn, but then, I get this error ```...

exotic-emerald

5/8/2024

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components.

Hello, I'm having a little bit of trouble here, so I'm using nextjs 14, after adding my custom provider, I get this error ``` Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. at stringify (<anonymous>)...

conscious-sapphire

5/7/2024

refetchOnReconnect with Suspense query

Hey, guys. I'm using React Native and I have a question, not sure if it's a bug. When using useSuspenseQuery with Suspense (obviously), ErrorBoundary and QueryErrorResetBoundary, if I access a screen without internet connection, an error will be thrown since API can't be reached, but after reconnecting, the error is NOT automatically reset. That scenario would work fine with useQuery....

correct-apricot

5/7/2024

prefetchQuery vs useQuery

So I have unusual case where I’m prefetching data, then when my component calling the useQuery mounts, the most recent data gets replaced with old data. I’ve tried using different keys for the prefetch queries but I still have the same issue. Any suggestions?

ratty-blush

5/7/2024

New pattern for query factories

Hi @TkDodo 🔮, I was reading your latest article and I'm very curious about the new pattern you propose at the end of the article. I've been using react query for the past 3 years but I've never used query key factories, I'm 100% aligned with keeping the queryKey and queryFn as closed together as possible. most of my queries look like ``` useTickets = ({params, config}) => useQuery({...

correct-apricot

5/7/2024

Persistence fails after query client gets changed

In a React Native application I want to only call the API when the user is logged in. This requires me to create a query client that is enabled or disable based on the auth state. I am pretty sure this causes the PersistQueryClientProvider to not work properly since the query client changes. I only get persistence on initial app load, but when the app state changes to logged in persistence stops working. Is there a workaround for this? https://github.com/BeBoRE/ei-noah-bot/blob/c70e1ba851de5f45479d75d33177bcad8dde1286/apps/mobile/src/utils/api.tsx...

ratty-blush

5/7/2024

Query invalidation

hi, how do you recommend query invalidation for this type of query? ```ts export function getAdminStatistics() { return useQuery<AdminStatistics>({...

genetic-orange

5/7/2024

Nextjs Server Action doesnt return anything in Query!?

Hello everyone, I would like to use my nextjs server actions in Tamstack Query, but the it doesnt return anything. In thr DevTools, it writes some info about the query, but no data is getting received, from the server side function, when i try to use the Query on the client side....

rare-sapphire

5/6/2024

Can I use TanStack Query in a Node.js framework, but without a provider?

I have a project that is used by other projects. Its basically a framework for providing wrapper functionality so you can plug and play CMS, Ecommerce backends, CRMS, etc. I can definitely use TanStack Query on the front-end of those projects, as I can wrap in a ClientQueryProvider. Can I use it somehow in this framework without one?...

wise-white

5/6/2024

invalidate query if useSearchParams() is update

how to invalidate query if searchParams (from useSearchParams()) in Next.js 14 got updated? I already tried with this code but it's causing infinity loop...

conscious-sapphire

5/6/2024

How to handle offline case?

Hello, I'm implementing PWA and I need to handle case when user is offline and wants to load the page. If the page's data is not in react-query cache, I'd like to render different component and let user allow to subcribe to notification when page will be loaded (background-sync using SW). How to do this?

extended-salmon

5/6/2024

Mock useIsFetching in Jest

Hi, I know it is recommended to not mock React Query directly in your unit tests, but mock the network calls instead. This is what I do in 99% of my tests, but there are a few cases where I do mock hooks like useIsFetching and useIsMutating directly: ```typescript import * as reactQuery from '@tanstack/react-query'; ...

graceful-blue

5/5/2024

Meta Prop For Title

Does the router automatically set the document title using the Meta prop on a route? I set the title in the meta function, but it's not changing the title on the tab in the browser. This feature was mentioned here: https://github.com/TanStack/router/discussions/895#discussioncomment-9064913 But looking through the Tanstack website (the screenshot), I couldn't figure out how exactly it works. I'm using this in a SPA, but I'm not sure if that detail matters....

adverse-sapphire

5/5/2024

Why is my form keeping old values after mutation?

https://github.com/Makistos/suomisf-ui/blob/debug/src/features/work/components/work-form.tsx For some reason I need to open this form twice to show the changes I made in earlier edit. I.e. I open it, make some changes, close form and reopen -> it has the old values. I close & open once more -> now its updated. Why? I have three query keys in the page this form is part of, all have two common parts: "work" and <id> and I invalidate queries with those two parts. Main page updates when I close the form properly but the other two don't. I thought it was because main page's query is disabled while form is open but I tried to disable form's query as well when mutating and then enabling after but that did not help....

genetic-orange

5/5/2024

How to refetch if queryKey is unchanged

```ts let [foo, setFoo] = useLocalStorage('myfoo') let [result, setResult] = useLocalStorage('myresult') useQuery({...

initial-rose

5/4/2024

Strategy for preparing user data

For situations where user's data should have preallocated rows, for instance two created bank accounts with specific names, is it better to handle that on user register or provide the user checklist to complete profile/setup? User's should still be able to add other accounts too. I'm concerned if I start to have alot preallocated across different tables, managing the updates for existing user's from the backend may be a pain but does give more control over correctness of data. Does anyone have experience with something similar or suggestions?...

ambitious-aqua

5/3/2024

New mutation cancelling the previous one

I have a queue with requests it executes when it can. When I add 2 requests it seems to "cancel" the previous one; it doesn't execute its onSucces function (which is another request). What am I doing wrong? My app is basically optimistically allowing to create "scenarios" until network_ids is available, then it gets executed. my loop calling my hook to execute the mutation:...

cloudy-cyan

5/3/2024

Testing Offline React Native

How do I test offline functionality in React Native? If I go offline, I don't get console logs or debuggers anymore. On the web, I can use the devtools and there is a button to mock offline behavior, but in React Native, none of the debuggers I've tried have this option....

wise-white

5/3/2024

Using queryClient as a useCallback dependency? Possibly dangerous?

Hi all. Chasing a very frustrating bug in production. We noticed occasionally our users would submit 20k requests in under a minute, effectively DoS'ing us. We're adding throttling etc, but I want to track down WHY they are sending so many requests. We think it's due to invalidation of some query keys, causing refetches to happen. I cam across this code:...

other-emerald

5/1/2024

Initializing/synching Zustand stores with React Query

I know that we typically do not want to sync React Query data to Zustand, because React Query already does a good job of managing server state. But I was wondering if there is anything wrong with using React Query data to initialize a Zustand store if we know that we need to change the data locally before saving it back to our database. For example, I am building a bulk email tool that lets you select multiple recipients using a virtual table. An email draft may already have some recipients selected, so when the page loads I want to fetch the email and initialize a Zustand context + store using any existing contacts from the email. Once this is done, users can select/deselect contacts in the table, which Zustand manages, and if they hit Save then I use a React Query mutation to update the Email in the database. The code looks similar to this:...

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