Multiple axios instances

[CloudPower97]

Hello @simoneb ,
is there a way to use multiple axios instances?
As far as I understand, configure accept a single instance.
Is there something I'm missing or is this funcionality not present ATM?
Is it going to be possible?
Maybe something like:

import { configure } from 'axios-hooks'
import Axios from 'axios'

const firstInstance= Axios.create({
  baseURL: 'https://api.myjson.com/'
})

const secondInstance= Axios.create({
  baseURL: 'https://api.myjson.com/'
})

configure({ firstInstance, secondInstance })
//OR
//configure({axios: [firstInstance, secondInstance]})

(In either cases defaults to firstInstance if not specified)

and then use it like that:

import useAxios from 'axios-hooks'

const [{ data: getData, loading: getLoading, error: getError }, manualFetch] = useAxios(
    'bins/820fc',
    {
         manual: true,
         instance: 'firstInstance'
    }
  )

This is my general idea.
Do you think that something along the lines of that is possible to achieve?
Thank you for your time!

[simoneb]

can you explain what would be the use case you're trying to accomplish?

[CloudPower97]

For example, in one of the projects I'm working on now, we have to make AJAX requests to both our private API and another external service.
To accomplish this task I usually create two custom instances of Axios, something along the lines of this:

ourApi.js

import axios from 'axios';

export default axios.create({
  baseURL: 'http://our-api.com'
});

externalService.js

import axios from 'axios';

export default axios.create({
  baseURL: 'http://external-service.com',
  params: {
    appid: 'mysecretkey'
  }
});

Now, without axios-hooks I would have imported the right instance in the needed component and that's it.

BUT, with axios-hooks we need to configure the hook prior using it.

But ATM there is no way to reference/use a different instance at my will, hence I opened this issue.
Thoughts?

[simoneb]

Yeah the scenario is a reasonable one, I think I would prefer to go with a hook creator, exported as a named export from the package, something along the lines of:

import { makeUseAxios } from 'axios-hooks'

const useAxios = makeUseAxios({ ...base configuration })

What do you think?

[simoneb]

I'm working on a PR to add this, please check it out and let me know if you have thoughts. #100

[CloudPower97]

Hey, @simoneb , thanks for the quick P.R.
I'd like to have a glimpse of how we are supposed to makeUseAxios.
Do we have to configure it once?
Do we have to use makeUseAxios and the returned useAxios multiple times?

[simoneb]

@CloudPower97 see #100 and the updated README which includes an example.

To answer your questions:

• makeUseAxios is basically a Hook creator. You get back a useAxios Hook that you can reuse, configured with the provided axios/cache supplied to the creator
• you can use the so-created Hook as many times as you want

I published a prerelease 1.8.0-0 version on NPM so you can try it out.

Would this work for you?

[simoneb]

@CloudPower97 do you have any thoughts on this?

[CloudPower97]

Hey, @simoneb, sorry for this late answer.
I finally had a chance to try version 1.8.0-0.
I've forked your CodeSandbox example and things went really smooth.
However, on the aforementioned project, I have got the following error:

Expected 0 type arguments, but got 1.ts(2558)

The code that is throwing this error is:

  useApi<Colture[]>(
    {
      url: '/diz-coltures',
      ...config
    },
    options
  );

where useApi is what makeUseAxios gives me back, and Colture is a TS interface.
Worth noting that useAxios<Colture[]> is not throwing this error.

Anyway, thank you for your time, I do really appreciate!

[simoneb]

Can you please post the error in full? I can't see what the compiler is complaining about.

[CloudPower97]

Hey @simoneb, I've create a sandbox as well, you can have a look at it whenever you want.
I've tried useAxios as well, and it has the same exact problem, but if I switch back to the previous version everything works fine.
It has to be something about this latest version.

[simoneb]

@CloudPower97 thanks for checking. There was indeed a problem with the TS type definition. Fixed in 1.8.0-2. Can you update and try again?

[CloudPower97]

@simoneb Everything works fine now, thank you!

[simoneb]

@CloudPower97 thanks for helping to troubleshoot the issue! I'll release this feature soon.