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