how to configure the effect reconciler to pass errors to rollback with redux-offline?

Question

Problem

I have just recently found out about this library and was implementing it for a react native app, but can't get my head around how the effect reconciler passes the errors to rollback. I am firing the below action, and whether the response is success or failure, the effect reconciler directly passes everything to commit. can anyone tell me what I am doing wrong here?

const saveProfileRequest = (query, link): Action => ({
  type: SAVE_PROFILE_PICTURE_REQUEST,
  meta: {
    offline: {
      effect: {
        url: BASE_URL,
        method: 'POST',
        body: JSON.stringify({
          query,
          variables: { url: link }
        })
      },
      commit: { type: SAVE_PROFILE_PICTURE_SUCCESS, meta: { link } },
      rollback: { type: SAVE_PROFILE_PICTURE_FAILURE }
    }
  }
});

Expectations

As I am currently implementing the offline capabilities to an existing app, I was expecting the effect reconciler to pass success response to commit and pass error response to rollback.

Store config

    // @flow
    import { createStore, applyMiddleware, combineReducers } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import { offline } from '@redux-offline/redux-offline';
    import offlineConfig from '@redux-offline/redux-offline/lib/defaults';
    import { persistStore, persistReducer } from 'redux-persist';
    import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
    import thunkMiddleware from 'redux-thunk';
    import AsyncStorage from '@react-native-community/async-storage';
    import type { Store } from '@types/Store';
    import rootReducer from '@reducers/index';
    
    const persistConfig = {
      key: 'root',
      storage: AsyncStorage,
      whitelist: ['reducerOne', 'reducerTwo', 'reducerThree'],
      stateReconciler: autoMergeLevel2
    };
    
    const persistedReducer = persistReducer(
      persistConfig,
      combineReducers(rootReducer)
    );
    
    const store: Store = createStore(
      persistedReducer,
      composeWithDevTools(
        applyMiddleware(thunkMiddleware),
        offline({
          ...offlineConfig,
          retry(_action, retries) {
            return (retries + 1) * 1000;
          },
          returnPromises: true
        })
      )
    );

score 2 · Answer 1 · edited Jun 24 '21 at 03:55

I was having the same issue, because our GraphQL API always return 200, but with an error object, so I needed to customize it.

Basically you need to customize the discard function, returning false in case of an error.

The default discard already return false in case of Network issue, but if you have errors inside your response, and it's returning 200 instead, you can customize.

Documentation for Discard: https://github.com/redux-offline/redux-offline/blob/develop/docs/api/config.md#discard

Default implementation (you can use that as initial draft): https://github.com/redux-offline/redux-offline/blob/develop/src/defaults/discard.js

how to configure the effect reconciler to pass errors to rollback with redux-offline?

1 Answers1