Formatting the query params using Axios

Question

According to Xero API doc:

Field	Description
Record filter	You can specify an individual record by appending the value to the endpoint, i.e. GET https://.../Invoices/{identifier} InvoiceID - The Xero identifier for an Invoice e.g. 297c2dc5-cc47-4afd-8ec8-74990b8761e9 InvoiceNumber - The InvoiceNumber e.g. INV-01514
Modified After	The ModifiedAfter filter is actually an HTTP header: ' If-Modified-Since'. A UTC timestamp (yyyy-mm-ddThh:mm:ss) . Only invoices created or modified since this timestamp will be returned e.g. 2009-11-12T00:00:00
IDs, InvoiceNumbers, ContactIDs, Statuses	Filter by a comma-separated list of InvoicesIDs, InvoiceNumbers, ContactIDs or Statuses. See details.
Where	Filter using the where parameter. We recommend you limit filtering to the optimised elements only.
createdByMyApp	When set to true you'll only retrieve Invoices created by your app
order	Order by any element returned ( see Order By )
page	Up to 100 invoices will be returned per call, with line items shown for each, when the page parameter is used e.g. page=1
summaryOnly	When set to true, this returns lightweight fields, excluding computation-heavy fields from the response, making the API calls quick and efficient.

My request is constructed like so:

const params = {
  'Statuses': 'AUTHORISED,PAID',
  'page': 1,
  'summaryOnly': false,
}
const config = {
  headers: { 'If-Modified-Since': '2015-01-01T00:00:00' }
}
instance.interceptors.request.use(request => {
  console.log('Starting Request', request)
  return request;
});
const response = await instance.get('Invoices', params, config);
const data = response.data;

... but none of the params seem to be taking effect as the request log shows:

{
  transitional: {
    silentJSONParsing: true,
    forcedJSONParsing: true,
    clarifyTimeoutError: false
  },
  ...
  headers: AxiosHeaders {
    Authorization: 'Bearer eyJhbGciOiJSUzI1NiIsImtpZC...',
    [Symbol(defaults)]: { Accept: 'application/json, text/plain, */*' }
  },
  baseURL: 'https://api.xero.com/api.xro/2.0/',
  Statuses: 'AUTHORISED,PAID',
  page: 1,
  summaryOnly: false,
  method: 'get',
  url: 'Invoices'
}

What am I doing wrong?

Answer 1

You need to pass the params in the config object itself.

const url = 'https://jsonplaceholder.typicode.com/users';
axios
  .get(url, {
    params: {
      hello: 1,
    },
    headers: {
      myHeader: 123,
    },
  })

In your case, you can do the following:

const params = {
  'Statuses': 'AUTHORISED,PAID',
  'page': 1,
  'summaryOnly': false,
}

const config = {
  params,
  headers: { 'If-Modified-Since': '2015-01-01T00:00:00' }
}
// rest of your code

Here is the documentation reference