Problem with typescript while making request to SWR

Question

I want to know what is the type of this args that is being passed to my function below

const fetcher = async (...args) => {                                
~_  0   const res = await fetch(...args);                                                                       
    1                                            
~   2   return res.json();                                                                                      
    3 };

This is my fetcher function for SWR, and this is the error I'm getting

[tsserver 2556] [E] Expected 1-2 arguments, but got 0 or more.

SWR hook

const { error, data } = useSWR(`/api/albums/list/${user.id}`, fetcher)

Lin Du · Accepted Answer · 2021-01-04 11:55:01Z

20

This is TypeScript signature of fetch function:

declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

If you use functions rest parameters ...args, your fetcher function can be called with zero parameters like this and tsc will not report errors.

fetcher();

Or, many parameters(like four parameters):

fetcher("localhost", {}, {}, {});

Then, you use spread syntax to call the fetch API. The parameter of spread does not satisfy the function signature of fetch(the parameter can NOT be zero or more than two), so tsc reports an error.

So you'd better modify it like this:

const fetcher = async (
  input: RequestInfo,
  init: RequestInit,
  ...args: any[]
) => {
  const res = await fetch(input, init);
  return res.json();
};

package version: "typescript": "^4.1.3"

answered Jan 4, 2021 at 11:55

Lin Du

104k139 gold badges341 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SimonW Over a year ago

Since you're not doing anything with additional arguments beyond the first two, wouldn't it be better just to leave off the ...args entirely?

Lin Du Over a year ago

@SimonW Yes, I’m not sure if the fetcher needs other parameters. So I keep ...args

chalo Over a year ago

Hi, do you have an example of how it would be used? I am left wondering, how should I make the call to the fetcher passing it the init object with its values. Example: const {data, error} = useSWR("/some/path", fetcher("some/path", {headers: {}})) What would be the correct way?

Collectives™ on Stack Overflow

Problem with typescript while making request to SWR

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related