swr 구현 질문입니다.
703
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 호출을 하기 위해서는 어떻게 하는것이 나을까요..? ㅜ
답변 2
0
일단 listMutate()를 왜 하시는 건가요?
swr에는 조건부 렌더링이 있어서 원할 때만 렌더링할 수 있습니다.
https://swr.vercel.app/docs/conditional-fetching
0
listMutate()는
page, sortModel, selectBoxState, searchData값이 변경될 때마다 api 재호출하기 위해 사용하고 있는데,
혹시 또다른 방법이 있나요?
보여주신 링크로는 어떻게 처리해야 할지 모르겠습니다 ㅜㅜ
0
false인 state를 하나 만들고 그 state가 true일 때 불러오시면 되고요. listMutate를 호출할 때 위에 state를 true로 만드시면 됩니다.
0
const listFetcher = async () => {
//매개변수로 url받아오지 않고 직접 url 작성.
const res = await apiClient.get(`/notices`, {
params: {
siteKey: siteKey,
keyword: searchData,
page: page,
size: 30,
orderOption: sortModel.field || "createAt",
orderSeq: sortModel.sort || "desc",
},
});
console.log(res.data);
return res.data;
};
//listMutate 대신 key값으로 해당 객체들 넣어줌.
const {
data: listData,
error: listError,
mutate: listMutate,
} = useSWR(`/notices?page=${page}&sortModel=${sortModel}&selectBoxState=${selectBoxState}&searchData=${searchData}`, listFetcher);
useEffect(() => {
if (!listData) return;
}, [listData]);이렇게 작성을 말씀하시는 거죠~~?
0
넵!!
위처럼 해봤더니, 정렬(sortModel)의 경우 호출이 바로 되지 않을때도 있는데,
이건 이전에 동일한 key값을 사용한 적이 있기 때문에 그런건가요..?
0
const { data: listData, error: listError, mutate: isMutate } = useSWR(['/notices', { siteKey, searchData, page, sortModel }, async ([url, { siteKey, searchData, page, sortModel }]) => {
const res = await apiCient.get(url, {
params: {
siteKey: siteKey,
keyword: searchData,
page: page,
size: 30,
orderOption: sortModel.field || "createAt",
orderSeq: sortModel.sort || "desc",
}
});
return res.data;
});
이렇게 하면 안되나요?
참고: https://swr.vercel.app/docs/arguments#multiple-arguments
일렉트론으로 앱을 하나 만들었는데
0
296
0
속았어요 ㅠㅠ, 왕초보인데, gui 이었으면..
0
395
0
비전공 국비수료생이 볼 수 있을까요?
0
392
1
로드맵으로 프론트엔드 전향이 가능할까요?
0
415
1
페이지네이션 랜더링 질문
0
447
1
요즘시장에 MERN스택으로 개발하는 프로젝트가 많이 있는지 궁금합니다.
0
459
1
서버공부 (Java spring)
0
436
0
신규 강의가 비슷하게 나왔던데
0
432
0
다이아그램 자료 안뜨는데요.
0
426
0
업데이트로 인해, Adroid 설정부분이 조금 다릅니다.
1
445
1
선생님.. 구현하고자 하는게 있는데 도저히 구글링해도 어떻게 손을 봐야할지 모르겠습니다..
0
529
2
_song.html 세션 문제?
0
509
2