알아두면 유용한 react-query 활용 팁

1. react-query에서 랜더링 할 때마다 api를 계속 요청합니다.

react-query를 처음 사용해 보는데요. query-key에 대해서 데이터를 캐싱해놓고 꺼내서 사용할 수 있다고 해서 사용해보았습니다. 데이터가 이미 캐싱되어 있고 데이터에 변화가 없는 상태인데도 계속해서 데이터를 새로 불러오도록 API를 요청합니다. cacheTime이라는 것이 있는데 이것도 기본 5분으로 설정되어 있다는데 왜 안되는 걸까요?

답변

cacheTime말고 staleTime이라는 것이 있습니다. staleTime은 해당 데이터가 얼마나 신선(?) 한지를 나타내는 기간입니다. default값은 0으로 되어있어서 매번 data가 stale하다고 판단되어 API를 요청하는 것입니다. staleTime을 주면 해당 기간동안 API를 요청하지 않을거에요! cacheTime, staleTime 관련 글: https://2ham-s.tistory.com/407 공식문서 내용입니다. staleTime: number | Infinity - Optional - Defaults to 0 - The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on. - If set to Infinity, the data will never be considered stale

2. react-query에서 응답 데이터를 변환하는 방법

혹시 API의 응답결과를 react-query에서 원하는 형태로 변경시켜 줄 수 있나요? API 응답의 데이터에는 number[] 의 type입니다. 이걸 Set으로 변경시켜주고 싶어서 아래와 같은 형태로 사용하고 있습니다. (이름은 보안을 위해 변경했습니다) 근데 이렇게 사용하면 해당 데이터를 추가하거나 삭제할때도 뭔가 이상해 집니다. API의 응답형태를 아예 변경해야하는걸까요?

답변

data selector를 사용해보시면 어떨까요? https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-3#query-data-selectors 위의 코드를 변경하면 function useTest() { const { data } = useQuery('test', getMyData, select: { select: res => new Set(res), }); // API 요청 return data; } 이런식으로 한번 해보세요! 그리고 추가로 TMI useQuery에서 queryKey는 Array로 적는것이 권장됩니다!!

3. react-query 랑 next js 서버 과부화 문제?

안녕하세요. 기존에 사용하던 next 프로젝트에 얼마전에 react-query를 도입했는데, 과부하 테스트를 해보면 next 서버가 자꾸 죽습니다. 각 페이지와 api 별로 과부하 테스트를 해보고 있는데 특정 페이지에서만 계속 죽는게 에러 로그를 보면 메모리 문제인것 같아요. 사용하고 있는 react-query 버전은 3이고 next는 12버전을 사용하고 있어요. 혹시 어떤 원인인지 짐작이 가시는분 있나요?

답변

혹시 해당 페이지가 서버 사이드 로직에서 queryClient를 사용하고 있나요? 만약 그렇다면 클라이언트로 queryClient를 보내준후 queryClient를 직접 clear 해주셔야합니다. react-query v3에서 한번 논의된 케이스인 것 같아요. (https://github.com/TanStack/query/discussions/3284)

4. react-query를 이용해서 필요할 때만 데이터를 가져오고 싶어요.

회원인 유져는 회원의 추가 정보들을 가져오고, 비회원인 경우는 추가 정보는 아예 조회하지 않도록 하고 싶어요 어떻게 하면 좋을까요????

답변

enable 을 사용해보면 어떤가요? enable을 통해 해당 쿼리를 가져올지 말지 여부를 결정할 수 있어요 아래는 공식문서의 코드입니다. email을 통해 유저의 정보를 가져오고 id의 여부에 따라 추가 데이터를 가져오는 코드입니다. const { data: user } = useQuery(['user', email], getUserByEmail) const userId = user?.id const { isIdle, data: projects } = useQuery( ['projects', userId], getProjectsByUser, { enabled: !!userId, } ) https://react-query-v3.tanstack.com/guides/dependent-queries

5. react-query fetching 스켈레톤 오류

react-query의 isFetching 값을 사용해서 데이터를 fetching 할 때 스켈레톤을 보여주려고 하는데요, 제가 의도하지 않은 타이밍에도 스켈레톤이 뜹니다. 이미 데이터가 한 번 로딩된 이후에도 다시 스켈레톤이 표시됐다가 데이터가 불러와지는데 왜 그런지 아시는 분 계실까요?

답변

안녕하세요. react query에서 isFetching은 캐싱된 데이터가 있고 데이터를 refetching 하는 경우에도 값이 true 입니다. 그래서 이미 데이터가 표시되고 있더라도 해당 데이터를 refetching 하게 되면 스켈레톤이 보일 수 있을 것 같아요. isLoading은 캐싱된 데이터가 없이 fetching 할 때만 값이 true이기 때문에 isLoading을 대신 사용하시면 말씀하신 문제는 발생하지 않을 것 같습니다. 실제로도 스켈레톤 표시에는 isLoading값을 주로 쓰는 걸로 알고있어요.