How to use axios and TypeScript with useSWRInfinite?

[jayprado]

Hi everyone!

So we have a very useful example of how to use useSWR with axios and TypeScript.

I've been trying to create a similar function that uses useSWRInfinite instead, but I just can't wrap my head around it. I currently have this:

import { useSWRInfinite, SWRInfiniteConfigInterface, SWRInfiniteResponseInterface } from 'swr'
import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'

import axios from './request'

export type GetRequest = AxiosRequestConfig | null

interface Return<Data, Error>
  extends Pick<
    SWRInfiniteResponseInterface<AxiosResponse<Data>, AxiosError<Error>>,
    'isValidating' | 'revalidate' | 'error' | 'mutate' | 'size' | 'setSize'
  > {
  data: Data[] | undefined
  response: AxiosResponse<Data>[] | undefined
}

export interface Config<Data = unknown, Error = unknown>
  extends Omit<
    SWRInfiniteConfigInterface<AxiosResponse<Data>, AxiosError<Error>>,
    'initialData'
  > {
  initialData?: Data[]
}

export default function useRequestInfinite<Data = unknown, Error = unknown>(
  getRequest: (
    index: number,
    previousPageData: AxiosResponse<Data> | null
  ) => GetRequest,
  { initialData, ...config }: Config<Data, Error> = {}
): Return<Data, Error> {
  const {
    data: response,
    error,
    isValidating,
    revalidate,
    mutate,
    size,
    setSize,
  } = useSWRInfinite<AxiosResponse<Data>, AxiosError<Error>>(
    (index, previousPageData) => {
      const key = getRequest(index, previousPageData)
      return key ? JSON.stringify(key) : null
    },
    (request) => axios(JSON.parse(request)),
    {
      ...config,
      initialData:
        initialData &&
        initialData.map((i) => ({
          status: 200,
          statusText: 'InitialData',
          config: {},
          headers: {},
          data: i,
        })),
    }
  )

  return {
    data: response && response.map((r) => r.data),
    response,
    error,
    isValidating,
    revalidate,
    mutate,
    size,
    setSize,
  }
}

but I think something is missing. I will keep trying to crack on this, but any help would be appreciated! Thank you.

[jayprado]

Managed to create a working function for useSWRInfinite with axios and TypeScript like this:

import { useSWRInfinite, SWRInfiniteConfigInterface, SWRInfiniteResponseInterface } from 'swr'
import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'

import axios from './request'

export type GetRequest = AxiosRequestConfig | null

interface InfiniteReturn<Data, Error>
  extends Pick<
    SWRInfiniteResponseInterface<AxiosResponse<Data>, AxiosError<Error>>,
    'isValidating' | 'revalidate' | 'error' | 'mutate' | 'size' | 'setSize'
  > {
  data: Data[] | undefined
  response: AxiosResponse<Data>[] | undefined
}

export interface InfiniteConfig<Data = unknown, Error = unknown>
  extends Omit<
    SWRInfiniteConfigInterface<AxiosResponse<Data>, AxiosError<Error>>,
    'initialData'
  > {
  initialData?: Data[]
}

export default function useRequestInfinite<Data = unknown, Error = unknown>(
  getRequest: (
    index: number,
    previousPageData: AxiosResponse<Data> | null
  ) => GetRequest,
  { initialData, ...config }: InfiniteConfig<Data, Error> = {}
): InfiniteReturn<Data, Error> {
  const {
    data: response,
    error,
    isValidating,
    revalidate,
    mutate,
    size,
    setSize,
  } = useSWRInfinite<AxiosResponse<Data>, AxiosError<Error>>(
    (index, previousPageData) => {
      const key = getRequest(index, previousPageData)
      return key ? JSON.stringify(key) : null
    },
    (request) => axios(JSON.parse(request)),
    {
      ...config,
      initialData:
        initialData &&
        initialData.map((i) => ({
          status: 200,
          statusText: 'InitialData',
          config: {},
          headers: {},
          data: i,
        })),
    }
  )

  return {
    data: response && response.map((r) => r.data),
    response,
    error,
    isValidating,
    revalidate,
    mutate,
    size,
    setSize,
  }
}

Works for me for now. Please leave a comment if you think it can be improved or if there's a better way for doing it. Thanks!

[jackHedaya]

This is awesome, thank you!

One issue I'm encountering is paramsSerializer not being honored though. Have any ideas on how to fix this?

[bryanprimus]

is it fixed?

[OmkarK45]

Hey! Can you update this answer for the latest version of SWR?

My API sends pageInfo object as well data Data[] alongside it. To stop further loading, I need access to pageInfo object.