처음엔 react-query를 활용하여 데이터 페칭을 하기 위한 코드가 많기 때문에, key값을 한번에 모아서 관리 하는게 좋지 않을까 생각하여, apis폴더 안에 ⇒ queryKeys를 만들어서 key들을 함께 위치해 두었었다.
그런 후에, user와 관련된 api요청 코드를 user.tsx에 적고 있었는데, user와 관련된 api 요청 코드가 많았었기에 query 코드가 많아질 수록 가독성이 떨어진다는 사실을 인지하게 되었다.
GitHub - depromeet/antoon-web: 📈 개미는툰툰 :: 웹툰 독자를 위한 커뮤니티 플랫폼
그래서 또 다른 react-query 관리 하는 방식을 찾게 되었는데,
두번째 방식은 query key들을 관리 하는 방식이 아닌, api 요청 코드를 좀 더 폴더 구조화해서 관리하는 느낌이었다.
어떻게 보면 react-query도 반복 되어져서 쓰여지는 친구이다보니, 이 친구를 hooks로 생각하고 hooks 폴더 안에 queries 폴더를 만드는 것이다.
그래서 queries 폴더 안에 각 도메인 별로 폴더를 나눈 후
(users, comments 등등) 그 안에 파일로 코드를 구분하여 작성한다.
여기서는 queryKeys를 따로 빼지 않았고, 그 이유는 아마 파일로 따로 api 코드를 관리하기 때문에, queryKeys가 헷갈리게 복잡해지지 않기 때문이 아닐까 생각했다.
GitHub - DDD-Community/jsonWeb-front: DDD 8기 웹 3팀 : EXIT🔐 - 방 탈출 카페정보 & 추천 서비스