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
What is the recommended way to trigger a GET just once on button press?
I have a GET call that I want to trigger only once when the users clicks on a button, is there a recommended way to use useQuery so I can benefit from the loading/error handling?
React - queryClient.getQueryData(key) - can I think about it as about useContext?
I have a situation where I fetch data in
<ParentComponent /> using useQuery hook. I have a lot of nested children in this component and I need to display the data on the bottom of the tree and I consider following options:
- props drilling - sounds bad as usual props drilling 🙂
- context - there are performance issues with the context without using useContextSelector and it's not compliant for some reason.
- queryClient.getQueryData as a mechanism to retrieve in the bottom of the tree or throw when undefined.
...Modifying the type of mutateAsync's
I'm doing an optimistic update when adding an entry to a table and calling
mutateAsync with partial data for that entry. However, the type for the variables of the mutateAsync function seem to be the same as each element in my useQuery result, and this gives me a type error, because I'm leaving out a bunch of fields that the database will eventually default to.
Specifically, I have this:
```ts...Project structure
Hi we are trying to migrate everything to react-query but I don't know the best folder structure to apply to it.
We handle lots of websocket events, and in a particular place we need to use setQueryData instead of invalidate, but the data will come from the websocket, fetch or mutation, do you know some good folder structure where I can implement on out project?...
useInfiniteQuery Hook
Hello Everyone, I'm using the useInfiniteQuery hook to fetch data so i can paginate, i've been able to get the
fetchNextPage working via the getNextPageParam method. I do not know how to go about the fetchPreviousPage working, i've tweaked with the getPreviousPageParam method but it doesn't still work. I'll appreciate if anyone can point out how i can fix this. Attached below is the query function:
`const {
data,
fetchNextPage,...Vue Query potential issue?
Hi guys, I'm debugging a weird issue...
I have a query with the same key that is used in two places (I have
use...() in two components).
In both components it has staleTime of 60 minutes.
When I'm loading app in Cypress tests, sometimes it fails (80% of the time).
The difference between pass and fail is that when test fails - query is called only once (as expected). And test passes when query is called twice (but only one request is actually made)....React Query with apisauce
I'm utilizing the https://github.com/infinitered/apisauce library for data requests. The challenge lies in the uniform flow of responses, whether they indicate success or failure. The promise in apisauce never utilizes rejection, which means that useQuery cannot capture it directly and isError always false. Hence, I'm wondering how I can employ useQuery to handle errors when response.ok=false.
Response JSON
```json
{...
How i can use QueryClient in server and client component?
I need to prefetch data within a server component and get this data from the cache in a client component, how would I use the same QueryClient in both?
Could I export a single
QueryClient from a separate file and import it in my components?...Angular Query
Is there any rough eta at all for when we can expect a stable release for Angular query?
Error Handling Mechanism
Hi, i have a question regarding the error handling mechanism
For the query function I provide the following arrow function:
() => axios.get('url').then(res => return res.data)...
invalidate all queries with specifix prefix
Hello. is there a way to invalidate all queries with specific query prefix?
queryClient.invalidateQueries([userId, 'requests']);
// invalidate these query keys at once...
`invalidateQueries` only triggers re-fetch once after reload but not afterwards
I have a table that shows data. There's an edit button for each row that opens a dialog where you can update the data of the respective row. This triggers a mutation that will
invalidateQueries onSuccess and the dialog will be closed.
For the first time after reloading this also re-fetches the query connected to the table after invalidation. After that, when I edit data again, nothing happens. How can that be and how to fix it?
UPDATE: The source problem (I think) is that I set the queryClient within the function body because showNotification is used with is returned from a custom hook. I would like to keep this solution but do not know how...MongoDB's Keyset Pagination technique
Hello, Is it possible to do Pagination using react tanstack query useInfiniteQuery module from MongoDB's Keyset Pagination technique ?
`setQueryData` slow to update
I have a reorderable list UI. Its data comes from a query, and I use
setQueryData to opmistically persist reordered elements, but looks like there is some kind of delay to state update and I can notice a flash of items getting back to old positions before the new order is persisted.
Is there something I can do without need to use a local useState?...setQueryData with infinite query
I am using query factory from TkDodo's blog:
```ts
export const teamQueries = {
all: () => ["teams"],
lists: () => [...teamQueries.all(), "list"],...
Mutation optimistic updated slows down the UI
I have an app in which a user can upload files and then interact with them - add to favorite, change display name, etc..
One of the functionalities is to delete a file.
I use tanstack mutation to do optimistic updates for the files deletion - all the files are inside a table.
```typescript...
how to cancel / disable previous mutation onSuccess calls?
For now the best I could come up with is this:
```typescript
...
Delay query invalidation
Is there a way to invalidate query request after successful mutation, but only after a couple of seconds? Settimeout doesn't seem to do the work, since the query gets called ~2 seconds after success no matter how high the timeout is
Also, is there a way to retry the query every X seconds but only a specific amount of times with invalidation?...
How to know HTTP status code in `onError`
onError = (error: Error) => {
}
onError = (error: Error) => {
}
Infinite query + loader
When using infinite query inside loader function of tanstack router, I see that in the RQ kitchen sink example, ensureQueryData is used, but there is no ensureInfiniteQueryData. Is the alternative to do prefetchInfiniteQuery or is there something more appropriate?