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

conscious-sapphire

10/8/2023

Reusing queries and queryKey variable evaluation

If I include a variable in a query (like the column id for a table) and the components are generated dynamically like so ```js const checkNumber = useQuery({ queryKey: ['column', { type: 'exists' }, columnId],...

ratty-blush

10/6/2023

useQuery triggers before calling it?

Hi again, so I have a login function that takes some credentials and then passes it to a login mutation that send it to a "/login" endpoint, after that I extracted the "isLoading" property from the mutation and I use it for the query that gets the user, the thing is I want to make the query enabled only when that property is true. => Here is that line of code: enabled: !isLoading But the query seems to trigger first thing when I get into the page, I tried making all the refetch properties to false like "refetchOnWindowFocus", "retry", "refretchInterval" and so on but it doesn't work. Any tips guys 🙏...

eastern-cyan

10/6/2023

Data refresh don't trigger useEffect

Can someone please explain why in below example when I invalidate or call refetch, It calls the API but don't trigger the useEffect on line 112. https://codesandbox.io/s/epic-bird-dr9sw2?file=/src/index.js...

conscious-sapphire

10/5/2023

useQueries dependency on previous useQuery not working correctly (scoping issue)?

I have followed the documentation (https://tanstack.com/query/v4/docs/react/guides/dependent-queries#usequeries-dependent-query) exactly as far as I can tell and yet the dependent query never fires even after the data is available as shown by console.log. What am I missing here? ```jsx const { data: clips, isLoading: clipsLoading, isError: clipsError, error: clipErrorDetail } = useQuery({ queryKey: ['getClips', item.nodeId],...

national-gold

10/4/2023

Best way to query "sub-queries"

I'm attempting to query more data for each item in the "parent" query and have something like this: ```ts const { data, status } = useQuery(['foobars', id], async () => { const foobars = await foobars.query({ id }) ...

other-emerald

10/4/2023

Old Value is rendered for a split second after mutation

I am switching an application from SWR to react-query and stumbled over this issue. When I try to implement optimistic updates, the old value is still rendered for a split second before the new value appears. I did not encounter this issue in equivalent SWR code. I have reproduced the issue in a minimal Codesandbox: https://codesandbox.io/s/distracted-cohen-nm8m4k It is not easy to spot the issue in such a minimal example as it renders very quickly, which is why also added timestamped console.logs. It becomes quite noticeable in a real-world example....

ratty-blush

10/4/2023

useInfiniteQuery fetch multiple pages at once

Hey! I'm currently working on a virtualized list which loads the data lazily. Now, the pagination/lazy loading is straight forward with useInfiniteQuery's API, however I'd also like to be able to jump to an item which isn't necessarily present on the client yet. I've got a solution working, which uses useEffect and calls fetchNextPage as long as needed to reach a page with the wanted data in it. This obviously results in multiple requests and a 'rendering-cycle' like Request page => render => check if more pages needed => request page => render => check.... UX isn't really that nice, since its not a single request and render, but multiple request with multiple re-renders, resulting in the scroll bar jumping a lot. Obviously this also takes longer than having a single request. ...

passive-yellow

10/4/2023

useErrorBoundary is not being caught by ErrorBoundary

I've got a useGetCourse hook like so ```ts const useGetCourses = () => { const getCourses = async (): Promise<Page> => { const response = await axiosClient.get(...

fair-rose

10/3/2023

Failed to execute 'put' on 'IDBObjectStore'

After moving the react-query state to be persistent in the indexedDB, but using the example present in the documentation, I am facing some serialisation errors, namely for infinity queries, where the fetch ``` const refetchNewEvents = useCallback( () => refetch({ refetchPage: (_, index) => index === 0 }), [refetch]...

fascinating-indigo

10/3/2023

Using UseQuery with query params does not get new data after refetch

Hey friends after countless of debugging, I found that I'm not getting new data from the useQuery hook with query params with using Axios for the api fetching Here's currently the implementation ```jsx...

eastern-cyan

10/3/2023

Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one

```export default function MainLayout({ children }: { children: React.ReactNode }) { const { state, send } = useAuth(); useEffect(() => { console.log(state.context);...

inland-turquoise

10/3/2023

useQueries onSuccess callback

I'm trying to follow tkdodo.eu blog post regarding callbacks, but I can't think of it on how to use it on useQueries. Is it possible to use this on useQueries?

fair-rose

10/2/2023

Dependent mutations with queryClient.setMutationDefaults

I want to give offline support for a given feature that I had on my application. That feature is a simple for lm that allows to fill a title and N images. Both are made with different requests which the last uses the former result ID. To give offline support to this feature, we would need to move the callbacks as queryClient.setMutationDefaults for the fact that can be resumed even if the mutation is not mount. To accomplish that, how can I have two queryClient.setMutationDefaults which one depends on the result of the other?...

conscious-sapphire

10/1/2023

Encapsulating queries

If I have several API calls that need to be manipulated and correlated with other API calls before the data is used in my component: is it acceptable/idiomatic to run a query against a promise that encapsulates all of those API calls, or is it preferred to handle each async function within the larger function separately?

rare-sapphire

9/30/2023

component with query and table gets stuck indefinitely

I have the following code: ```tsx "use client" export default function TimesheetTable() { const [selectedWeek, setSelectedWeek] = useState<number>(0);...

exotic-emerald

9/29/2023

Testing useQuery by mocking it's callback

Hello 👋 I want to test my component by mocking the callback used by useQuery To do so I use Jest's spyOn function, which should spy on the named exported function and should use the mocked implementation if given....

frail-apricot

9/29/2023

how to lazy query? is ok use mutation for it?

since we dont have lazy query what is the recommended way to do it? use mutation is fine to it? doesnt seems right but why tf we dont have lazyquery...

correct-apricot

9/29/2023

How to preserve Error UI while a refetch is in progress?

If i place my refetch button in the Error UI, how do i preserve the error UI, since as soon as my fetch is in progress, the error state is reset to null Also, is there a way to trigger globalLoaderChange only once, when the user first comes on the page, thereafter only the error ui provides the loading state. I tried playing around with failureCount, but was not successful. ...

wise-white

9/29/2023

Is there a way to use useMutation with debounce?

Hi, I'm trying to prevent user from spamming with likes, is there a way to show optimistic updates without actually sending the mutation request? Thanks 🙂...

unwilling-turquoise

9/29/2023

how to invalidate data through mutation key?

Hi m fetching a data through post request so whenever user will upload new document below table i want to refresh how to do?? Anyone kindly guide

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