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
Notification for slow queries and retries
Is there a smart and stable way to globally show a notification/toast while there are slow queries taking place or failing queries are retrying?
We're using
react-toastify, and actually showing and hiding a toast is not an issue, but very unsure where would be the best to hook into react-query so that the notification shows and hides properly (with no duplicates if there are multiple slow/retrying queries happening at the same time)....UseQuery return type set to any after typescript-eslint update
Hi !
I have a simple useQuery hook that receive for queryFn a typed function, after updating typescript-eslint the return value of the hook is now set to any.
Is there a solution for this ? 😢...
How do you define your custom hook?
Title might be misleading because I know how to make a custom hook. What I wonder is if there is some better way to do it? What are yours "go to" custom hook implementation? How do you add more options to it as a argument?
Difference between infinite query and use-query
Hello all, I am wondering if someone could help me out, I am having a weird issue with infinite query
- The first one would be as you can see when i switch pages(URL) it seems like the infinite query still runs because it returns data, and it shouldn't it should only log on the page where it was used
- also if you see the network tab it seems to refetch more than it should on mount and window foucs now when i play with the setting like setting
``` useInfiniteQuery({ queryKey: ['KEY_DEMOOOOOOOOO'],...
refetchOnMount as false, it does not fetch but should not be the correct behavior if i am changing to the tab it should run``` useInfiniteQuery({ queryKey: ['KEY_DEMOOOOOOOOO'],...
Running two version of react-query in the same codebase
Hi everyone,
I am planning to migrate
react-query@3 to @tanstack/react-query@5 in a big codebase.
I wanted to know if I could run both versions, to achieve a smooth & iterative migration. ...Handling POST Requests for Data Retrieval & Caching
Hey everyone,
All API calls in our system use POST, even for retrieving data. Since POST requests don’t get cached at the network level in the browser (unlike GET), this is causing some inefficiencies.
I’m trying to figure out the best way to handle this because:...
Query & Mutation Error Handling with Notifications/Toasts
Hi all.
I've been away from Tanstack Query ( read - last used v4 ) and I'm just looking to handle errors the best recommended way.
I'm reading up on throwing up notifications. ( MUI Toolpads Notification API ) is being used as the display API on the client and I've got to use translated errors ( i18n )....
React Query with dnd
Hello. I’m building a Kanban board with drag-and-drop functionality using react-query and @hello-pangea/dnd (formerly react-beautiful-dnd).
The Kanban data is directly displayed from the data managed by a query, and I’ve implemented optimistic updates using onMutate and setQueryData as shown in the code below.
The problem is that when I change the order of the Kanban data via drag-and-drop, the data briefly shows the state before the change and then updates to the new order, causing a flicker in the component.
This momentary flicker negatively affects the user experience.
...
How to fix the bug
Hello, I have a bug in this code and I don't know how to fix it: https://codesandbox.io/p/sandbox/cz9y49 in the file use-project-pagination. The error message is at the end of the file use-project-pagination. Could you please provide additional details regarding the error message so I can help resolve the issue?
Initial Data as Cache
I want to use react query as a offline backup cache. However I want to save a whole database table. Would it make sense to fetch all data like with pagination)
api/ratings
and then manually add all the routes like ...react compiler makes it so that when a component's query refetches because of invalidation...
the component itself does not rerender because it's memo'd. anyone know how to fix that
Cache as Backup but cache is never used
I wanted to use React Query to:
1) Cache data so it gets only retrieved from the backend every 5 min and no requests are wasted
2) Use Cached data if the internet connection is lost
This is how I setup my client:...
If I set the queryFn to skipToken, can I omit the queryKey?
In the docs example:
```tsx
const { data } = useQuery({
queryKey: ['todos', filter],...
How to set concurrency limit? i.e. prevent query from firing in parallel
the setup here is that the queryFn makes a fetch request whenever the user makes an edit
but i don't want to make multiple fetch requests at the same time while the user is editing
but instead to use the latest edit state whenever the query is not already working...
Auto-refresh select function when Zustand state changes
Hello! I need help with an issue I'm facing when using TanStack Query with Zustand.
Current Situation
I'm fetching data with TanStack Query and then filtering it based on a state managed by Zustand. My selector function directly accesses the Zustand store internally:...
Busting Persisted Cache
Hey all!
I'm wondering what the recommended way of implementing cache busting with a sync storage persister is? I can see in the docs that I'm supposed to specify a
buster value, but I'm not necessarily sure what that should be for my use case
This is for a React Native app that should provide hybrid functionality (i.e., works with or without network connectivity), so I'd like to cache data as it comes in. As new data comes in, however, I would like to bust the previously stored data in order to keep the cache size down....Setting cache data to undefined on error in useQuery
Hello,
Is it possible to set query data in cache to undefined using useQuery if error is thrown by queryFn?
Current behavior - previous data in cache is returned on error. I know I can leverage this by simply adding catch block in my queryFn and return null but then error is not received by useQuery will show isError status as false. Also I can check for isError while rendering and replace data with undefined, but for simplicity I just want to always have returned undefined and query data reset in cache to undefined on error. Is there any option in useQuery to do that or I should stick with UI rendering depending on isError status?...
React Query Invalidation Not Working Until Browser DevTools Are Opened
Hello everyone,
I am facing an issue with React Query (
Setup: Query Client wrapped around the entire App. ...
I am facing an issue with React Query (
@tanstack/react-query v5.69.0) where query invalidation does not work for any query key until I open the browser DevTools.Setup: Query Client wrapped around the entire App. ...
unwanted invalidations despite set query key
Hello everyone,
I am currently struggeling with understanding why cache invalidations happen.
react-query v5.55
Setup: Query Client wrapped around entire App....
"live" time series query
I'm not currently using TanStack Query, but I would like to! and want to know if it could fit my current use case. I'll try to be as concise as possible.
I have a database table called
case_data with columns like so
```
| timestamp | case_id | data |...