Add catchSchemaFailure, and docs for RTKQ schema features

[EskiMojo14]

replaces #4926

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a1db464:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
rtk-esm-cra	Configuration

[github-actions]

size-limit report 📦

Path	Size
1. entry point: @reduxjs/toolkit/query/react (modern.mjs)	14.94 KB (+0.29% 🔺)
1. entry point: @reduxjs/toolkit/query (cjs, production.min.cjs)	24.02 KB (+0.5% 🔺)
1. entry point: @reduxjs/toolkit/query/react (cjs, production.min.cjs)	26.42 KB (+0.48% 🔺)
2. entry point: @reduxjs/toolkit/query (without dependencies) (cjs, production.min.cjs)	10.74 KB (+0.64% 🔺)
3. createApi (.modern.mjs)	15.34 KB (+0.35% 🔺)
3. createApi (react) (.modern.mjs)	17.38 KB (+0.15% 🔺)

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	a1db464
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/67fae6c31b74250009e270f0
😎 Deploy Preview	https://deploy-preview-4934--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[agusterodin]

This addresses the concerns I mentioned in the original standard schema MR for catching errors and providing the ability to log the "parse issue" errors to the console (I didn't realize error.issues was a thing)

I looked in Zod's source code to see what formatting of ZodError.toString() is. util.jsonStringifyReplacer appears to just format bigint values to string when present. I don't use bigint values, so I left the replacer function as null instead.

With the code snippet below, I no longer see "uncaught error" in console and am able to see all "issues" formatted verbatim the way i'm used to when directly using Zod 👍

catchSchemaFailure: error => {
    console.error('ZodError:', JSON.stringify(error.issues, null, 2))
    return {
      status: 'CUSTOM_ERROR',
      error: error.schemaName + ' failed validation',
      data: error.issues
    } as FetchBaseQueryError
  }

First screenshot is my current Zod integration output, second screenshot is RTKQ test PR standard schema validation output

[agusterodin]

Other things I noticed:

• Next's dev error overlay is picking up the console.error statement from inside my catchSchemaFailure function. Apparently in new versions of Next.js, all console errors are picked up. Changing my catchSchemaFailure console.error to a console.warn is a decent workaround. I think this is more of a Next.js dev overlay opinion (that I disagree with) than anything on your end. Oddly enough, the console error statement inside my current third-party RTKQ Zod doesn't show up in Next's error overlay. Not a big deal either way.

• I needed to add an as FetchBaseQueryError annotation to the object being returned by catchSchemaFailure, otherwise I get a type error. The code snippet contained in the jsdoc example doesn't contain this annotation.

• If I use catchSchemaFailure (not undefined), the onSchemaFailure callback never gets triggered. This seems to be a non-issue since I don't think there is a purpose of using both at once. Just making sure this is intended behavior.

[EskiMojo14]

re: type error, try adding as const to the status. it looks like Typescript isn't inferring the desired result type from context, which is a bit annoying. (alternatively use satisfies instead of as for better type safety)

i think it makes sense for onSchemaFailure to still be called, so I'll restructure that soon.