Best way to handle error responses in Pinia Colada?

[brandonleichty]

Hey all! 👋

I have a question around best practices or approaches to error handling in Pinia Colada.

Let's say you have a page that fetches a list of something - and if there's an error, you want to redirect them to an error page.
We currently have a wrapper useQueryWithErrorHandling that uses a watcher, and allows us to pass in a callback function...

Curious if there's a better pattern or "Pinia Colada way" to do this? 🙏

export function useQueryWithErrorHandling<T>({
  key,
  queryFn,
  staleTime = 5000,
  onError,
}: QueryOptions<T>) {
  const query = useQuery({
    key,
    query: queryFn,
    staleTime,
  })

  watch(query.error, (error) => {
    if (error && onError) {
      onError(error)
    } else {
      console.error('Error fetching data:', error)
    }
  })
  return query
}``

[posva]

There is intentionally no onError() hook in queries because you don't need them. Not only Vue already has watch for side effects like onError(), onSuccess, etc. But also, in practice, we don't want to have side effects in queries either, we want to keep our code declarative. We might want to have global query hooks, and that's a different story with the query hooks plugin. In mutations, side effects (like changing the cache) are much more common and they also allow us to delay the mutation (returning a promise in any of the hooks will make mutateAsynca resolve or reject after it).

Here is an example using the plugin mentioned above:

import { PiniaColada, PiniaColadaQueryHooksPlugin } from '@pinia/colada'

const app = createApp(App)
// app setup with other plugins
app.use(PiniaColada, {
  plugins: [
    PiniaColadaQueryHooksPlugin({
      onError(error, entry) {
        // ...
      },
    }),
  ],
})

So yes, using a watch is the way to go!

[hackel]

What if I want to display a toast message to the user if there is an error? This message would need to be specific to the component, not global. Is a watcher on state.error still the recommended best practice? I'm rather surprised at the lack of an onError hook for queries, but I'm still learning.

[posva]

I updated the comment to add more context. In general, I would recommend to display the error in a declarative way with maybe a retry button rather than a toast. If you still want a toast, yes you can and should use a watcher because a toast is considered a side effect