TanStack

T

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

sensitive-blue
sensitive-blue2/27/2024

"Lazy Query" dependent on an event occurrence - best approach?

Hey there. My problem is quite simple, but I struggle to find a good approach. The case looks like this:...
optimistic-gold
optimistic-gold2/27/2024

Why is my query refetching when using the same query key?

I have this setup ```tsx const dataQuery = useQuery( [...
optimistic-gold
optimistic-gold2/27/2024

What is the generic type TContext in useMutation?

I can't find anything about in the docs
optimistic-gold
optimistic-gold2/27/2024

Potential Bug: RefetchIntervall callback fn is called even when the useQuery enabled = false

`function useCheckSpotify(isCheckingSpotifyAccountConnection: boolean) { return useQuery({ queryKey: ['isSpotifyAccountConnected'], queryFn: async () => { const response = await Axios({...
No description
grumpy-cyan
grumpy-cyan2/26/2024

svelte-query re-rendering page on preload

Hi, I'm trying to use svelte-query and I have a lot of it working, but I'm seeing unwanted behaviour, and I'm not sure where the fix would be. I have a page /1 that has a link to a sub page /1/foo/a. Both pages prefetch the same query as part of the load function. When viewing the /1 page you can trigger preload of the sub page by hovering/mousedown on the link depending on svelte config. This triggers the prefetch of the query if it is stale, which then triggers a re-render of the page you are viewing, which means that you scroll to the top, which is totally confusing....
fair-rose
fair-rose2/26/2024

Invalidation triggers re-fetch but not re-render of content

I have a mutation, where in it's onSuccess callback I do a query invalidation. When the invalidation is done the following happens: 1. The query is invalidated 2. A refetch is triggered 3. No re-render is done (i.e. the data is not updated in the view)...
optimistic-gold
optimistic-gold2/26/2024

confusing return type of `select`

When I use select, I encounter type errors because the return type is identical. I am confused about why we must return the data shape if there's no need for using select! ```ts /** * This option can be used to transform or select a part of the data returned by the query function. */...
vicious-gold
vicious-gold2/26/2024

Difference isPending and the isLoading(isFetching && isPending ) in react-query @v5

Many times around my app I do something like this ```tsx const {...
afraid-scarlet
afraid-scarlet2/25/2024

calendar negative pages?

can I use this for a calendar view? planning on setting this up so that the query will get events for the current month, moving forward/backward will change the "page" number but then would it work with negative numbers if the current month is set as page 0? or is there a better way to handle this case? maybe set the current month page to be months from unix time 0, then set the default page number to that? im not sure what the best way to go around this is, and I would love some advice/feedback...
deep-jade
deep-jade2/24/2024

Is it a bad design to use Suspense and SSR together?

Firstly, I apologize for my provocative and novice question. I tried to implement with Next.js@14.1 app router, react-query@v5, and Suspense, along with virtual infinite scroll (react-virtuoso). In fact, to take advantage of SSR, I think it’s better to write as a server component and use pagination instead of infinite scroll. However, it’s hard to give up infinite scroll because it’s so good on mobile screens. So, I tried to use next.js, Suspense, and react-query together, and I wondered if it’s...
absent-sapphire
absent-sapphire2/24/2024

Strange useInfiniteQuery behavior

Hi everyone! I am experiencing strange behavior with useInfiniteQuery intermittently, with no root cause have been concluded so far (the issue has been there for a few months). Here is the error that are recorded in sentry (see attached picture). And also the code that calls useChatMessages (attached as well). I assume since in the code snippets i provide, the useChatMessages will only be enabled if the activeChat is not falsy right? Then i still don't get why it still evers throw the error that are reported in Sentry. Is it possible that there is some cases which this scenario happens? If so, how do i design the code so that it doesn't ever throw unexpected error as i provide on the Sentry log? (In short, i want to make sure that the function called inside must respect the enabled options) ...
No description
conscious-sapphire
conscious-sapphire2/23/2024

useMutation's `isPending` stays on `undefined` after calling mutate

so I have a custom useMutation hook ```js return useMutation({ mutationFn: api.Profiles.acceptFriendRequestInNotification, onSuccess: async (_data, { requestId, notificationId, metadata }) => {...
absent-sapphire
absent-sapphire2/23/2024

Why doesn't cache invalidation work during mutation?

Why doesn't cache invalidation work during mutation?
` const { data: data2, fetchNextPage, refetch,...
multiple-amethyst
multiple-amethyst2/23/2024

Save modified response in query cache (React Query v3)

I have a situation where my API response is not normalised. Which means when I fetch the data from api, I want to first filter and normalise the data which should be then stored in cache. Currently I can not have the API response modified. So that is out of question. This is one idea, i dont know if its right or not. ...
afraid-scarlet
afraid-scarlet2/22/2024

How to abort a useMutation ?

Hello, I have a use case where i have to do several mutations in a promise, but i want to cleanup the queries at unmount. Now : i am using a signal with an abortController, is there a simpler solution ? ...
notable-maroon
notable-maroon2/22/2024

is a promise returned from onError callback on a mutation awaited?

Hey all, just a quick question. I know when we do for example an onsuccess and return a promise to invalidate a given query i will be awaited. Does this also count for the onError callback? I need to do some logic whenever a mutation failes, and after that retry the mutation. ...
genetic-orange
genetic-orange2/22/2024

Only query when value is not null?

I have a function that returns a useQuery object: ```ts const getSubmissions = (currentProject) => { const endpoint = endpoints.api.submissions.index.replace(':id', currentProject);...
flat-fuchsia
flat-fuchsia2/22/2024

When to use `useQuery` vs `useSuspenseQuery` with NextJS?

I looked trough the documents trying to find some details about the differences between useQuery and useSuspenseQuery hooks, but other than the fact that the status is always success and there's no error obbject in the suspense version of the hook, I don't understand the main differences between the two. Can anyone explain to me: - Where and When do I want to use the suspense version of the hook?...
conscious-sapphire
conscious-sapphire2/22/2024

UseQueryOptions without providing a required `queryKey`

hello, is there a way to use UseQueryOptions without providing a required queryKey? im upgrading to v5 and in v4 this was never required. I am using a custom hook with react query ```js export const useCustomHook = (id: string, options?: UseQueryOptions<Group>) => { const { profile } = useAuth();...
harsh-harlequin
harsh-harlequin2/21/2024

Why is this causing an infinite render loop?

```js const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts}); const [indexOfTargetProduct, setIndex] = useState(0); useEffect(() => {...