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
Solid-Query getQueryState result isn't reactive
I'm calling queryClient.getQueryState(['current-user'])?.status === 'error' in a Match statement but despite the query erroring, the conditional never renders
In order to account for this I hacked it into an effect ``` let timerId: number | undefined;
createEffect(() => {
timerId = setInterval(() => {...
Retry on specific response
Hello,
How can one retry a query upon a specific successful response rather than an error ?
Cheers...
Splitting GET request for table with 20 columns into multiple GETs
The request for loading my table involves a decent amount of computation where it takes time to load. I want to make it such that the first GET request simply gets the first column (which is the name) and then all the other columns are gotten in another GET request. This would be much better UX and it is what I've liked in my own experience. Any resources on what is the best practice for such implementations? Any resources on how to handle this in react query?
Global listener if any query isRefetching.
I want to have some global boolean flag to be reactive if any query within the app is refetching. Is it possible to configure it somehow in QueryClient? How can I achieve this?
Syncing data with React Query
Hi guys, we are switching from a local realmjs database base to a more cache based solution.
We want to use react-query bcs of previous experience.
Only thing is we need to keep users/teams in sync in a global place like redux, normally i would make a sync function and let axios do the job.
Is there a good way to do this with react-query, maybe fetch-query? or is this a oversight and not neccary....
useInfiniteQuery not keeping all pages
Hello, I am using useInfiniteQuery for a paginated query. I expected when the second page is queried
the pages array to have 2 pages, however it only contains the last page. I'm not sure what i'm doing incorrectly here.
```export const playerKeys = {
all: ['players'] as const,...
React Query + Next13
Hello,
I am planning to use Next13 in an upcoming project and i'd like to pair it up with react query since it's my go-to library now when it comes to data fetching.
If i use the app directory and i happen to include
use-client directive in all my pages and components,...React Query Test with MSW - useMutation test returns `undefined` for current.data property
https://codesandbox.io/s/great-wood-whq7z5?file=/src/hooks.spec.tsx
I am basically copying the implementation from this repo (https://github.com/TkDodo/testing-react-query) and writing a test for useMutation.
Taking inspiration from this tutorial (https://www.js-howto.com/react-query-usemutation-with-jest-testing/)...
React Query Test with MSW - renderHook `current` result always returns null
I am trying to test my react query hook using msw but
renderHook's result's current value is always null. Why?
Note: the reason fetch does not include a URL is because this is a Rails Propshaft app and React and Rails apps share the same port.
In the real app, everything works and the hook returns data just fine but not in the test....Can i cancel a queued mutation somehow?
I have react native project where i use persistqueryClient. I have one mutation that saves user progress as user flips through pages. When the app goes offline i optimistcally update another query that should return the progress from server. The queries themselves work correctly but when when the app comes back online all the mutations for the page flipping will fire. Id only like to fire the last one. So far ive tried queryClient.invalidateQueries and invalidate the mutation keys, tried cancelQ...
How to reset data on component remount
When component mounts first time its data is undefined, then after fetch is completed it is lets say "data1". After component is remounted, I want data field to be again undefined but getting "data1"(from previous fetch) until new fetch is completed and it is "data2". How can I reset data?
P.S. cache and stale time is already 0...
Sign up and and sign in with react-query and redux
Hey 🙂
Im using redux to save the state when the user log in and save the username in the localstorage
there is any reason to use react-query and redux together or its not a good practice
?...
Best practices: components responsible for querying
Love this library and I've been using it for quite some time. I'm struggling to get folks on board w/ tanstack/query for our next phase dev. I came a across this article a while ago and I think it succinctly summarizes the opinion of the hold outs:
Any clever response to the thoughts below?
https://nikoheikkila.fi/blog/clean-frontend-architecture-with-sveltekit/discovering-the-use-cases/#user-content-fnref-2...
Getting type error when using string to invalidate queries
Hey,
I am following the invalidation query docs to invalidate all queries with the term
rates as the first element in the query key array by using
```ts
queryClient.invalidateQueries('rates');...How to reset form values after successful query invalidation
I have a component that calls uses
useQuery to fetch some initial form data. When the data is fetched, I pass it to a form component which calls useForm from React Hook Form with the data as the defaultValues. When submitting the form, I call a mutation. In that mutation's onSuccess, I invalidate the same query that fetched the initial data. I would like to call reset when the query is finished invalidating with the new defaultValues. Every example I've seen calls reset in the `on...objects matching behaviour
Say I have the following query keys:
```ts
{
singleTodoById: (id?: string) => ['todos', { id }];
}...
"Clean" way to centralize API calls in RQ while still keeping some typesafety?
Currently I have something like this (using
ky which is kinda like axios)
```TS
export const api = {
useGetPlaylists: () => {
return useQuery(['playlists'], async () => {...Act warning when using Testing Library and ReactQuery
Hey, I have a really strange behaviour in testing that I can't wrap my head around it. The context is: we're upgrading React from v17 to v18, bumping ReactQuery from v3 to v4 and bumping Testing Library to latest version in the process. After the changes necessary described in changelogs for all respective packages, we've ended up with an endless wall of
Warning: An update to null inside a test was not wrapped in act(...), and failing tests. It appears that any change inside useQuery, be it a loading state, error state or data arriving, it logs this warning but also it makes the tests fail because for some reason assertions are all over the place with regards to timing. For example, a simple component that has a useQuery and renders "loading" when it's loading has a test to assert that at some point, the "loading" is rendered and than disappears when the data arrive. Data are mocked so that the queryFn returns fine. There was no change there. But here's the punchline, the component is never rendered with the loading state, the test only sees the final state after the loading indicator has been removed and it caused me to wrap it all in act as:
```
renderWithQueryClient(<Reports />)
await act(async () => {
await userEvent.click(screen.getByText('Get reports'))...Where to put QueryProvider for NextJS SSG pages?
I have NextJS app (with
app router).
I want to use react-query inside some components on the static generated pages, as well as in completely "use client" pages.
Is there a way to do that?...