const listFetcher = async (url) => {
const res = await apiClient.get(url, {
params: {
siteKey: siteKey,
keyword: searchData,
page: page,
size: 30,
orderOption: sortModel.field || "createAt",
orderSeq: sortModel.sort || "desc",
},
});
console.log(res.data);
return res.data;
};
const {
data: listData,
error: listError,
mutate: listMutate,
} = useSWR(`/notices`, listFetcher);
useEffect(() => {
if (!listData) return;
}, [listData]);
useEffect(() => {
listMutate();
}, [page, sortModel, selectBoxState, searchData]);
안녕하세요! 현재 next.js 프로젝트로 swr 구현중인데,
현재는 useEffect로 mutate를 한번 더 하고 있어서 첫 렌더링 시, 총 2번의 api 호출이 되고 있습니다.
불필요한 api 중복 호출을 막기 위해
첫 렌더링 시에는 한번만 api 호출이 되고, 변수의 state값이 변경될 때마다 api 호출을 하기 위해서는 어떻게 하는것이 나을까요..? ㅜ
일단 listMutate()를 왜 하시는 건가요?
swr에는 조건부 렌더링이 있어서 원할 때만 렌더링할 수 있습니다.
https://swr.vercel.app/docs/conditional-fetching
답글
Sssekkk
2023.08.02listMutate()는
page, sortModel, selectBoxState, searchData값이 변경될 때마다 api 재호출하기 위해 사용하고 있는데,
혹시 또다른 방법이 있나요?
보여주신 링크로는 어떻게 처리해야 할지 모르겠습니다 ㅜㅜ
제로초(조현영)
2023.08.02false인 state를 하나 만들고 그 state가 true일 때 불러오시면 되고요. listMutate를 호출할 때 위에 state를 true로 만드시면 됩니다.
제로초(조현영)
2023.08.02아 근데 지금 생각해보니까
https://swr.vercel.app/docs/conditional-fetching#dependent
이렇게 하는게 훨씬 좋은 방법이긴하네요
Sssekkk
2023.08.02이렇게 작성을 말씀하시는 거죠~~?
제로초(조현영)
2023.08.02네 맞습니다!
Sssekkk
2023.08.02넵!!
위처럼 해봤더니, 정렬(sortModel)의 경우 호출이 바로 되지 않을때도 있는데,
이건 이전에 동일한 key값을 사용한 적이 있기 때문에 그런건가요..?
제로초(조현영)
2023.08.02이부분은 swr-devtools 설치해서 확인하시는게 좋을 것 같습니다
Sssekkk
2023.08.02아하 넵 감사합니다~!!!!!!!!X10000000
이렇게 하면 안되나요?
참고: https://swr.vercel.app/docs/arguments#multiple-arguments
답글
Sssekkk
2023.08.08헉... 이런 방법이 있었군요! 감사합니다!!!!!!!@!!!!!