TanStackT
TanStack•3y ago
urgent-maroon

Sharing mutation results across multiple components

Hello everyone! I've been using react-query in my project and I have a question regarding sharing mutation results across multiple components.

I have a custom hook that runs a mutation called linkAccount. This mutation will return an address. I would like to share this address across multiple places in my application. Right now, every place I use the address seems to get their own version of it, and it stays undefined everywhere except for the place where I called the mutation from.

Here's a simplified version of my hook:

export const useImx = () => {
  const { data: address, mutate: linkAccount } = useMutation({
    mutationFn: async () => {
      const { address } = await link.setup({})
      return address
    },
  })

  return {
    address,
    linkAccount
  }
}


My initial approach was to leverage the cache from react-query by using setQueryData and getQueryData to store and retrieve the address, but it seems like this doesn't trigger a re-render when the cached data changes.
I know I could create a react context for it, or use a state management library, but I was hoping maybe query has a solution built in

Any help greatly appreciated
Was this page helpful?