onIntercept not re-fetching when RequestToApi object is returned

[jjenzz]

I have tried to implement onIntercept. My implementation gets called and refreshes the token correctly but doesn't make another requestToApi with the returned RequestToApi object.

I'm using [email protected].

import React, { Component } from 'react';
import { func, string, object } from 'prop-types';
import Config from 'react-native-config';
import { Fetch as ReactDataFetching } from 'react-data-fetching';
import { authStore } from '@/stores';

class Fetch extends Component {
  handleIntercept = async data => {
    let output = null;

    if (data && data.status === 401) {
      try {
        const token = await authStore.refreshToken();

        if (token) {
          output = {
            ...data.currentParams,
            headers: {
              ...data.currentParams.headers,
              Authorization: `AuthToken ${token}`,
            },
          };
        }
      } catch(error) {
        console.log(error);
      }
    }    

    return output;
  };

  render() {
    const { resource, headers, token, children, ...props } = this.props;
    const url = `${Config.API_URL}${resource}`;

    return (
      <ReactDataFetching
        {...props}
        url={url}
        loader={() => children({ isLoading: true })}
        headers={{ ...headers, Authorization: `AuthToken ${token}` }}
        onIntercept={this.handleIntercept}
      >
        {childProps => children({ isLoading: false, ...childProps })}
      </ReactDataFetching>
    );
  }
}

Fetch.propTypes = {
  resource: string.isRequired,
  children: func.isRequired,
  headers: object,
};

Fetch.defaultProps = {
  headers: {},
};

How do I get this working?

[CharlesMangwa]

Hi @jjenzz! Thanks for filling out this issue.

From what I can see, your implementation of the interceptor is valid and should be working. Are you able/allow to reproduce that behaviour on CodeSanbox plz? I know that everything that as to deal with token is quite sensitive information but even a simple reproduction would help me a lot to fix your issue.

If it can help you understand what's going on under the hood, here are the lines that deal with this:

https://github.com/CharlesMangwa/react-data-fetching/blob/35b8449cfb205810b756ebde61d7fb3fd50e5f49/modules/requestToApi.js#L77-L92

On another note, I noticed that you're passing the token via AnaplanAuthToken ${token} inside ReactDataFetching, but it becomes AuthToken ${token} inside this.handleIntercept. I'm not sure if that's the root cause of everything, just a heads up!

[jjenzz]

@CharlesMangwa Thanks for your super quick reply 🙂

The AuthToken mismatch was a fail on my part to remove sensitive information from my issue report haha. Oops! The headers aren't the issue because it isn't even getting as far as making the onIntercept request from the returned object (which is the issue).

I'll try create a sandbox this evening because I need a mock API and I'm at work atm.

[CharlesMangwa]

Purfect! Feel free to provide it whenever you want. I'll try to take a look at it as soon as possible!