RQ Mutations and Query loading sync
Hi, i'm having the following case and i don't know how to solve it right with RQ.
I have a Query that include a key (example
basket), and also Y posible Mutations that include the same basket key.
Then i have a button, that it should show a loading spinner whatever any of the Queries and Mutations that include the basket key.
What's the recommended way to handle this case?4 Replies
like-gold•12mo ago
If the button triggers the mutation you probably want to add
await queryClient.invalidateQueries({ queryKey: ... }) inside the onSuccess of your useMutation. This will keep the mutation in the pending state until the invalidation is done too. Then you can show a spinner in your button if mutation.isPending is truelike-gold•12mo ago
Mastering Mutations in React Query
Learn all about the concept of performing side effects on the server with React Query.
like-gold•12mo ago
If you also want to show a spinner on the initial load you can use
query.isLoading. If the queries are in different components you will have to call the same useQuery in the component you want to show the spinner in. This works because the same query will share its state in every useQuery call.
This behavior does not apply for mutations, so if your mutation is in a different component you will have to use useMutationState to find whether a mutation with your expected key is currently pending (https://tanstack.com/query/latest/docs/framework/react/reference/useMutationState#usemutationstate)TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
frail-apricotOP•12mo ago
Thanks, you're the best 🙂