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

11/8/2024

Using queryClient.fetchQuery in the loader of a TanStack route does not activate the query.

In my _layout route, I do the following to fetch data. Then I access this data through useLoaderData hook. This all works great. However, when I check the query in the devTools, I see that it appears as inactive. I use the devTools especially to test the loading and error states, but this does not work for an inactive query. Is there a way to activate it when using queryClient.fetchQuery and also be able to trigger the pendingComponent when I manually do Trigger Loading in the devTools? ...

fair-rose

11/7/2024

Is updating mutation state a good idea?

I am building a offline first react native app. I have a form that user submits. But app allows user to edit this data many times. This is needed when working in basement where there's no internet. I am thinking of mutating the mutation state each time user edits the data. Also, is it good idea to list items from mutation cache instead of performing optimistic updates? Optimistic updates will be lost if user refetches a query....

absent-sapphire

11/7/2024

How to disable retries when network request is cancelled?

I have a situation where I need to imperatively call queryClient.fetchQuery() to fetch data. Sometimes the network request from this query get cancelled by Chrome where the network status is "(canceled)" (see image). Is there a way to disable retries when this happens? Thank you!

sensitive-blue

11/5/2024

setQueriesData doesn't match query

Hello people, So uh I wanted to have multi-sorting in a table and the order of the sorting keys is important for my api so I pretty much stole your function and did something like this: ```ts...

correct-apricot

11/4/2024

queryClient and useQuery data is not the same(same query key)?

Hello, I recently started experiencing issues when trying to update my query data using setQueryData and noticed that it wasn't being updated correctly. Then i tried to log the same data from queryclient and usequery and it turns out that there is a mismatch. ```...

exotic-emerald

11/4/2024

using return value of useQuery as a queryKey

```ts export const useGetCurrentUser = () => { const { data } = useQuery({ queryFn: () => query(), queryKey: ['current_user', 'user', data.id],...

correct-apricot

11/3/2024

Tanstack query + React hook form

Hi! I have a question about managing form state with React Hook Form (RHF) alongside Tanstack Query's optimistic updates. My use case: - I have a nested form with modules (each module has roles, each role has tasks) - Each CRUD operation (create/update/delete module, role, task) is an immediate API request...

adverse-sapphire

11/3/2024

Error Handling with React Query

Wanted to ask something about error handling using React Query. Novice question but wanted to understand the inner working + if I am going right about this. All the examples I have seen of it being used are something along the lines of ```ts const { data, isError } = useQuery({...

ambitious-aqua

11/3/2024

new QueryClient throws error on NextJS with dynamicIO enabled.

When using react-query with nextjs@15.0.3-canary.4 with dynamicIO enabled I get the following error when trying to create a query client.

``
Error: Route "/" used

Date.now() instead of using performance or without explicitly calling await connection()` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time at io (node_modules/next/src/server/node-environment-extensions/utils.tsx:33:31)...

genetic-orange

11/2/2024

How to pass timeout option to useQuery using fetch from context signal in the below code.

 const query = useQuery({queryKey: [key], queryFn: ({signal}) => fetch(url, {signal})})

 const query = useQuery({queryKey: [key], queryFn: ({signal}) => fetch(url, {signal})})

xenial-black

11/2/2024

Throw only specific errors

Hey I was wondering how I can throw only specific errors. Some errors I receive from my API I have setup to spawn a toast with an error message using global onError hanfdlers, but I want the other errors to be thrown so they can be caught by the error boundary. The issue is that if I enable the throwOnError it will also throw the errors that I have setup a toast for. Inside the error handlers I have set them up to throw the errors that arent put in a toast, but they dont get thrown when I have t...

wise-white

11/2/2024

Issue in understanding one of the examples in tanstack/query (playground example)

Hi all, I was playing with the example in the docs https://tanstack.com/query/latest/docs/framework/react/examples/playground we are setting gcTime explicitly in the ``` React.useEffect(() => { queryClient.setDefaultOptions({...

stormy-gold

10/31/2024

useEffect not triggered when data change

I have this : ```tsx const { data: playlistItems } = usePlaylistItems(playlist?.id); const { data: isAllowedToEdit } = usePlaylistIsAllowedToEdit(playlist?.id); console.log('in table playlist items', playlistItems);...

stormy-gold

10/31/2024

How add sub key on query

Okay I have this query : ```tsx const { data: playlist, refetch,...

adverse-sapphire

10/30/2024

Re-render 1 component but not another via the same queryKey?

I read that you can use select to subscribe to a sub-set of data, i.e I am assuming that when another component invokes invalidateQueries for the same queryKey, it shouldn't re-render the other component if the select returns a sub-set of data that did not change?

compatible-crimson

10/29/2024

Sporadic network errors

Hey, we're using React Query v4.36.1, sometimes, when disconnecting and reconnecting to the internet or going back to our app's tab after a few hours of not using it we get network errors from requests. our settings configuration is:...

constant-blue

10/27/2024

useQueries({ combine: ... }) vs useMemo

Is there any advantage to using combine in useQueries vs taking all the query results and passing into useMemo to "reduce" results down? Seems like since we lose the nuance of each query in combine, we'd get the ~same effect with a useMemo...

absent-sapphire

10/25/2024

Is it possible to set default queryKey for all queries?

Hello) Has anyone ever needed to set a default queryKey that applies to all queries? In my project, I send the user's language with most queries to receive translations based on it. I want to refetch the query whenever the user changes the app language. Of course, I could add the language as a queryKey for each individual query, but is there a way to set this as a default for all queries?...

correct-apricot

10/24/2024

How to properly filter data in tanstack table?

``` const orders = useGetManagerOrders( { page: pagination.pageIndex + 1, per_page: perPage,...

absent-sapphire

10/23/2024

Persisting mutations for offline

As far as I understand it RQ supports offline in that it can paused mutations while you're offline and then resume them again. However, what if we want offline to support e.g. the app being closed and thus requiring persisting the mutations (e.g. the variables/context) that got passed to them. Is there an established pattern here?

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