Hi all!

I'm using the axios http library for Node to make requests to a public API as follows:

const response = await axios.get(url)

logPaginatedResponse(response)

After receiving a response and storing it in the response variable above, I am passing the variable to the logPaginatedResponse function to log the response to the console.

My logPaginatedResponse function looks like this:

import { AxiosResponse } from "axios"

export const logPaginatedResponse = async (response: AxiosResponse) => {
  console.dir({
    total_records: response.data.meta.pagination.total,
    records_per_page: response.data.meta.pagination.per_page,
    current_page: response.data.meta.pagination.current_page,
    total_pages: response.data.meta.pagination.total_pages,
  })
}

The AxiosResponse interface looks like this:

export interface AxiosResponse<T = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

In the logPaginatedResponse, I am trying to get autocompletion for response.data.meta.pagination.total, response.data.meta.pagination.per_page, etc.

The AxiosResponse interface gives me autocompletion for response, but no autocompletion for anything in the data object.

The problem is, the data object on the response could be one of many interfaces. See below:

interface CustomerResponse {
  data: {
    customer_id: number
  },
  meta: {
    pagination: {
      total: number,
      count: number,
      per_page: number,
      current_page: number,
      total_pages: number,
      links: {
        previous: string,
        current: string,
        next: string
      }
    }
  },
}

interface ProductResponse {
  data: {
    product_id: number
  },
  meta: {
    pagination: {
      total: number,
      count: number,
      per_page: number,
      current_page: number,
      total_pages: number,
      links: {
        previous: string,
        current: string,
        next: string
      }
    }
  },
}

export const logPaginatedResponse = async (response: AxiosResponse<CustomerResponse | ProductResponse>) => { // console.dir here }

Is there any way to give logPaginatedResponse either the CustomerResponse or ProductResponse interface dynamically?

I tried passing CustomerResponse or ProductResponse to the logPaginatedResponse function at the time of function invocation as follows:

const response = await axios.get(url)

logPaginatedResponse<CustomerResponse>(response)

But that isn't doing the trick. Is this not possible? It almost sounds like I'm looking for what this SO post describes: https://stackoverflow.com/a/50512697 but I'm not entirely sure.

Any suggestions would be super appreciated!! Thank you so much.

EDIT:

I ended up refactoring per u/__gc's suggestion in the comments

Hi all, Noobie here,

So, I am using axios with typescript. I am calling get method on the axios and it returns whole bunch of data but I only need fraction of those data as following:

Interface IApiResponse{ // Small punch of types API returns name:strong Age:number } const response = axios.get<IApiResponse>(URL)

Now, my noob question is why is the response contains additional data as well; one which is not defined in the IApiResponse. For example, API response contains address as well but I have not defined that type in IApiResponse.

How can I only select few data that I need to be included in interface?

Thank you for the help ☺️☺️