SWR hook with next.js - typescript / issue

Question

I've posted some questions about SWR hook here, because in my journey trying to use it has been a little bit hard since i'm having some problems with it

Now this time the error seems small.

What i'm trying to do is to git a breakpoint in my API triying to get some data, ( and i'm using axios by the way ) now the problem is that, i have to destructure {data} from the useSWR because that's the data i'm receiving from axios, and i think that is causing a problem with an argument that i have to pass to the hook in order to make everything work.

Let me show you some code

Using useSWR

const Part1 = () => {
  const router = useRouter();

  const [searchBar, setSearchBar] = useState<boolean>(false);

  const [userId, setUserId] = useState<dataObject>({});
  const [results, setResults] = useState<string>("");

  // Searchbar users

  useEffect(() => {
    const auth: dataObject = JSON.parse(localStorage.getItem("Auth"));
    setUserId(auth);
  }, []);

  const { data }: multipleUsers = useSWR(
    () => "http://localhost:5000/api/user/allU/" + userId.user.id,
    fetcher,
    "",
    data
  );

So as you can see, the last argument i pass to the function, is the name data because if i don't it would give me error ( as a mentioned before, i've posted a question about that problem ), and is this

Block-scoped variable 'data' used before its declaration.ts(2448)
Part1.tsx(41, 11): 'data' is declared here

Goal: what is going on there and how can i fixe that problem ? what is causing this specifically and why ?

Thanks for your time !!

UPDATE

I've changed my code, and this is the error that appears

 const { data }: multipleUsers = useSWR<user[]>(
    () => "http://localhost:5000/api/user/allU/" + userId.user.id,
    fetcher,
    ""
  );

ERROR

Expected 4 arguments, but got 3.ts(2554)
use-swr.d.ts(4, 99): An argument for 'Data' was not provided

Eyal · Accepted Answer · 2021-05-23 22:15:34Z

2

Here's the useSWR function signature (source):

function useSWR<Data = any, Error = any>(
  ...args:
    | readonly [Key]
    | readonly [Key, Fetcher<Data> | null]
    | readonly [Key, SWRConfiguration<Data, Error> | undefined]
    | readonly [
        Key,
        Fetcher<Data> | null,
        SWRConfiguration<Data, Error> | undefined
      ]
): SWRResponse<Data, Error>

You can pass the expected data type as the first type parameter, like so:

const { data } = useSWR<User[]>(
  () => "http://localhost:5000/api/user/allU/" + userId.user.id,
  fetcher
)

Also note that you pass the function 4 parameters, but there's no override that supports 4 parameters, the maximum is 3, but could be less of course.

Edit:

Take a look at the args type again:

| readonly [Key]
| readonly [Key, Fetcher<Data> | null]
| readonly [Key, SWRConfiguration<Data, Error> | undefined]
| readonly [
    Key,
    Fetcher<Data> | null,
    SWRConfiguration<Data, Error> | undefined
  ]

There's only one variation which has 3 arguments, and it's this one:

readonly [
    Key,
    Fetcher<Data> | null,
    SWRConfiguration<Data, Error> | undefined
  ]

Take a look at the 3rd argument type:

SWRConfiguration<Data, Error> | undefined

Without even checking the source-code, it's probably some kind of object. What did you pass? An empty string: "".

Either remove this argument or pass a config object.

edited May 23, 2021 at 22:15

answered May 23, 2021 at 21:09

Eyal

1,7193 gold badges27 silver badges50 bronze badges

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

11 Comments

Diego Davincci Over a year ago

I changed my code to `````` const { data }: multipleUsers = useSWR<user[]>( () => "localhost:5000/api/user/allU" + userId.user.id, fetcher, "", ); `````` But it would complain because there's no 4 argument

Eyal Over a year ago

That's right, because you can not pass it 4 arguments, because it does not support a 4th argument, as I wrote in my answer.

Eyal Over a year ago

Please update your post with the updated code and the full error message.

Eyal Over a year ago

@Diego You've accidentally suggested an edit to my answer. Please edit your own question post.

Eyal Over a year ago

TypeScript is not very simple and there's lots of places to get lost. Glad I could help!

|

Collectives™ on Stack Overflow

SWR hook with next.js - typescript / issue

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related