Improve usability of the initiate() action for mutations.

[jared-ca]

When running requests by manually dispatching the initiate() action the usability of mutation endpoints is worse than queries.

When using a query you can easily check for the presence of a data or error prop in the union returned to make decisions. For example:

const { data, error } = dispatch(api.endpoints.getPosts.initiate());
if (error) {
  // Handle error case
}

In the case of mutation that code will have a type error:

const { data, error } = dispatch(api.endpoints.setPost.initiate());
Property 'data' does not exist on type '{ ... } | { error: FetchBaseQueryError | SerializedError; }'.ts

Infact the only typesafe way to read the data or error property is to do something like this:

const response = dispatch(api.endpoints.setPost.initiate());
if("error" in response) {
  // Handle error
}

The reason it works for queries is because each entry in the discriminated union always includes an explicit error and data property, set to undefined if it's not included in that case.

This PR makes the same change to the return type for mutations.

[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 6aea6c8:

Sandbox	Source
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[netlify]

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

Name	Link
🔨 Latest commit	6aea6c8
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/66175a0eec431f00085f2b88
😎 Deploy Preview	https://deploy-preview-4337--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.

[msutkowski]

Is there any reason why you wouldn't just:

try {
  const result = dispatch(api.endpoints.getPosts.initiate()).unwrap();
  // do something with the result?
} catch (e) {
  // handle error
}

[jared-ca]

Is there any reason why you wouldn't just:

try {
  const result = dispatch(api.endpoints.getPosts.initiate()).unwrap();
  // do something with the result?
} catch (e) {
  // handle error
}

I guess I could, I didn't think of it :) Mainly following examples from: https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks

[jared-ca]

Feel free to reject this change, the unwrap version is good for me. Or accept it as it makes the interface between queries and mutations similar.

Thanks for your help!