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 propertycontext
is missing in function 1 but exists in object type [2]. Or propertycontext
is missing in function 1 but exists in object type [3]. Or propertycontext
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',
});
}
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);
}