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 function stuck on pending status randomly
hey guys, i have this useQuery function that gets data from an api.
the function gets stuck on status : pending and fetchStatus : idle even tho it managed to get the data.
it happens randomly, meaning sometimes it manages to return the data so im not sure why it happens.
using claude ive added some console.logs so he changed the function a bit but nothing changed.
...
ensureQueryData vs prefetchQuery
Hello guys! I'm trying to integrate react-query with tanstack router and I'm a bit confused about ensureQueryData and prefetchQuery
```ts
export const Route = createFileRoute('/posts')({
loader: ({ context: { queryClient } }) => {...
React 18 with react query v3
Hi
Does react query v3 work with react 18?
I wonder because there are failing test I get with react query states when upgrading to react 18...
NextJS error overlays and useSuspense.
In dev environment and using useSuspenseQuery is having the NextJS error overlay appearing on a failed request just a part of life?
https://github.com/vercel/next.js/issues/36908...
proper way of handling optimistic updates
Hey,
I wanna ask you - How to proper handle optimistic updates in this scenario?
1. User create task...
Is it possible to Await multiple query invalidation to keep mutation pending
Currently its possible to await a single query invalidation call by returning the promise from invalidation to keep the mutation state isLoading to true.
Lets say a mutation updates both list and detail queries. Is it possible to await both invalidation and also invoking them in parallel. Wrapping them in Promise.all([invalidate-list, invalidate-detail]) did not work....
Best Practice for mutationFn Return Value When Not Using Axios
I'm working with mutations in React Query and need clarification on the optimal return value from mutationFn. The type definition shows:
mutationFn: (variables: TVariables) => Promise<TData>
My main question is: Should I return the promise directly (e.g., return response.json()) or should I await response.json() first and then return the final data inside mutationFn?
```typescript...No easier way to infer select?
Yo. Im using a queryOptions factory pattern, to manage all my queries. In that regard, i really would like to abstract some of the type logic away, into factory functions.
Example:
```ts
export const useCustomers = createQuery(...
Does tanstack-query or fetch have any kind of default request timeout?
We have a particularly slow backend today, and seems our frontend is fairly consistently giving up and retrying after 20 seconds. The backend on the other-hand seem to continue what it's doing and finish whatever that was, but it can take over a minute sometimes.
I'm assuming there's something timing out somewhere, and it seems to happen on the frontend, but I can't seem to find any information about a default request timeout or how to configure one for
fetch, tanstack-query, or browsers. Anyone know anything about this topic?
I know you can use an AbortController to introduce a timeout, but, we have no such thing anywhere....Styling devtools open button
Hi all, im searching for a way to apply custom styling to the devtools open button, as placing it next to the react router devtools looks confusing. does anyone know a easy way to manipulate it without styling it all using the panel variant?
refetchOnWindowFocus seems to be getting ignored sometimes
Hi all! I am having an issue with my tanstack query useQuery hook. This is for a fully client-side SPA app, in Typescript React with Vite under the hood.
I have a file where I lay out all of the queries with the query options; the one in question:
```...
RQ frequent cache updates using WebSockets
Hey everyone, I’m working on a React chat app and using React Query for data. Basically, I fetch the conversations list and messages from two separate APIs at first, but after that, all interactions (like new messages, unread counts, etc.) are handled through WebSockets (inbound and outbound).
Right now, I’m using setQueryData to update the React Query cache whenever a WebSocket event happens so the UI updates immediately (like appending messages or updating the last message in a conversation).
It works, but I’m wondering if this is the best approach? It feels like it might get slow or messy with a lot of updates. Is there a better way to handle frequent WebSocket updates with React Query?...
Update cached query result with the fresh value from another query [Details => List].
What's the go-to solution to sync a freshly fetched value (let's say
getCustomerByID - the details part) into an already stored query result (let's say getCustomers - the list query). onSuccess callbacks on the queries are deprecated so I suppose I should use useEffect on query.data when fetching getCustomerByID and update the cache manually but I don't feel very confident in this approach.I'm having an issue with an uncaught promise on a mutation
To my knowledge when you give a mutation function a promise Like a server action if it returns an error then you can use the on error and Onsuccess functions. I'm doing that all over my project and it's working just fine except in one section.
``TypeScript
const mutationAddQuestion = useMutation({
mutationFn: async (formData: FormData) => {
const correctAnswer = Array.from({ length: numberOfAnswers }).findIndex((_, index) => (formData.get(correctAnswer${index}`) === 'on')) + 1;...How does the query cache work on Next.JS?
This is probably one of the easiest questions lol, but at work we were talking about react query and how it caches fetched data. We couldn't really find an answer on how caching works between pages (on app router) - like, in this scenario:
```
// shared/query-options.ts
export const queryOptions = {...
Drawbacks of multiple related mutations in one hook?
is grouping related mutations in one hook bad?
```js
const useFolderMutations = () => {
const queryClient = useQueryClient()...
Compatibility of Library with Ionic React and Capacitor for Android and iOS
Can this library be used with Ionic React and Capacitor? Specifically, I would like to know if it is compatible with both Android and iOS platforms. Are there any known limitations or additional configurations required for successful integration?
tanstack router + query: what's a good way to ensure queries in loader are used in component?
I'm a big fan of tanstack/query and tanstack/router. We've been using query in our 1M+ LoC frontend codebase with a trpc-like wrapper and it works great! Our queries look like this:
```ts
const { data } = api.get('/api/foo/{id}').useQuery({
id: 2,
includes: { bar: true },...
Is it possible to have mutation queue that will run until the queue empty ?
I have a question on modal and on each question I'm sending the answer to backend.
because the navigation to question is fast, user can finish going through the question before the mutation finishes and close the modal.
so Is a way to handle this case ?...
Should queryFn(fetcher) be independent of React life cycle?
I'm working on a Next.js 14 project (App Router) and need to set up a centralized axios instance as queryFn(fetcher) in order to use react-query, which should integrates seamlessly with:
1. useSession from next-auth
2. i18n from next-intl:
3. router from next/router...