T
TanStack•3y ago
rising-crimson

How to hydrate a global store without using onSuccess?

Lets say I want to fetch a product and set the result to a zustand store. 
//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })
//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })
Since tkdodo mentions we shouldn't be using onSuccess (it will be deprecated fully soon), is the only approach to just add: 
useEffect(() => {
  setSelectedProduct(productData)
}, [productData])
useEffect(() => {
  setSelectedProduct(productData)
}, [productData])
Is there a better way to approach this? I loved simply using onSuccess but I likely was using it wrong based on what the article mentions. TkDodo article: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
1 Reply
afraid-scarlet
afraid-scarlet•3y ago
Why would you want to set it to a zustand store?

Did you find this page helpful?