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

stormy-gold

5/9/2024

Percentage of Completion of React Query.

As title says, i need to return from this hook import { useQuery } from "@tanstack/react-query"; import { CustomerAPI } from "../../../api/CustomerAPI"; import { AuthProvider } from "../../../interfaces/auth/AuthProvider";...

vicious-gold

5/8/2024

query when filters change, but keep the current results until new data is loaded

const { isLoading, error, data: cars} = useQuery({ queryKey: ['jobs', JSON.stringify(filters)], queryFn: () => fetchCars(), }) ...

helpful-purple

5/8/2024

How to 'select' data from the cache? (read-only in a reactive way)

Hello, I am using react query as my state manager. I have one query that fetches the entire user's state from the server (includes things like preferences and user generated content like cards, lists, spaces etc...). In my app, I have many different components that need to be wired up to different pieces of data fetched from that one query. So my setup is: - have one useQuery call sit at the top of the component hierarchy. This query is responsible for fetching the data (enabled is true). - have multiple useQuery calls with { enabled: false } in child nodes so we can read only from the cache and not trigger any refetches....

foreign-sapphire

5/8/2024

Reset gcTime

I have a query that is only used for periodic mutations (essentially to keep a session alive). However, the query eventually gets garbage collected. Without setting gcTime to something too long or to infinity, is there a way I can reset gcTime during onSucess of my mutation? The useQueryClient hook is called by the onSucces handler. Thanks!

absent-sapphire

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

absent-sapphire

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

stormy-gold

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

distinguished-blush

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?

foreign-sapphire

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

plain-purple

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

foreign-sapphire

5/7/2024

Query invalidation

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

fascinating-indigo

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

eastern-cyan

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

national-gold

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

frail-apricot

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?

correct-apricot

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

afraid-scarlet

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

fair-rose

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

grumpy-cyan

5/5/2024

How to refetch if queryKey is unchanged

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

sensitive-blue

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

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