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
Double fetching with React Router
I am using React Router v6 with a loader function.
The loader is being called before the page loads, so initially, it runs and then displays the component/route.
However, when I try to access query data using a hook, it makes a new request. Currently, it makes a request in the loader and then again when the component mounts....
i have been watching some tutorials on useQuery and everyone seems to use `isLoading`, my issue is t
i have been watching some tutorials on useQuery and everyone seems to use
isLoading, my issue is that when a refetch happens i need to also watch for isRefetching in order for my component to update with new data (after calling invalidateQueries), am i doing something wrong ? i was thinking about using fetchStatus instead of isLoading and but i am not sure if this will lead to some useless re-renders
in some component i call queryClient.invalidateQueries(), then i go to another page (using react-router-dom HashRouter) which should update with new data, i see the api call with the fresh data
a simple code example...how to implement setQueryData ??
Hello everyone
Currently, I'm studying react-query and testing different features.
Currently I'm testing queryClient.setQueryData, and I'm getting a
I don't see that query in Devtools... Am I doing something wrong?
...
Refetch all the queries on mutation
I am wondering how should I make this work
```
const { data: employeeDetails } = api.employee.getEmployee.useQuery();
const { mutate: signOut, isSuccess } = api.user.signOut.useMutation();
const { data: offersReceived } = api.employee.getOffers.useQuery();...
polling implementation with POST and GET endpoints
If I have to call a POST to get an id, then poll with GET by passing that id once it’s retrieved , what are the pros/cons in not using a mutation for the initial POST? There is no visual representation of the id from the POST in the UI
Merge results from different keys
Hello.
I have this custom hook:
export const useTodos = (todoIds) => useQuery({ queryKey: ['todos', todoIds], queryFn: fetchTodos(todoIds) })...Optimistic updates triggered
Hello guys for react-qurey optimistic updates , i want to want to run mutation on command once I'm online not automatically , is there a way that I can do that ?
How to not show Axios errors in console?
Is it possible to not show axios errors in console while using React Query?
I have simple code:
```js
const fetchData = async () => {...
invalidate multiple queries
How would I invalidate the following sets of queries in a single invalidateQueries call?:
``` onSuccess: (_, variables) => {
queryClient.invalidateQueries([
QueryKeys.Item,
variables.itemId.toString(),...
React query prefetching does not work properly
Hey everyone,
I am prefetching data in React query on server side using getStaticProps. But even after that on frontend react query again fetches data because of which I see stale data for a second and then it updates due to fetching on frontend side. How to prevent this issue?...
React test stuck on `isLoading` condition
Here is a reproducible sandbox: https://codesandbox.io/s/strange-sound-86mc3p?file=/src/Accounts.tsx
Run the test and check the console, this is the result:
```
<body>...
background sync react query
Hi everyone. Lately I have been searching for an optimal solution regarding on having a full offline experience in a matter of having the service worker responsible to handle the background sync for the error mutations.
I have read how to use react query offline through the documentation but I would like to move some of the retry logic to the service worker by using the workbox-background-sync.
The problem with this approach is to found a correct relation between the service worker and the react query for the case when the background sync retries successfully a previous error mutation. How can I notify react query that the information that lives on cache with a pending status (for example) is now synced with the API?...
Any guidance / examples on react-query + handling live websocket events?
Hey react-query community, we're working on an application that will have a live-updating list of items.
We are currently using react-query alongside cursor-based pagination + infinite queries to fetch data.
However, we want to also integrate with websocket events (new item, delete item, modify item, etc.) so that we don't need to constantly refetch (polling).
...
Custom useQuery Typesafe
Hi guys, I have a custom hook that wraps useQuery like this:
```ts
type DataError = {
isLoading: false;...
Building JSON Objects
Hey I have some Material UI Text fields and so on and wanted to ask how I could check if one of those fields changed to show up a save button and if you press save, build a specific object and use useMutation to send this JSON object. Is there anything modern and easy to use you could suggest?
How can my query not exist in the queryClient?
Hello, I have this code:
```
const getDiary = async (userId: string | undefined | null) => {
if (!userId) return null;
let {...
OnSuccess alternative
Hello, I just stared using the react-query library (completely new to JS) and I just saw that I am using a callback which will be removed from the library. I am using the
onSuccesscallback like this:
```js
const { isLoading, mutateAsync } = useMutation({
mutationFn: CreateProduct,...One Quick Question Please.
I want to start using react-query in a big project. I am familiar with react-query v4 and did many project using it and I LOVE IT.
and yesterday I watched @TkDodo 🔮 's video on youtube on version 5 (https://youtu.be/ur_318WWswA?si=JegTZE5Kayx6Ni0c)
he is really awesome and explain in details.
...
Manipulate a query's data in Devtools
Hi,
wondering: is there a way to manipulate the cached data for a given query from inside the Devtools?
e.g. I want to check my rendering with an empty list, a single item, multiple items or any other shape or form of special returns. Currently changing my mock-server to actually return the data differently. But that needs a restart and refetch etc....
Building with Turbo/PNPM/Vite and Orval results in double context
Hi
Our dev build works fine, but our production build seems to end up with double react-query context definitions (I can confirm this looking at the resulting bundle), causing our app to fail with the infamous "No queryClient provided etc".
We have an application inside our repo at
apps/web-next and our Orval API get's generated at packages/bff-api. react-query is setup as a peer dependency inside bff-api but it is important to note: we do not actually build this bff-api package separately. It is basically just source code and our Vite build inside apps/web-next picks it up as such....