Using jotai atom in the QueryClient global cache-level callbacks

[nunoplima]

Hi everyone!

In a Next.JS 12 app, I’d like to use the global cache-level callbacks when setting up the QueryClient and eventually fire a toast from the onError callback. The toasts are managed using Jotai. Having the Jotai Provider in the same file as the QueryClientProvider does not seem to work, is there a way to achieve this? Having Jotai Provider in _document.tsx or the QueryClientProvider in a child component works, but I think I should avoid those.
In the following codesandbox, the <Home /> is trying to get the todos using the useTodos query hook (with a meta field setup) which fires an error, and ideally will be digested in QueryClient .
https://codesandbox.io/p/sandbox/unruffled-stonebraker-40iq89?file=%2Fpages%2F_app.tsx%3A40%2C14

Thank you for your time and attention.

[TkDodo]

you just need to nest providers. put the <JotaiProvider> higher up the tree or move the <QueryClientProvider> further down. Yes, you cannot call a hook that depends on the JotaiProvider before rendering said provider - it has to be as a child

[nunoplima]

Hi @TkDodo, thanks for your reply!

Would passing a function via the meta field and call it from the global cache-level callbacks be a possible approach:

new QueryCache({
  onError: (error, query) => {
    if (query?.meta?._onError) {
	_onError(error);
    }
}

useQuery({
  (...)
  meta: {
    _onError: (error) => addToast(error)
  }
})

Thank you for your time and all the good content in your blog!

[TkDodo]

well yes, it technically works, except that you could run into stale closure issues if your _onError function in meta closes over something from the component. I'm not a fan of this approach because of that

[nunoplima]

Makes sense. Thank you.