Argument of type (key: string, id: string, pagination: number) => Promise<void> is not assignable to parameter of type Boolean

Question

Not sure what is the matter here, but I am trying to follow this documentation:

https://swr.vercel.app/

with this setup of my own:

import React, { useEffect } from 'react'
import PatientsTable from 'components/patients/PatientsTable'
import useSWR from 'hooks/useSWRWithToken'
import Feedback from 'components/feedback'
import fetchWithToken from 'libs/fetchWithToken'

function Patients(props) {
  const {page, rowsPerPage, onPageChange, query, accessToken } = props

  const fetcher = async (key: string, id: string, pagination: number)=> {
    fetchWithToken(key, accessToken, [id, page: pagination])
  }
  
    const { data: patientsList, error: patientsListError, isLoading } = useSWR(
      [`patients/${id}`, id, pagination], fetcher)
  

  return (
    <>
      <Feedback />
      <PatientsTable
        patientsList={patientsList}
        patientsListError={patientsListError}
      />
    </>
  )
}

Patients.layout = 'fullScreen'
Patients.auth = true
export default Patients

But I get the following error for fetcher:

Argument of type (key: string, id: string, pagination: number) => Promise is not assignable to parameter of type Boolean. The types returned by 'valueOf()' are incompatible between these types. Type 'Object' is not assignable to type 'boolean'

This is the fetchWithToken function:

import axios from 'axios'
import AlunaLogger from '../libs/AlunaLogger'
import env from '@beam-australia/react-env'

const fetchWithToken = (url: string, token: string, params: object = null) => {
  const logger = AlunaLogger('fetchWithToken')

  // let data = new FormData()

  return axios({
    baseURL: `${env('PUBLIC_ALUNA_API')}/`,
    method: 'GET',
    url,
    params,
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  })
    .then((res) => res.data)
    .catch((error) => {
      console.log(error.response.data)

      logger.error('fetch !res.ok', error.response.data)
      throw error.response
    })
}

export default fetchWithToken

Answer 1

If I read correctly, in the example on the website you listed. Their fetcher function had a returned a json while yours returns a pending void promise

Would

  const fetcher = async (key: string, id: string, pagination: number)=> {
    return fetchWithToken(key, accessToken, [id, page: pagination])
  }

or

  const fetcher = async (key: string, id: string, pagination: number)=> {
    return await fetchWithToken(key, accessToken, [id, page: pagination])
  }

fix your code?