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
How to do dependent queries in svelte?
I can figure it out for the life of me 😦
best solution I have found is something like this:
```ts...
How to test the queryClient?
Hey everyone. I have recently dont the react-query course on ui.dev (highly recommend it by the way and cant wait for the rest of it to come out)
Something I am wondering is how would I go about testing stuff in the queryClient. I have a hook that changes options after x time (like the usePolling hook) and in the course they have a way to test that the queryClient to check what the query options are. I am just wondienrg how might I go about doing that?...
Trigger query with react-hook-form
Hey there,
Wanted to know what is the best practice to trigger a query on react-hook-form submition ?
Should I disable the query and use the refetch function ? Or is there any other way to do ?
...
Sharing a query client between MFE's using vite
Hello I have multiple MFE's and I want the to use the same query client provider in order to perform query deduplication. How can I achieve that, can you please help me out ?
Using useQueryClient inside onSuccess
Does anyone know if we can use the useQueryClient in the onSuccess function?
The main reason is I want to use helper functions from other files.
Card.query.ts
```ts...
Invalidating query
Hi, need some help with a GET request I'm invalidating right after a PATCH, but it just happens for the first time, then I don't see it in devtools (React Query). I've tried to set
cacheTime to 0, but it doesn't work.
``ts
const endpoint = user/${userId}/account/${accountLinkId}`
const { mutateAsync: saveUserPreference } = useMutation({...Prevent server calls on loader based on client cache
I'm setting up a project with Remix and Tanstack Query. The loader is providing initial value for my view in the initial load + navigations. But between navigations, I might already have the result of that query, cached and fresh on the client and I would like to not trigger a query/fetch on the server related to the fresh queries. But since the client loader always need to call the server loader in order to get the data (I'm streaming with defer), I need a way to inform the server to skip some fetches/queries before I call it.
Any ideas how to achieve that?
My primary think was to set a cookie on client before call the server loader with info of the queries and their status....
Prefetch query status
Hello all.
I got some problem with status of prefechQuery in Nextjs 14. First i will show some code.
This SSR file "users/list/page.tsx"...
Offline capabilities
I have setup
staleTime and gcTime to an hour or so, but I want to immediately invalidate the query data and fetch once again, when the component is rendered. The behaviour should be exactly similar when you have initialDataWhy is prevData undefined in my onSuccess of my mutation?
I am finishing up functionity to insert a new price list into my database. Everything is working well, now on success I want to update the list of price lists on the page with the new price list. But for some reason, my console is saying
prevData is undefined. This isn't the first time I've used this library, so I'm baffled. Here is my full useMutation function:
```js
const {mutateAsync: insertPriceListMutation} = useMutation({
mutationFn: insertPriceList,
onSuccess: async (data) => {...Mutation problem from different files
I have these 2 different pages which have identical API endpoints. Two of the API endpoints is for users and the other once are for organisations. What the API endpoints are doing is they are toggling a user between active/inactive and they take in a query parameter of the users/organisation id.
The first page which is for a specific user(user:id) works perfectly fine but the same mutation with the changed API endpoint does not seem to be working at all. It's the exact same code but with minor tweaks.
To not paste walls of text I have added the code to some pastebin files in hopes that this is fine...
Correct way of prefetching data with NextJS App router
context: I am building a data entry app where the pages fetches the data based on the unique workspace name so say
/dashboard/workspaceName/theInternalPage. I have noticed that when navigating btn diff pages takes longer time at first when the data is not yet fetched but once it is fetched navigating btn is instant and fast.
My question is, is it a good practice if i prefetch all of my queries in the middleware using queryClient.prefetchQuery ? this will fire the request a bit earlier as middleware is first executed in nextjs.
now on the /dashboard/workspaceName/InternalPage I can still do the normal fetch but my guess is it will now look up at the cache and not wait for it to load. someone correct me on this one...Query not retrying after axios 401 error
I'm using useQuery to call an axios function to make an API call. When I load the relevant page, I can see the query making an initial attempt which results in a 401 response which axios raises as an error. (This happens because the very first call to this function doesn't yet have access to my API JWT for authentication.) The strange thing is that, after the initial 401 failure, the query does not retry (which is annoying, because it would then have access to my JWT token). Can anyone shed some...
Mutation isLoading including query invalidation?
Hey, hoping for a way to get
isLoading on a mutation to also cover the query invalidation we do on success? Without this, the UI becomes janky as the action appears to complete but refreshed data doesn't arrive until another network round trip?App-level polling with react-query
Hello,
I am dealing with asynchronous API.
In other words, I have mutation (POST/PUT) requests that will trigger async jobs in the back-end.
These job can take 10-20s to complete, and in order to keep my front-end synchronized I am doing conditional polling....
Retrieving body json when errors occur with useQuery
When my server responds with an error, it sometimes passes in an error message that is useful to the user. I want to pass that through to my React code but can't seem to do it, because I need to
throw new Error and I'm unable to call the await response.json() in this GET function or else the useQuery stops working, because it expects the promise as the return value. If I throw the error and then modify the error after the fact with the response body, my react code doesnt update. I'm in a pickle.
my fetch code:
```ts
// Dead simple GET request...Why I can't see the prefetching data info on devtools
I prefetched on root layout using prefetchQuery which wrapper the children with hydrationBoundry but I'm not seeing on devtool that the prefetch is triggered
```typescript
// layout.tsx
const queryClient = new QueryClient()
await queryClient.prefetchQuery({...
Mutation transformation best practices
Let's say I have a mutate hook that saves a message via a form.
This form has 2 fields, a text field (subject) and a textarea (message).
I need to do some transformation based on conditions prior to sending this payload....
Advanced SSR - is queryFn on the client redundant?
Hey there, I am trying to set up for my project that I have been working on ssr with
tanstack/react-query and Next.js
Looking through the documentation, I found the following resource (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr).
In my use case, I am implementing the app router, but what is confusing me is the code that is run on the client. ...Use my queryClient oustide React context
Hey there, I'm here because I'm not sure of how it would work to use my queryClient both inside & outside my react context. Let me explain:
Suppose I have this file:
```typescript
const queryClient = new QueryClient({
defaultOptions: {...