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
  }
}

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

TanStack•3y ago

urgent-maroon

Sharing mutation results across multiple components

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
  }
}

Sharing mutation results across multiple components

Similar Threads

Sharing mutation results across multiple components

Similar Threads

Similar Threads

Similar Threads