Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve usability of the initiate() action for mutations. #4337

Merged

Conversation

jared-ca
Copy link
Contributor

@jared-ca jared-ca commented Apr 11, 2024

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.

Copy link

codesandbox bot commented Apr 11, 2024

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link

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

Copy link

netlify bot commented Apr 11, 2024

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...

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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!

@markerikson markerikson merged commit c892abd into reduxjs:master May 9, 2024
27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants