Is there a way to share mutation state between components in React Query, similar to how we can use | TanStack | Page 1

obsidian badger Oct 17, 2023, 11:08 AM

#

I have a scenario where I'm using the useCustomerById hook to fetch customer data and the associated mutate function. I need to share the data and mutate function across multiple components without prop drilling. Currently, I'm passing them down as props. Is there a better way to manage and share this data and function between components?

#

obsidian badger Oct 17, 2023, 11:36 AM

#

@dusky tulip

round hazel Oct 17, 2023, 11:43 AM

#

What's stopping you from using a query instead of a mutation.
Then you can invalidate the query when you need to.
Query also exports a refetch function.
https://tanstack.com/query/latest/docs/react/guides/query-invalidation

Query Invalidation | TanStack Query Docs

Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the QueryClient has an invalidateQueries method that lets you intelligently mark queries as stale and potentially refetch them too!

obsidian badger Oct 17, 2023, 11:55 AM

#

round hazel What's stopping you from using a `query` instead of a `mutation`. Then you can i...

bcz all are post request event to get data

round hazel Oct 17, 2023, 11:59 AM

#

I'm not sure if this is best practices but a Query is not forcing you to use GET requests.
If it makes more sense in your UI to treat async data as a Query vs a Mutation, then I would personally do that.

Meaning you can just have a POST request inside your queryFn .

#Is there a way to share mutation state between components in React Query, similar to how we can use