Search code examples
javascriptflowtyperedux-sagayield

Cannot call `call` because: Either property `context` is missing in function flow error when using Redux-Saga?


I have a piece of code that is using the yield call api from redux saga which is calling a function and providing an input.

The function it is calling a simple POST function that returns a response when hitting an api.

The input for this function is a string called code, and that is set from a parameter in the url. We're using URLSearchParams to get a specific param from the URL based off a keyword.

The problem appears to be rooted in the fact that this URLSearchParams uses the window object to get the code. And that is causing an issue with yield call and giving me the following Flow error:

Cannot call call because: Either property context is missing in function 1 but exists in object type [2]. Or property context is missing in function 1 but exists in object type [3]. Or property context is missing in function

Here is the code:

const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const res = yield call(confirmCode, code); // This call is where the error is happening

And this is the confirmCode function it is calling:

export function confirmCode(code: string): Promise<TResp<void>> {
  return request(`/agent/v1/confirm-code/${code}`, {
    method: 'POST',
    mode: 'cors',
  });
}

Solution

  • params.get('code'); returns null | string so in fact your issue is that code passed into call isn't compatible with confirmCode.

    You can fix this in two ways either from the function definition which means you may want to add a default value to code

    export function confirmCode(code: ?string): Promise<TResp<void>> {
      return request(`/agent/v1/confirm-code/${code}`, {
        method: 'POST',
        mode: 'cors',
      });
    }
    

    Or check that code is valid before running call

    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    if (code) {
      const res = yield call(confirmCode, code);
    }