CODEWITHSUNDEEP
javascriptnext.jsswr
Eric Pezzulo
Eric Pezzulo

Reputation: 399

useSWR for mutiple requests

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?

Upvotes: 4

Views: 12709

Answers (2)

Chemi Adel
Chemi Adel

Reputation: 2165

try

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

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

Upvotes: 12

Evert
Evert

Reputation: 99687

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.

Upvotes: 7

Related Questions