Axios client with useSwr Fails to make request

Viewed 302

Im using a shared Axios "client" object that is passed around my application via react context, this client object has the API key auth header and base paths already configured so im not constantly defining it.

My problem is trying to use the useSwr hook, specifically when defining the fetcher. I just cannot get it to work, and im sure im missing something simple here.

Basically, I pull the api client off the context, and use a fetcher function iv defined already, but I get nothing.

Here's some snips,

The Client

const AXIOS_CLIENT_CONFIG = {
    baseURL: API_BASE,
    timeout: 2000,
};

export default class APIClient {
    client: AxiosInstance;
    accessToken: string;
    headers: any;

    constructor(accessToken?: string) {
        this.accessToken = accessToken;
        this.headers = { Authorization: `Bearer ${accessToken}` };
        if (accessToken) {
            this.client = axios.create({
                ...AXIOS_CLIENT_CONFIG,
                headers: this.headers,
            });
        } else {
            this.client = axios.create(AXIOS_CLIENT_CONFIG);
        }
    }


    fetcher(url: string): Promise<any> {
        return this.client.get(url).then((res) => res.data);
    }

The Component

export default function Upload(): ReactElement {
    const { api }: IAppContext = useContext(AppContext);

    const { data, error } = useSwr(`/upload/${uploadId}`, api.fetcher, {
        refreshInterval: 5000,
    });

Using above, I see nothing, no requests, no errors. (yes, the client comes through fine, I use this throughbout my whole app, its just this fetcher part that is broken)

Just for testing if I define the following fetcher, I can see a request is made (and failed due to auth)

const fetcher = (url) => axios.get(url).then((res) => res.data);

Even logging out the function signatures, they look almost the same to me

console.log("API FETCHER", api.fetcher);
console.log("NORMAL FETCHER", fetcher);

Outputs

API FETCHER ƒ fetcher(url) {
      return this.client.get(url).then(function (res) {
        return res.data;
      });
    }

NORMAL FETCHER ƒ fetcher(url) {
  return axios__WEBPACK_IMPORTED_MODULE_5___default().get(url).then(function (res) {
    return res.data;
  });
}

What am I doing wrong here?

1 Answers

After hours of screwing around, I eventually figured this out. Incase anyone else comes across the issue when trying to use an Axios client objection with class functions like I am here.

I had no bound the context of this within the class for that specific function.

Basically, I needed to add the following to my api clients constructor

// Bind "this" context
this.fetcher = this.fetcher.bind(this);
Related