RTK Query: dispatch inside query or mutations

See original GitHub issue

I’ve tried to work with RTK Query and for now (IMHO) I think there is a decent cons of using it especially when you work with Redux (exactly what this lib is for).

In a short details:

I want to dispatch Redux actions after I get a response from query or mutation. But it’s not possible. RTKQ doesn’t provide any field to deal with dispatch. At all.

For example:

I need to query some API and then depends on a response I want to call some redux actions. Yes, I saw in doc’s example that we can just do it in a component but imagine if I would have to do this in NNN separate components? Again and again I should write the same logic? “Hey you can do this in your custom hook” - you would say to me, but, hey, could not we do this just in a one file with the queries? That would be incredibly great if you make some feature to deal with response not in the way transformReponse does. Especially when we use this with Redux (because loading&errors handling are great) obviously it would be great to provide some API to work with Redux actions.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

47reactions
phryneascommented, Sep 14, 2021

Adding to this, you generally should probably not be dispatching additional actions, but have your other slices react to the actions already being dispatched. You can add an extraReducer that just reacts to your endpoint resolving, as showcased in the authentication using extraReducers example

const slice = createSlice({
  name: 'auth',
  initialState: { user: null, token: null } as AuthState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        state.token = payload.token
        state.user = payload.user
      }
    )
  },
})
10reactions
msutkowskicommented, Sep 14, 2021

I’ve tried to work with RTK Query and for now (IMHO) I think there is a decent cons of using it especially when you work with Redux (exactly what this lib is for).

In a short details:

I want to dispatch Redux actions after I get a response from query or mutation. But it’s not possible. RTKQ doesn’t provide any field to deal with dispatch. At all.

For example:

I need to query some API and then depends on a response I want to call some redux actions. Yes, I saw in doc’s example that we can just do it in a component but imagine if I would have to do this in NNN separate components? Again and again I should write the same logic? “Hey you can do this in your custom hook” - you would say to me, but, hey, could not we do this just in a one file with the queries? That would be incredibly great if you make some feature to deal with response not in the way transformReponse does. Especially when we use this with Redux (because loading&errors handling are great) obviously it would be great to provide some API to work with Redux actions.

@magistrfox It exists in two places already depending on what you want to do, but you most likely want this: https://redux-toolkit.js.org/rtk-query/api/createApi#onquerystarted. There is an example showing dispatch usage when a request resolves.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutations | Redux Toolkit
RTK Query provides an option to share results across mutation hook instances using the fixedCacheKey option. Any useMutation hooks with the same ...
Read more >
RTK Query - Dispatch action after mutation in form submission
so I am just learning RTK query and I am trying to just dispatch an action after I run a mutation hook in...
Read more >
Mutations and Caching with Redux-Toolkit-Query
RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web...
Read more >
Creating React Apps With Redux Toolkit and RTK Query - Toptal
RTK Query ideology dictates that all the API definitions appear in one place, which is handy when dealing with enterprise-level applications ...
Read more >
RTK Query: a better way to Redux - Adapptor
One of the cool features of RTK Query is the ability to define tags. Tags can be provided by query endpoints and invalidated...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found