Support custom query client config

SofianeDjellouli commented 2 years ago

What is the problem?

I'm trying to show a snackbar when an error is thrown in mutations in the _app component. The documentation says:

The default app/pages/_app.tsx configures an error boundary which catches errors that happen during render, on the client side. This will also catch errors within useQuery or useMutation because they happen in suspense.

However, the error boundary is not rendered by default when a mutation throws an error. It is render only if the useErrorBoundary mutation option is set to true in useMutation. The documentation on useErrorBoundary says:

Defaults to the global query config's useErrorBoundary value, which is false

It seems to contradict the latter documentation quote.

How can useMutation errors be caught in ErrorBoundary by default?
Would it be possible to use a custom config for the query client in order to have useErrorBoundary: true or other things?

Thanks

Paste all your error logs here:

PASTE_HERE (leave the ``` marks)

Paste all relevant code snippets here:

Custom App

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page)

  const handleResetBoundary = useQueryErrorResetBoundary().reset

  return (
    <RecoilRoot>
      <IonApp>
        <ErrorBoundary
          FallbackComponent={RootErrorFallback}
          onReset={(...args) => {
            console.log(44333, args)

            handleResetBoundary()
          }}
          onError={(...args) => console.log(333, args)}
          onResetKeysChange={(...args) => console.log(332223, args)}
        >
          {getLayout(<Component {...pageProps} />)}

          <Snackbar />
        </ErrorBoundary>
      </IonApp>
    </RecoilRoot>
  )
}

Signup Page

import { UnauthenticatedLayout } from "app/core/layouts/unauthenticated/UnauthenticatedLayout.gen";
import { SignupForm } from "app/modules/auth/signup/form/SignupForm.gen";
import { BlitzPage } from "blitz";

const Signup: BlitzPage = SignupForm

Signup.getLayout = (page) => (
  <UnauthenticatedLayout title="Create Account">{page}</UnauthenticatedLayout>
)

Signup.redirectAuthenticatedTo = "/"

export default Signup

What are detailed steps to reproduce this?

1.

Run `blitz -v` and paste the output here:

Linux 4.19 | linux-x64 | Node: v17.1.0

blitz: 0.43.0 (local)

  Package manager: yarn 
  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 891.22 MB / 7.68 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 17.1.0 - /tmp/fnm_multishells/9243_1640588348646/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.15 - /usr/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.5.0 => 3.5.0 
    blitz: 0.43.0 => 0.43.0 
    prisma: 3.5.0 => 3.5.0 
    react: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    typescript: 4.5.2 => 4.5.2

Please include below any other applicable logs and screenshots that show your problem:

No response

beerose commented 2 years ago

I'm super sorry for the late reply.

How can useMutation errors be caught in ErrorBoundary by default? Would it be possible to use a custom config for the query client in order to have useErrorBoundary: true or other things?

Unfortunately, it looks like you have to explicitly pass useErrorBoundary right now as there's no way to provide custom query client config.

beerose commented 2 years ago

This is covered by the Blitz Toolkit. Docs: https://alpha.blitzjs.com/docs/rpc-setup

blitz-js / legacy-framework