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
UX best practices with useQuery invalidateQueries and delayed updates
We have a microservice architecture and one of the downsides is that if we grab information from two different sources and mutate one of these data types and onSuccess of the mutation invalidate both data sources. The invalidate requeries the data source before the change in one microservice has been communicated to and processed by the other microservice. Are there better practices than optimistic updates available for these situations.
How to silence a log after customLogger is deprecated?
I have some end to end tests that check error states in my application. This means there are requests made which I expect to return a 404 not found error.
I use Axios, and this ends up causing about 2,500 lines of error logs in my CI/CD output before all the e2e test results are shown. It's very annoying scrolling through all that everytime a test fails to see what went wrong.
I narrowed it down to a console.error coming from react-query. I was able to silence the error using
logger: { error: (error) => isExpected404(error) ? console.log('expected 404') : console.error(error)}...useMutation Testing using Vitest
Hello, I want to generated different responses or states based on a specific mutation that is happening in my component.
is there a way that I can do that for different testing scenarios that I have to test in this component?
...
Help about the retries I really want to disable it when I received or the fetch throws an error:
Hi everyone just want to seek help about the retries.
Multiple Unique Mutation Calls With Different Mutation Keys
I have to perform post API calls to send data multiple times. The data is from local storage so it's in a form of an array. I will loop trough it and perform mutation. Here's the hook:
```ts
export default function useSendStory({
idStory,...
WebSockets
React.useEffect(() => {
```
React.useEffect(() => {
const alchemy = new Alchemy(settings);
alchemy.ws.on(...
What does the `@tanstack/react-query-next-experimental` package do exactly?
From the docs:
This package will allow you to fetch data on the server (in a Client Component) by just callingThe statement above is under the headinguseSuspenseQueryin your component. Results will then be streamed from the server to the client as SuspenseBoundaries resolve. If you calluseSuspenseQuerywithout wrapping it in a<Suspense>boundary, the HTML response won't start until the fetch resolves. This can be when you want depending on the situation, but keep in mind that this will hurt your TTFB.
Experimental streaming without prefetching in Next.js on the Advanced SSR page. My first question is,...All queries are dependent on a cookie value, need some advice on best approach
I have a lot of queries, and all of them depend on a cookie to be present for headers. Its getting a bit annoying to use the enabled / skipToken approach on all of the queries. Is there something I can do with the defaultOptions? Or should I just render the app when the cookie is present
I don't know if I'm misunderstanding streaming?
(I'm using next.js 14 app router)
So I'm just trying to experiment around, and I can't really get streaming to work, like Suspsense.
It just never says
Loading...
...Show independent loaders for child components, delete mutation
I have a list of toDos (GET /todos), with each toDo Card having a delete button(DEL /todos/id).
As soon as someone clicks on delete on a card, I want to show a loader instead of the delete button, only for that card.
The loader should be shown until the mutation is complete and the GET /todos is refetched (invalidated).
But this doesn't work as expected when multiple toDos are deleted quickly in succession....
Caching audio & video requests
Is it possible to use TanStack Query as the src attribute of a <video> or <audio> element?
I'm working on a product where I have a single, top-level <audio> element, and many Playback ▶️ buttons that need to update the <audio> src. It's very likely that they will replay audio files, so caching each one is ideal.
Thank you 🙏🏿...
Type error when using `useQueries` with different return types
Hey, does anyone know why does this error?
https://tsplay.dev/NDj4zW
It seems like there is an issue with using a
.map() to generate the queries....React Query Prefetching and SSG
Hi guys, in my work, i'm trying to introduce React Query (currently Redux, but we want to migrate) and one of the things i'm looking for is to Prefetch Queries when html loads.
We are using Next.js App Router, and using SSG/ISR to build thousand of pages (Ecommerce Site), but we have some dynamic content like User, Basket or Wishlist, and that's where RQ enter.
For those dynamic content i want to do prefetch when HTML load, no JS load (Fetch then Render, instead of default Render then Fetch). So i'm currently a little bit confusing because i can't find this or explanation of this on the RQ docs, but i found it in the SWR docs....
Best practice to invalidate useSuspenseQuery
I use tanstack router and try to use the pattern of
ensureQueryData and useSuspenseQuery. The query works so far great, but now trying to use queryClient.invaldiateQueries does not seem to behave the same way useQuery was working. How would I invalidate client side the useSuspenseQuery by provided queryKey?
Thanks...I have some question regarding pagination
Hello we are doing a fullstack project and we have a fetch query
```ts
const LIMIT = 7
...
Help with no stale/inactive data, on refetch (breaks the site)
hey everyone, I've been a huge fan of react-query, and read many of tkdodo's blogs (huge inspiration). I was trying to implement the same for a production nextjs search application, but I faced an error. I hope this is a good place to discuss
The problem is when I run a fetch, and try changing my facets (filters) to search again, react-query does the fetch and stores it, and if changed it turns
inactive but if I go back to the same query combination within the stale time, it doesn't fetch and the website. has no content to show.
so I have 2 queries running, one for facets and the other for the main search paginated query, both are interdependent so i have two different queries, one with the tag pagination other with facet with all variable deps....Best practice for single endpoint batching
Hi,
Around caching sinuglar resources requested and retrieved from a batch endpoint.
I can find some discussion of this online https://github.com/TanStack/query/discussions/365. ...
Does creating a client with default options merge options with individual options?
I want to make sure a specific cookie exists before any query is ran, so would specificing an
enable option based on that, merge with individual query options? Or would individual query options override the enabled option?Is it possible to cancel mutations?
I want to cancel a mutation, or at the very least stop onSuccess from being called. Is there a way to do that, like how you can with Queries?