Should I use setState inside useEffect with React Query (or TRPC)?

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

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

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

Is there a better way to approach this?

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.

Should I use setState inside useEffect with React Query (or TRPC)?

Similar Threads

Similar Threads

Similar Threads