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.

TanStack•3y ago•

1 reply

primary-violet

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])

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

How to hydrate a global store without using onSuccess?

Similar Threads

How to hydrate a global store without using onSuccess?

Similar Threads

Similar Threads

Similar Threads