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

wee-brown

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

other-emerald

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

wise-white

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

plain-purple

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

continuing-cyan

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

wise-white

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

genetic-orange

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

wee-brown

2/19/2024

Nothing happening with query

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

deep-jade

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

conscious-sapphire

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

solid-orange

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.

plain-purple

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

harsh-harlequin

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

deep-jade

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

eager-peach

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

fascinating-indigo

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

quickest-silver

2/18/2024

Custom hooks structure

I'm trying to figure out what is a good structure to use for my api, previously a had all those mutation/query hooks in their own usePaginateApi for all my resources which resulted in a mess what usePaginateApi to import. Now I'm trying something new and was thinking about this example below, what are you thoughts? Any better idea's :-)? ```ts export const App: FunctionComponent = () => { const { useFind } = useUsersApi();...

deep-jade

2/18/2024

Can I use the Loading from app directory for the isLoading State in RQ?

```tsx 'use client'; import NavBar from "@/components/NavBar"; import Footer from "@/components/Footer";...

fascinating-indigo

2/18/2024

Maximum callstack exceeded when using `prefetchQuery` in NextJS 14

Hey there! I recently discovered this library and have been trying to swap out my generic OpenAPI client using fetch with react-query using axios. I'm in a NextJS 14 project using the app router and trying to handle SSR for initial load by following the Advanced SSR guide for the NextJS app router. I have the following code:...

sunny-green

2/17/2024

Multiple request using useMutation

Hi everyone, Let's say I have a todo list (an array of objects), and I want to send a POST request to a specific endpoint to create a new todo. The endpoint accepts an object, not an array. Currently, what I do is loop through each todo and call the function like this:...

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