Default query params not getting passed in axios request

javascript reactjs api axios create-react-app

14,470

Solution 1

I solved it using 2 ways:

Using default params and spreading them when using the request

export const API_DEFAULT_PARAMS = {
  part: 'part',
  maxResults: 5,
  key: 'key'
}

export default axios.create({
  baseURL: 'http://somebigurlhere',
});

Then to use it:

import api, { API_DEFAULT_PARAMS } from './place/where/previous/file/is';
    ....
api.get('/search', {
   params: {
    // spread the default params
     ...API_DEFAULT_PARAMS,
    // add your own parameters here
     q: 'word',
   }
});

Using interceptors as a user suggested here

const instance = axios.create({
  baseURL: 'http://somebigurlhere',
}); 

instance.interceptors.request.use(config => {
  config.params = {
   // add your default ones
   part: 'part',
   maxResults: 5,
   key: 'key',
   // spread the request's params
    ...config.params,
  };
  return config;
});

export default instance;

Then to use it

import api from './place/where/previous/file/is';
...
api.get('/search', {
 params: {
   q: 'word',
 }
});

I like the interceptor approach more because it abstracts the default params to the instance file itself and you don't have to import and spread an object every time you use the instance.

Solution 2

Downgrade the Version of axios. it has some issues with latest version

npm install --save [email protected]

14,470

pallav_125

Frontend Developer still exploring the ocean of JavaScript

Updated on September 14, 2022

Comments

pallav_125 over 1 year
I'm using axios.create() to pass in a baseURL and some default query params like this
```
axios.create({
    baseURL: 'http://somebigurlhere',
    params: {
        part: 'part',
        maxResults: 5,
        key: 'key'
   }
});
```
When I use
```
axios.get('/search', {
    params: {
        q: 'word'
    }
});
```
the default params do not get merged in the GET call.

What I get is http://somebigurlhere/search?q=word

instead of http://somebigurlhere/search?part=part&maxResults=5&key=key&q=asd

I tried putting the configuration in many other ways but it still doesn't work. Am i doing something wrong here ?

I tried the same in other projects and it is working there. Just created a new react app with create-react-app and this doesn't seem to work anymore.
pallav_125 almost 5 years

This is for a custom configuration across a react app. I don't think it will be a good idea creating a config object everywhere i make the request. the second part is right and I'm exporting the instance which doesn't seem to work for me
basic almost 5 years

If the config is going to be the same in the react app I don't see why you can't export it from a single location. Second, the second way I have shown is the axios way to use axios.create, if you are having issues with that you have other issues in yoru code.
pallav_125 almost 5 years

I am able to export it from a single location but as i mentioned in my question, it isn't working. It was working earlier but with the new app that i create from create-react-app, this isn't working for me anymore. export obviously works, the params getting appended to the url doesn't
Matt Ellen almost 5 years

how is this different to basic's answer?
basic almost 5 years

@pdjinn Here is my exact code in a react sandbox. codesandbox.io/embed/cranky-aryabhata-2773d?fontsize=14 axios_control.js is exporting my object.
Chiến Nghê almost 5 years

The Basic's answered was quite different at the first time I answered. I edited his one later on.
Chiến Nghê almost 5 years

Even though I believe my answer is more clear intuitive with image illustrated. Sorry if I could not see you expressed your answer well.
basic almost 5 years

Ok bud, more power to ya
pallav_125 almost 5 years

Thanks @basic. Just found out that axios v0.19.0 got published recently and this code is not working there. For v0.18.0 even my code is working perfectly.
Casper Wilkes over 4 years

This should be accepted as the correct answer. Very well explained and useful!
julie-ng over 4 years

There is a small bug in option #2 for interceptors. The ...config.params has to be at the end so that it overrides the defaults, not other way around. So a correct definition would look like this: config.params = { ...defaults, ...config.params }
tHeSiD almost 4 years

Currently this is the only easiest option if you are still in learning stage! track the issue here github.com/axios/axios/issues/2190