Question

112

Problem with typescript while making request to SWR

rated 0 times [ 114] [ 2] / answers: 1 / hits: 7309 / 4 Years ago, sun, october 4, 2020, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

1 Uncaught SyntaxError: Unexpected identifier (Typescript for front end dev without framework)

Mon, Feb 25, 19, 00:00, 5 Years ago

View All

answered 4 Years ago ronaldo · Accepted Answer

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"