Use Redux Offline with RTK-Query

Question

Has anyone been successful in marrying Redux Offline with RTK Query?

I'm unsure how to decorate RTK query mutations with offline metadata, as described in the RTK Query docs:

const registerUser = (name, email) => ({
  type: 'REGISTER_USER',
  payload: { name, email },
  meta: {
    offline: {
      // the network action to execute:
      effect: { url: '/api/register', method: 'POST', body: `name=${name}&email=${email}`, headers: { 'content-type': 'application/x-www-form-urlencoded' } },
      // action to dispatch when effect succeeds:
      commit: { type: 'REGISTER_USER_COMMIT', meta: { name, email } },
      // action to dispatch if network action fails permanently:
      rollback: { type: 'REGISTER_USER_ROLLBACK', meta: { name, email } }
    }
  }
});

Basically I want to add mutations (POST requests) that failed due to the device being offline to a queue, which will be processed if the device is online again.

score 6 · Accepted Answer · answered Jun 11 '22 at 22:36

6

Author of RTK Query here: RTK Query does not have any mechanisms to integrate with Redux Offline, and I have never worked with Redux Offline myself. So unless Redux Offline has any such mechanisms to integrate with RTK Query, it's probably just never been implemented by anyone and those two are independent systems without any relation between them.

It's probably a better idea to look into a Web Worker that does this for you? Not 100% sure if that's the best way though - I never had an "offline" use case/requirement myself.

answered Jun 11 '22 at 22:36

phry

35,762
5
67
81

2

Oh didn’t expect an answer from probably the most qualified person on that topic here. Thanks for RTK Query and your quick answer. I‘m using RTK Query with React Native and previously used just Redux with a „queue“, where I would save items POSTed while offline for syncing when the device gained connectivity again. I was wrongly assuming that Redux Offline is a solution from the Redux team for (offline first) use cases like mine. Will try and adapt that offline queue to work with RTK Query. – cseelus Jun 14 '22 at 00:47
1

@cseelus did you try the offline queue to work with RTK Query? – Aftab Baig Sep 29 '22 at 20:38
1

@AftabBaig Unfortunately not, we switched to https://tanstack.com/query – cseelus Oct 03 '22 at 20:39

Use Redux Offline with RTK-Query

1 Answers1