T
TanStack•3y ago
extended-salmon

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
  }
}
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
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?