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
UseQuery not triggering a rerender
I'm facing unexpected behaviour with useQuery, if anyone could help it would greatly appreciated! issue is the query is stuck in loading
```const MyComponent = () => {
const { data, isLoading, error, isFetching } = useQueryHook();
console.log({data, isLoading, error, isFetching})...
setQueryData and getQueryData
Hi! I'm using react query v3.
What I want to do is:
- I have a list of checkboxes (which internally is a list of objects with a unique ids - let's call them entity1)
- Every time a checkbox is pressed I want to do a mutation to a completely different endpoint with some of the fields from above list to create 'entity2'
- If the mutation is successfully I call setQueryData(['entity2', variables.entity1Id], data) // by this I want to ensure that they're linekd together - so using entity1 ID as a key for entity2 values...
React query data lost after running 'navigate(...)'
I have a React web app using react-query and react router. I have a URLs that look like: '[main domain]/pricelists/active' and '[main domain]/pricelists/active/25' where the first loads a lists of price lists and the second loads the pricelists but open a sliding modal displaying the pricelist with that id.
My issue is with that second url that opens the modal. If I load that URL directly in the browser, IE typing it in and hitting enter, everything works fine. All the querydata is there and working. However, when I click on a pricelist in the table from the other URL, I am running
navigate(...); and then all querydata is lost/missing. I can see in the 'ReactQueryDevtools', that there is no data, it is completely blank. What am I doing wrong here?...Updates from a mutation in combination with a slow server
At a project I am working on, we are using the 'updates from mutation' strategy: https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses. Basically we have kind of a wizard flow (multiple steps) and on each user interaction an auto-save should happen. This is how our mutation looks like:
```
const useUpdateWizard = () => {
const queryClient = useQueryClient();...
How can I use ensureQueryData in a component? - Help please 😂
I am using
ensureQueryData like this in a custom hook:
```ts
export const useInitialDataEnsureQueryData = () => {
const [initialData, setInitialData] =
useState<FetchInitialData.Return | null>(null)...Tracking ongoing refetch attempts in useQueries' refetchInterval
Hey everyone!
I have a function inside
useQueries's refetchInterval that refetches a query up to three times based on certain conditions.
```typescript...Mutation throttling
So, I was wondering if anyone had come up with the 'best' way of throttling mutations to make sure that the API isn't being hit with constant updates. I've tried solutions in the past using Lodash 'throttle', timers etc, but thought I'd post here to see if anyone here had ideas too.
Issue with migrating from v3 to v5 related to mutations
I am trying to migrate our codebase to use v5 of react query. However, this has resulted in one issue that I am not able to debug or find any relevant material for it in the docs.
Use case - We have a button, clicking on which fires a callback. Inside this we call the
mutateAsync method returned by useMutation . Once a response is returned from it, we do some computation, and then redirect to a different route on our page using history.push where history is provided using useHistory.
Issue - This was working fine in v3. However, in v5, some additional re-renders are happening. This is causing some invalid page state to come up, which ends up causing the app to crash. Earlier, when execution reached the redirection point, it would immediately redirect to that route without delay. Now, that is not happening....Can I log errors from queries & mutations without throwing them? (struggling with error handling)
I would like to log errors that occur within queries/mutations to the developer console. I know I can set
throwOnError to true to have the errors thrown, but I've already built my app to use the error states from my queries/mutations and would rather not have to rebuild all of that. I can set a default onError function for mutations, but that doesn't exist for queries, and even then I'd need to re-implement that for any mutation that needed its own onError handler. I also tried to get fanc...How to Delay Queries Until Access Token is Available in TanStack Query?
I’m using next-auth to store accessToken in the session. When I reload the page, useSession initially has a status of loading, and the accessToken becomes available after a short delay. During this time, queries made with useQuery (from TanStack Query) are sent with an empty accessToken, resulting in 401 Unauthorized errors from the backend.
What I’ve tried so far:
Adding enabled: !!accessToken to every useQuery. This works but was rejected by my team lead....
What would be the correct way to type queryKey if input is a skipToken?
```js
export const useGetProjectQueryKey = (variables: GetProjectRequest) => [
"projects",
variables.params.pid,
];...
Does refetch() not invalidate the query?
I have this simple query which builds map of id and thing object. It calls
```...
useThings which returns array of things and it's wrapped in useMemo
I have refetch in some other component and expect this to trigger change in here but id does not update the map values.```...
How to deserialize dates with createAsyncStoragePersister?
I am using Indexed DB to persist the cache. I have an issue where
dayjs objects are stored in the cache, and when I reload the page, it breaks because those objects are returned as strings. I have been researching and found that createAsyncStoragePersister has serialize and deserialize properties to customize this. I also saw that using a library like superjson is recommended to achieve this.
However, I haven’t found any code examples showing how to implement it. Any ideas? I would appreciate a small code example on how to implement this in createAsyncStoragePersister.
This is my persister...Understanding Query Key Objects
I just started using react-query and see most examples with simple query keys containing a single value.
Let's say I have the following:
```js
type Colors = {
blue: boolean;...
Migrate from apollo graph ql query to tanstack react query
I want to use tanstack react query instead of apollo graphql query in my existing next js project
Question about ensureQueryData
I have the following beforeLoad in tanstack router
```ts
export const Route = createFileRoute("/_auth")({
beforeLoad: async ({ context, location }) => {...
Prefetching on the server correct approach
Hi, I'd like to achive behaviour like this:
1. I build my project using nextjs (static pages) and prefetch that data let's say
sponsors which should not change or change rarely only during next builds.
2. I render a component that uses useQuery and I want it to always have the data so no loading state's -> use what was prefetched on the server. Component is deep down so I don't want to pass initial data.
3. Sponsors is the same across all user requests....Working with providers?!
Hello everyone, I have a search bar with text input and there a mutation that fetch data from api. The state isPending reflect just there, but in the list isn't reflecting. Because until receive the response from the api I like to put loading text in the screen...
https://www.loom.com/share/16e106302481497fabd94369e9404495?sid=84958822-0564-4a92-870f-0f887d29d05f...
Check if queries with common query key are fetching
Hi all!
I have a paginated query, similiar as described here in the docs https://tanstack.com/query/v5/docs/framework/react/guides/paginated-queries.
In my case I also have an order criteria in my queryKey (
queryKey: ['projects', orderBy, page]). Is there any way to check and re-render if at least one query for a specific page is currently fetching? Like is "projects ordered by date" currenty (re-)fetching, no matter which page? Somehow similiar to useMutationState, but for queries?...