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
Is it expected that queries with a `gcTime` set aren't used by `react-query-persist-client?
I have a setup like this:
```typescript
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { PersistQueryClientProvider as BaseProvider } from "@tanstack/react-query-persist-client";...
Is there a way to manually set the entire cache to a new value?
I need to update a value that appears in many places so I wanted to avoid passing a
queryKey to setQueryData(). I've written a recursive function that gets the entire cache and updates every occurance of the value and returns a new array. How can I set the cache to this new array?
(If there is a better way of doing what I'm doing I'm open to suggestions)
Thanks...Querying an API for a Details screen without a "details" endpoint
I'm using React Query with an API that has an endpoint where one can get a list of Foo's, but there is no endpoint to get the details of a specific Foo. I have two screens: a List screen and a Details screen. The List screen is set up to use the
useQuery hook and call the API's list endpoint and populate the screen with an entry for each Foo. Each entry is clickable, and clicking will open the Details screen (passing in a unique Foo ID). However, that is where the data stops.
The Details screen has no way direct way to get the Details of a Foo, as there is no API endpoint for it. The best option I see is to use useQuery again, and hope it hits the cache from the List screen (the list endpoint includes all the details), instead of sending out a new request. That still feels like bad data practice, though. A second option would be to use QueryClient.setQueryData to set each individual cache for each Foo, but I feel like that may also be frowned upon from a "best practices" perspective (setting the query data outside the normal way, fetching).
What should I do in this scenario?...Using custom hooks in loader function
hi, i dont think the docs for Tanstack Router make it clear enough how to use hooks in your loader function. I understand it can be passed through context, but how will it be used? Passing the hook to the context and using it still throws the react error "hooks can only be used in components"
```ts
loader: ({ context: { useCustomHook} }) => {
console.log(useCustomHook()); // = error...
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...