useSWR for mutiple requests

Question

I'd like to implement useSWR in my web app and remove axios from the project, but I don't see how I can use SWR multiple times on the same page. I thought I could use two hooks:

const { userData, userError } = useSWR(url, fetcher)

const { coinData, coinError } = useSWR(url,fetcher)

but that doesn't work. (I guess you need to use { data, error })

This is the code I currently have, but I'd like to make another get request to my database with SWR.

  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  const { data, error } = useSWR(
    `https://api.coingecko.com/api/v3/coins/${coinURL}`,
    fetcher
  );

  if (error) {
    return <div>failed</div>;
  }
  if (!data) {
    return <div>Loading</div>;
  }
  return <div>{data.name}</div>;

What's the best way to make multiple requests on the same page with useSWR?

Does this answer your question? [ES6/ES2015 object destructuring and changing target variable](https://stackoverflow.com/questions/34904523/es6-es2015-object-destructuring-and-changing-target-variable) — brc-dd, Nov 06 '21 at 20:45

Chemi Adel · Answer 1 · 2021-11-06T16:10:15.327

8

try

const { data : userData, error: userError } = useSWR(url, fetcher)

const { data : coinData, error: coinError } = useSWR(url,fetcher)

edited Nov 06 '21 at 16:10

answered Nov 06 '21 at 16:04

Chemi Adel

1,964
1
10
18

score 6 · Answer 2 · answered Nov 06 '21 at 16:04

6

The issue is that you are re-using the same constant variable names. You can just store the result of useSWR in an object:

 const res1 = useSWR(..);
 const res2 = useSWR(..);

And then reference each property like normal: res1.loading, etc.

answered Nov 06 '21 at 16:04

Evert

93,428
18
118
189

useSWR for mutiple requests

2 Answers2