No overload matches this call in saga call effect

Question

I want to pass action.url string as a parameter of topicDummy function which return Promise, but It keeps show me

No overload matches this call.
  The last overload gave the following error.
    Argument of type '<TopicData>(url: string) => Promise<TopicData>' is not assignable to parameter of type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }'.
      Type '<TopicData>(url: string) => Promise<TopicData>' is missing the following properties from type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }': context, fnts(2769)
effects.d.ts(499, 17): The last overload is declared here.

these are my whole codes.

export type TopicData = {
  name: TopicName
  data: CardData[]
}
const dummyTopicData: TopicData = Object.assign({
  topic: 'etc',
  data: dummyData()
}, )
function topicDummy<TopicData>(url: string): Promise<TopicData> {
  return new Promise((resolve, reject) => {
    setTimeout(() => 
      dummyTopicData 
    , 700);  
  })   
}

function* fetchTopic(action: DispatchAction){
  try{
    yield put(topicCreator.load()); 
    const topicList = yield call(topicDummy, action.url); // <- complain here. 
    yield put(topicCreator.success(topicList));
  } catch(error){
    throw new Error(`Error exist in fetchTopic function`); 
  }
} 

Answer 1

How to repair a 'TS2769: No overload matches this call' might be relevant,

It suggest that instead of

import {call} from "redux-saga/effects";

to use

import * as Effects from "redux-saga/effects";

const call: any = Effects.call;

Also have a look at https://github.com/redux-saga/redux-saga/issues/2018

---

You will also need to resolve the promise at one point, and you need to "return" the data if you want to use them.

So change

return new Promise((resolve, reject) => {
    setTimeout(() => 
      dummyTopicData 
    , 700);  
  }) 

to

return new Promise((resolve, reject) => {
    setTimeout(() => 
      resolve(dummyTopicData)
    , 700);  
  }) 

Answer 2

I think I had the same problem, and I found the solution in my case.

I had this code:

    const {dashboardId} = yield call(
      createProgramDashboard,
      programId,
      name,
      type
    );

I got a red squiggly line under createProgramDashboard, with this error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '(programId: string, name: string, type: REPORT_TYPE) => Promise<Dictionary>' is not assignable to parameter of type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }'.
      Type '(programId: string, name: string, type: REPORT_TYPE) => Promise<Dictionary<any>>' is missing the following properties from type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }': context, fnts(2769)
effects.d.ts(499, 17): The last overload is declared here.

It turns out that the first parameter I was sending in, programId, was a number, while createProgramDashboard was expecting a string.

Apparently this error is displayed when the types of some of the arguments sent to the call function (in my case programId: number) don't match the types of the params expected (in my case programId: string) by the function being called, (in my case createProgramDashboard).

So this fixed the error:

    const {dashboardId} = yield call(
      createProgramDashboard,
      programId.toString(),
      name,
      type
    );