useSWR로 multiple items fetch (Promise.all)

https://swr.vercel.app/ko

데이터 가져오기를 위한 React Hooks – SWR

 

 

useSWR을 사용해서 API를 여러번 콜해서 데이터를 받아오고 싶은데, 이 때 useSWR 자체를 여러번 map해서 돌리면 다음과 에러가 난다. "Rendered fewer hooks than expected. This may be caused by an accidental early return statement"

 

 

위의 에러를 발생시킨 코드이다. 지금 보니 이렇게 돌리면 useSWR hook의 결과값인 data도 여러개이고 error도 여러개인데 어떻게 처리하려고 이렇게 코드를 짰는지 모르겠다. 에러가 날 만한 코드이다.

const result = itemList.map((item:any) => {

    const url = `url/${item.id}`;
    const { data, error, isValidating } = useSWR(url, fetcher);
      
    return { data }
}

return result;

 

 

수정한 방법은 useSWR hook을 여러번 사용하는 것이 아니라, hook 자체는 한 번만 사용하되 리스트 형태의 url을 Promise.all로 처리하는 fetcher를 작성하는 것이다.

    const items = ['id1', 'id2', 'id3', 'id4', 'id5'];
    
    const urls = itemList.map((item:any) => 
        `url/${item.id}`
    )
    
    const fetcher = (urls: string[]) => 
        Promise.all(
            urls.map((url:string) => {
                return axios.get(encodeURI(url))
                    .then((res) => {
                        console.log('res', res); 
                        return res.data.contents
                    })
            })
        )
    const { data, error, isValidating } = useSWR(urls, fetcher);