useQuery 응답 순서 문제 (query key의 일부가 다른 경우)

useQuery에서 API 호출에 필요한 parameter 가 달라지는 경우에 query key의 일부를 변경하여 재호출을 하는 것으로 알고 있는데요. useQuery({ queryKey: [ reactQueryKeys.search, searchParams, ], queryFn: () => requestSearch( searchParams, ), }) (여기서 searchParams 가 상태 값이어서 달라지는 값입니다.) parameter만 다르고 찌르는 곳이 같은 API 요청을 2번 연속으로 한다고 했을 때, 첫 번째 요청과 두 번째 요청의 결과가 요청한 순서대로 오는 것을 보장할 수 있을까요? 제가 느끼기에는 첫 번째 요청과 두 번째 요청이 서로 독립적으로 동작한다고 느껴졌거든요. 만약 응답 순서를 보정하지 않는다면 보장할 수 있는 방법이 있을지 궁금합니다. 검색어 자동완성이나, 지도를 움직일 때마다 API 요청을 하는 경우 응답 순서 문제가 발생할 수 있을 것 같아서요.

next.js에서 페이지 접근 권한 관리 방법

현재 회사에서 next로 개발중인데요! 각 page마다 접근 관리를 개선해보려고 합니다. 현재 각 page에 해당하는 component에 내 정보가 있는지 없는지 확인해서 redirect해주는 custom hook으로 접근을 제한하고 있는데, 이는 한눈에 들어오지도 않고 한눈에 들어오지도 않고 일일히 page마다 hook을 넣어줘야해서 비효율적인거 같습니다! 따라서, react-query key를 관리하는 방식처럼 한 파일에 모든 route를 모아놓고, _app.tsx에서 route 체크를 통해 application 코드는 건들지 않고 route.ts만 수정하는 방법으로 각 route의 접근 설정을 해보려고 하는데 혹시 더 좋은 방법이 있을까요???

ReactQuery 사용 중에 url이 변경되는 경우, 자동으로 리페칭되나요?

회사에서 react query를 도입하는 중입니다. 기존 코드에서는 서로 다른 페이지에서 같은 api를 지속적으로 요청하여 데이터를 받아오고 있습니다. 받아오는 데이터가 변경이 거의 없는 데이터라서, react-query의 캐싱기능을 사용하여, 불필요한 api 요청을 방지하려고 했습니다. 그런데 개발자 도구 네트워크탭에서 확인해보니, 페이지 url 경로가 변경될 때마다, 데이터가 fresh 상태임에도 불구하고 계속하여 데이터를 요청하는 api를 보내고 있습니다. staleTime도 60분으로 설정했고, 데이터가 fresh 상태임도 확인해보았습니다. 혹시 옵션값과는 상관없이, url이 변경되었을 경우(ex localhost:3000/main -> /setting) 데이터 리페칭이 자동으로 일어나는 건가요? url이 변경되었을 때, 데이터가 fresh 상태라면 리페칭을 하지 않게 하고 싶습니다.

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

react-query 에서 useInfiniteQuery 를 첫번째 cursor 부터 다시 호출하는 방법이 궁금합니다

리액트 쿼리에서 useInfiniteQuery를 사용하고 있습니다. cursor 리셋하고 처음부터 다시 호출하려면 어떻게 해야 하는지 도움 요청드립니다.

리액트 쿼리 refetch vs invalidate

안녕하세요! 리액트 쿼리를 통해 페이지 네이션을 구현했습니다. 특정 페이지에서 데이터가 변경됐을 때 해당 페이지의 데이터를 다시 가져와서 페이지의 ui를 변경해주어야 합니다. 이때 refetch 또는 invalidate를 사용할 수 있는데 결과는 같은 것 같더라구요. 결과는 같지만 refetch와 invalidate의 동작이나 성능 또는 어떤 방면에서 차이가 있는지 문득 궁금해졌습니다! 혹시 데이터를 새로 가져올 때 어떤 함수를 쓰면 좋을까요? 답변을 통해 좋은 인사이트를 얻고 싶습니다! 감사합니다.

react-query & redux-toolkit을 이용한 user 상태관리 질문

react-query를 이용해서 user정보를 받아와 return data를 이용해 그대로 user 정보를 사용했는데 유저 정보를 수정하려다 보니 setQueryData메서드를 이용해서 onChange로 변화값 받아서 수정 후 업데이트를 진행해야 하는지 아니면 useQuery로 받은 user 정보를 redux-toolkit을 이용해 등록 후 dispatch로 상태관리 하다 수정 api를 실행해야하는지 궁금합니다.

next.js swr vs react-query 어떤 라이브러리를 선택해야 할까요?

안녕하세요, next.js로 처음 프로젝트 시작하는 초보 개발자입니다! 지금까지 React로만 개발해오고 상태관리 라이브러리는 Redux만 사용해봐서 이번에 새로운 라이브러리를 사용해보려고 합니다. next.js에서는 swr이나 react-query를 자주 사용한다고 하는데 어떤걸 쓰면 좋을까요? 장단점이나 여러가지 알려주시면 감사하겠습니다🙌

Next 13과 react 18 서버 컴포넌트 관련 질문 (질문이 좀 길어요)

안녕하세요, 요즘 next 13과 react 18 서버 컴포넌트에 대해서 본격적으로 파고 있는데 궁금한 점들이 여러가지 떠올라서 글 올립니다. 1. data fetching 방식의 변경 우선 기존에는 동적인 data fetching의 경우, getServersideProps를 통해서 페이지의 root에 전달해주고는 방식이 일반적이었는데 서버에서만 돌아가는 서버 컴포넌트가 나오면서 data fetching을 컴포넌트 단위로 할 수 있게되면, 기존에 사용하던 getServersideProps 같은 유틸 함수들은 사라지는건가요? 기존에는 정적 데이터면 getStaticProps, 동적 데이터면 getServersideProps, 유저 상호작용이 필요한 데이터면 client side useEffect를 많이 사용했는데 next 13부터는 이게 뭔가 뒤섞이는 것 같아서 혼란스럽네요. next 13을 위한 data fetching 패턴이나 방법론이 있나요? 2. 기존에 사용하던 상태 관리 프레임워크의 변화 위와 어느정도 연결되는 이야기입니다. 기존에 react-query를 많이 사용했는데 next 13부터 컴포넌트 레벨로 데이터를 요청할 수 있고 또 next 차원에서 요청 중복 제거를 지원하게되면 react-query 처럼 서버 상태관리와 캐싱을 강점으로 내세우는 프레임워크의 역할을 어떻게 되는건가요? 서버 상태를 컴포넌트 레벨에서 가져올 수 있다고 해도, 여전히 전역 상태 관리가 필요할 것 같은데 recoil, redux, zustand 같은 상태 관리 프레임워크도 계속 쓰게되는 것일까요? 계속 쓰게 된다고 하면 서버 컴포넌트와의 호환성은 어떻게 되는건가요? 만약 전역 상태 관리를 써야하는 컴포넌트라면 서버 컴포넌트가 될 수 없는 것인가요? 3. 서버 구성의 변경 다른 곳은 모르겠지만, 저는 next 백엔드를 단순히 요청을 전달하는 용도로만 쓰고 실제로 중요한 로직은 다른 백엔드 서버에서 처리하는 구조를 가지고 있었습니다. 하지만, next 13을 보니 서버 컴포넌트에서 DB 연결을 직접해서 데이터를 가져오는 예시들도 있더군요. 사이드 프로젝트라면 모르겠지만, 실 서비스에서도 서버 컴포넌트 - DB 직접 연결 이라는 구조가 성립할 수 있는건가요? 기존에 데이터를 취합하고 내려주던 백엔드 서버의 역할이 생략되는거라고 생각해도 되는건가요? 4. 왜 다시 20년 전으로 돌아가는거죠 제가 20년 동안 개발한 것은 아니지만, 예전에는 웹페이지를 서버에서 완전히 로드해서 내려주는 형태를 가지고 있었다고 배웠습니다. 그러다가 개개인의 기기가 스펙이 좋아지면서 서버 부하를 줄이고 클라이언트 쪽에서 역할을 분담하는 방식이 떴다고 들었어요. react도 처음에는 이런 프레임워크로 나왔다고 알고 있습니다. 그러다가 next, remix 같은 프레임워크들이 서버사이드 렌더링을 적극적으로 장려하면서 다시 회귀하고 있다고 들었습니다. 최근에는 react 마저 서버 컴포넌트를 발표했잖아요. 왜 이제와서 다시 서버 쪽에서 페이지를 로드하는 방식을 추진하고 있는건가요? 질문을 적고보니 좀 길어졌는데, 서핑을 좀 해봐도 마땅히 도움이되는 글이 별로 없어서 현직자들은 어떻게 생각하시는지 의견을 얻고자 질문 올립니다!

react-hook-form과 React Query를 데이터 조회용도로도 함께 쓰는 것이 과연 효율적일까요?

안녕하세요. 실무에서 react-hook-form과 React Query를 함께 사용하고 있는 FE 개발자입니다. 먼저 제가 알기론 react-hook-form은 CRUD 중, C(생성)와 U(수정)를 위해 쓰는 경우, 폼 제출 시 React Query의 mutate 함수를 호출하게끔 코드를 짜는 것이 일반적인 것으로 알고 있습니다. 이 때에는 분명 validation 처리 등의 작업을 (useState, useRef와 같은 react 내장 hook 대비) 효율적으로 진행할 수 있다는 점을 충분히 이해하고 있어요. 이제 궁금한 점은 데이터를 조회하는 경우입니다. 과연 useState, useRef와 같은 react 내장 hook 대비 react-hook-form을 사용하는 것이 효율적일까요? 예컨대 키워드 검색과 페이지네이션 기능이 들어간 목록에서 데이터를 조회해오는 경우, react 내장 hook + React Query를 사용한 코드와 react-hook-form + React Query를 사용한 코드를 각각 작성해보았습니다. (아래 코드 첨부) 제가 생각한 결과는 아래와 같습니다. 1. 검색어 입력, 페이지네이션 기능 사용간 리렌더링 횟수 기준으로 성능적인 차이가 없습니다. (동일) 2. 조회 요청이므로 입력에 대한 validation 처리 코드가 필요하지 않습니다. (동일) 3. 코드량은 react-hook-form보다 react 내장 hook을 사용한 것이 더 적습니다. (react 내장 hook이 우위) 위 결과를 토대로 저는 아무리 프로젝트에서 react-hook-form을 도입했다고 하더라도 데이터를 조회해오는 상황에서는 react 내장 hook을 사용하는 것이 좀 더 가독성도 좋고 유지보수성도 높을거란 생각이 드는데요. (물론 제가 react-hook-form 코드를 효과적으로 작성하지 못했을 수도 있습니다. 혹시 그렇다면 이 부분도 지적 부탁드려요!) 여러분들의 생각은 어떠신가요?

웹 페이지에 채팅 기능을 추가하려고 하는데 React Query 를 사용해도 문제 없을까요 ?

현재 Web 에서 React Query 와 Context 를 사용해서 상태 관리를 하고 있습니다. 새로 채팅 기능을 추가하려고 하는데 메세지의 상태 관리를 React Query 를 활용해서 구현해도 문제 없을까요 ? 설계해 보니 큰 문제 없어 보이는데 왠지 어색해서 질문합니다.

invalidateQueries를 사용했을 때, UI가 Re-Render 되지 않습니다.

안녕하세요, 현재 useQuery를 사용해서 인증과 동시에 유저 데이터를 가져오고 있고, 이 유저 데이터 중 닉네임을 변경하는 코드를 만들고 있어요. 제가 원하는 동작은 닉네임을 변경했을 때, 변경된 닉네임으로 Re-Render 되어서 화면에 보여지는 거예요. 문제는 invalidateQueries를 사용해서 캐시를 무효화해도, 변경된 닉네임으로 화면이 바뀌질 않아요. React-Query DevTools에선 캐시 데이터가 변경된 것을 확인했고, useMutation 훅을 사용해서 닉네임을 변경해봐도 결과는 같았습니다. 이상하게도, 사이트의 네비게이션 바의 프로필 UI에선 닉네임이 즉시 변경되었는데요, 이 네비게이션 바 외에선 자동으로 Re-Render 되지 않습니다. 이와 관련해서 아시는 분이 계실까요?

코인마켓캡은 어떻게 많은 양의 데이터를 계속 업데이트하는 걸까요

React query 연습할겸 업비트api로 코인리스트를 만들어 보고있는중 입니다. 그냥 단순히 리스트만 나오는게 아니라 현재가, 변동률, 변동가격 시각총액등 데이터를 코인마켓캡처럼 1초단위로 계속 업데이트 해주고 싶은데 한번에 보는 코인리스트의 수가 10개만 넘어가도 too many requests경고문이 뜨네요... 그래서 Pagnation으로 코인리스트 개수를 10개로 합의보고 refeting을 1초단위로해봤는데 페이지를 바꿀때 어김없이 too many requests가 떠버리네요... 업비트api 특성상 꼭 url에 코인이름을 담아 보내야하고(코인전체 정보 가져오기 불가능) 제가 필요한 데이터들이 두개의 api에 나눠져있어서(코인정보 api, 코인 분봉 정보 api) 코인 하나의 정보가 필요하면 fetching을 두번하는 꼴이라(코인 10개면 fetching 20번...) 이해하긴 하지만 코인마켓캡이나 다른 코인거래소들은 어떻게 그렇게 많은 양의 데이터를 계속 업데이트하는데 too many requests가 안뜰까요? 분명 저가 알지못하는,놓친 무언가가 있는거 같은데 감을 못잡겠네요... 원리가 궁금합니다.

useQuery로 가져온 데이터를 자식 컴포넌트에서 어떻게 사용하는게 좋은지 궁금합니다.

useQuery를 사용해 부모 컴포넌트에서 데이터를 가져온 후, 해당 데이터를 자식 컴포넌트에서 사용할 때 세 가지 방법 중 어떤 것이 좋은지 궁금합니다. 1. 부모 컴포넌트에서 내려 받는다. 2. 자식 컴포넌트에서 query 요청을 한 번 더 한다. 3. 쿼리 클라이언트에서 캐싱된 값을 사용한다. 다른 분들은 이런 상황에서 어떤 방식으로 데이터를 받아오는지 알고 싶습니다!!

react-query에서 invalidateQueries 사용 방법?

아래와 같은 코드가 있을 때 로그아웃을 하면 내 정보를 다 삭제해 주려고 합니다. 그 때 invalidateQueries를 사용해서 초기화 시켜주려고 하는데요. 정보가 너무 많아요 혹시 효율적인 방법이 있을까요? 모든 원하는 key의 정보를 한번에 삭제한다던가 하는 함수가 있나요?

react-query가 데이터를 캐싱하는거 맞나요?

이번에 react-query를 처음 사용해 보는데요. 데이터를 키에 캐싱해서 보여준다고 공식문서에 적혀있던데 사용해보면서 느낀건 캐싱되고 있는거 맞는지 의문점이 생깁니다. 가장 큰 이유는 데이터를 계속 불러오기 때문입니다. 캐싱된 데이터를 가지고 어느정도 API요청을 줄이고 효율적으로 사용할 수 있을 줄 알았는데 매번 hook을 실행할 때마다 혹은 데이터와 관련없는 버튼을 누를때도 렌더링 될때마다 API요청이 일어나더라고요. 물론 제가 처음이라 잘 사용하는 방법을 몰라서 그렇기도 한데 이렇게 사용하는 거라면 더 비효율적인것 같아요 ㅜㅜ

react-query의 결과 값을 클라이언트에서 조작해도 되는지 궁금해요!

안녕하세요, 프로젝트를 진행하던 중에 팀원과 의견이 갈린 영역이 있어서 질문 올립니다. 스택은 next.js, react-query를 사용하고 있고 서버는 노드입니다. 페이지 중 긴 항목의 아이템들을 보여줘야하는 영역이 있는데, 정렬 로직이 들어가야합니다. 이 정렬 로직을 어디에 추가하느냐에 대해서 의견이 갈렸는데요. 팀원은 react-query를 조회하는 함수는에서 정렬 로직을 수행하는게 좋을 것 같다고 했는데, 저는 서버에서 정렬해서 내려주는게 맞는 것 같아서 서로 의견이 살짝 갈렸었습니다. 서버에서 내려준 값이랑 실제 클라이언트에서 받게되는 값이 달라져서 나중에 볼때 혼란스럽지 않을까하는 우려가 생겨서요. 그리고 조회하는 함수가 SSR에서 호출할때랑 CSR에서 호출할때 조금 달라서, 두 곳 모두 관리를 해야하는게 걸리기도 합니다. 일반적으로 react-query의 결과 값을 클라이언트에서 임의로 조작하나요?

refetchInterval을 사용해서 특정 조건 달성 시 useQuery를 멈추는 방법

react-query useQuery 관련 질문이 있습니다. 특정 조건에 걸릴때까지 주기적으로 요청을 해야하는데, refetchInterval을 어떻게 사용해야할지 잘모르겠습니다. 혹시 아시는분 계실까요?

react-query mutation onSuccess에서 여러 개의 invalidateQueries를 기다리는 방법

안녕하세요~ React Query invalidateQueries를 효과적으로 사용하는 방법이 궁금합니다. 현재 onSuccess에서 갱신 시켜줄 쿼리 키를 가지고 invalidateQueries를 호출하고 있는데요. (예시 1 참고) 문제는 여러 쿼리 키를 갱신 시켜야되고 해당 작업이 끝날때까지 기다려야하는 경우 어떻게 해야하는지 잘 모르겠습니다. 우선 이런식 (예시 2 참고)으로 할 수 있다는 것은 알고 있는데, return을 사용하지 않으면 invalidateQueries를 기다리지 않고 mutation이 완료되어서 어떻게 하면 invalidateQueries를 기다릴수 있는지 궁금합니다.

Next.js SSR + react-query 조합에서의 일반적인 페이지네이션 렌더링 방식

안녕하세요, Next.js SSR + react-query hydration 조합으로 페이지네이션을 구현하려고 합니다. 핵심 궁금증은 일반적으로 SSR을 구성할 때, 첫 페이지만 SSR을 적용하고 2페이지부터는 CSR로만 돌아가게 하나요? 아니면 모든 페이지를 SSR로도 돌아갈 수 있게 구성을 하나요? 예컨대 커리어리 개발자 Q&A 메뉴는 첫 페이지만 SSR을 적용하고 2페이지(스크롤링)부터는 CSR로만 돌아가게 구성을 한 것 같습니다만, 사실 어떤 선택이든 Trade Off가 있겠으나 일반적으론 어떻게 구성하는지가 궁금하네요!

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

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

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

react-query useQuery vs useMutation (데이터 조회 시)

안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고, Create/Update/Delete 작업은 useMutation을 쓰라고들 말씀하시는데요, 특정 페이지 렌더링 시 자동 fetch하지 않고, 사용자 액션 발생 시에만 fetch 요청을 하는 경우 useQuery가 반환하는 refetch 함수를 쓰거나 useMutation가 반환하는 mutate 함수를 사용하면 구현이 가능하더라구요. (제가 테스트한 코드는 gist에 있습니다.) 여기서 궁금한 건 Read 작업임에도 불구하고 useMutation으로도 구현이 가능하다면 굳이 위 상황에서 useQuery로 구현했을 때의 이점이 있을까요?

React toast 구현 관련

안녕하세요. Toast 관련해서 질문이 있습니다. toast를 띄워놓은 상태에서 페이지의 이동이 가능한지요? 현재 진행중인 프로젝트의 상황을 설명 드리겠습니다. 회원가입을 하면 “회원가입완료” 라는 alert창 대신 toast를 띄우고 싶은데요. 라이브러리를 쓰지않고 구현을 해보려고 합니다. 다만 회원가입창의 구조가 여러 겹으로 되어있습니다. Route path는 1개 입니다. Url주소가 같은 상태에서 다음버튼을눌러가면서 인풋창에 정보를 기입하게 되는데요. 최종페이지에서 회원가입 버튼을 누르면 로그인이 동시에 되면서 toast가 뜨도록 구현하고 싶습니다. 시도해본 바로는 modal처럼 페이지 위에서 띄우는건데 그마저도 안뜨고 있긴 합니다… 회원가입과 동시에 로그인이 되어도 바로 메인화면으로 가지 않고 url때문인지 최초의 회원가입 입력페이지를 한번 그려줬다가 메인페이지로 로그인 되어 들어갑니다. 검색을 해도 명확하게 나오지 않는 부분이 있어서 질문해보았습니다ㅠ 토스트를 어디에서 띄우는 것이 현명한 방법일지 몰라서 시도는 해보고 있는데 시간도 촉박합니다.. 라이브러리를 쓰는것이 나을까요..?

react-query의 useQueries 이용

const results = useQueries([ { queryKey: ['post', 1], queryFn: fetchPost }, { queryKey: ['post', 2], queryFn: fetchPost }, ]) 이런식으로 useQueries를 이용해서 해당 키에 데이터를 넣는데요. 이게 엄청나게 많아지면 시간이 오래걸리지 않을까요? 첫번째 fetch하고 두번째 fetch하고 ..... 비효율적인것 같은데 useQueries를 많이 사용하나요?

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

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

react query에서 placeholderData와 initial data 차이

안녕하십니까~ 프로젝트 코드를 보는 중에 react-query의 useQuery 옵션 중에 "placeholderData"라는 값에 더미 데이터를 넣어주고 있습니다. 근데 이걸 initialData라는 옵션에 넣어도 동일하게 작동하길래 둘의 차이가 뭔지 궁금하더라구요 ㅎㅎ 혹시 아시는 분 계신가요?

react-query fetching 스켈레톤 오류

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

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

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