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

optimistic-gold

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

noble-gold

2/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);...

deep-jade

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

sensitive-blue

2/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();...

quickest-silver

2/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(() => {...

stormy-gold

2/21/2024

V5: Only previous pages infinite query (chat like infinite scroll)

Hello everyone, In V4 i implemented an infinite list of messages, the previous pages were fetched when scrolling on top, like a chat app, it worked perfectly. I was using this code: (i'm using trpc but i think my issue is more tanstack query related so i post here)...

extended-salmon

2/21/2024

Vue Query not refetching when key changes?

Hello, i'm trying to get serverside sorting to work, I'm using tanstack query and table in Vue. The sorting is updated in the table, but for some reason the query isn't refetching? Parent component ``` <template>...

broad-brown

2/20/2024

Data keys sorted?

Is it possible that react query sorts the keys of the data that comes back from a query? I imagine to do some compare, but is it possible to get the presorted data? Looks like it's in the original order in the network request but not when I get it from react query

ratty-blush

2/20/2024

Best approach when there is no matching query endpoint to a mutation endpoint

I currently only have a POST endpoint for a mutation without a corresponding GET endpoint. What is the best approach if i need the data in another component after a mutation? 1. Put data in client state manager, e.g. put data in a zustand store in onSuccess callback of the mutation 2. Create the GET Endpoint and use a query. 3. Use a query without queryFn and update the value through the mutation. ...

hilarious-sapphire

2/20/2024

Sveltekit - $mutation.isSuccess stays true indefinitely after submit

As the title suggests isSuccess will stay true indefinitely after a createMutation call regardless of whether I invalidate in onSuccess or onSettled callbacks. The isPending works, but I feel like it goes false before the queries are invalidated. (I could be wrong though) It might not make a difference at all, but I was just wondering if I need to do something in my createMutation call to trigger the isSuccess parameter? Thanks in advance for any help you can provide....

quickest-silver

2/20/2024

Is there a way to avoid union type with undefined for data that is returned by useQuery?

It seems that however I type the return type of queryFn or provide a generic type to useQuery, data will always be T | undefined. From the docs, I read that the value of data defaults to undefined, but I did not really understand what that means. Does it mean exactly what I am asking lol? That there will always be union with undefined?...

quickest-silver

2/19/2024

Nothing happening with query

api.js ```js import axios from 'axios'; import { sortProductByPrice } from './util'; ...

equal-aqua

2/19/2024

ReactQuery v3 to v5 InfiniteData not re-rendering after setQueryData

Hello Guys! I've upgraded from v3 to v5. I had an infinite list of decks. When I add a Deck to server then I read the whole InifniteData and I push the new item to the first index of first page. I see the new data in DevTool but re-render is missing. What's wrong? I don't find anything about changes. I'm sure Im miss something. Code: ...

harsh-harlequin

2/19/2024

My buttons lose focus when my `isLoading` state changes

I'm doing a little dummy project, and using react-query for the first time. Perhaps this isn't an issue of react-query at all, but I can't imagine what else it might be either. I have this component: https://github.com/cssinate/sortable-table/blob/main/src/components/SortableTable/SortableTable.tsx You can see from https://github.com/cssinate/sortable-table/blob/main/src/App.tsx that isSearching is just isLoading coming from react-query....

ambitious-aqua

2/19/2024

Storing class instance in cache

Hey, I want to use value object pattern, implementation is done through class, is there any risk when storing class instance in react-query cache? I tested it and works fine but still want to double check with you.

noble-gold

2/19/2024

Unnecessary requests being made

I have a dashboard with view A & view B. View A uses a select list component to display my projects. View B uses the same select list component, as well as a table component to display the projects. ...

sunny-green

2/19/2024

Query Prefetch strips off local storage theme

Hello. I've launched my site to production and noticed a bug where I use prefetchQuery and dehydrate to get live data from DB , after page refresh it removed my theme from <html lang="en" class="dark">. It's my first experience with TanStack so im not sure where exacly the issue might be. ``` export default async function Page() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({...

absent-sapphire

2/18/2024

Sharing QueryClient Across Multiple Apps

Hi folks I wanted to ask about this new experimental tool, broadcast channel to sync queryClient between multiple tabs and Apps. I have a use-case where in my page I use multiple smaller react applications and those react applications are using react-query fetching and storing a data from the same endpoint....

adverse-sapphire

2/18/2024

How to redirect after failed refresh token

I am using react-query along with axios to communicate with my API. This is the interceptor I have built, to refresh the Access Token when it expires: ```js const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_URL; ...

foreign-sapphire

2/18/2024

Best Practices for Handling Shopping Cart Data Storage in React with Local Storage and Database.

Hey everyone, I'm in the process of creating a shopping cart feature with React, React Router DOM v6, and React Query. The cart functionality is up and running smoothly. However, I'm looking for guidance on the optimal method for handling cart data storage. Initially, I'd like to allow non-authenticated users to store their cart information locally (local storage). Then, once a user is authenticated, I'd like to transition the cart data storage to a database. Any suggestions or best practices fo...

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