apollo client 라이브러리에 useQuery를 동기적으로 사용하는 방법이 있을까요?

Question

안녕하세요! 프론트 엔드를 공부하며 react 및 next.js로 프로젝트를 진행하고 있습니다.현재는 로그인이 되어 있지않다면 해당 페이지로의 접근을 막는 코드를 작성 중에 있는데 문제가 있어서 질문을 드립니다.fetch 자체는 apollo-client의 useQuery를 사용해서 받아옵니다.먼저 로그인 페이지에서 로그인에 성공하면 Recoil에 서버에서 온 토큰 정보를 넣어두고 권한이 필요한 페이지에 접근할 때 해당 토큰 내용을 헤더에 실어서 서버에 보내면 서버에서 다시 로그인 정보를 보내는 방식으로 구성하였습니다.useAuth 라는 이름으로 새로운 함수를 만들고 페이지에 접속하면 최 상단에서 useAuth 가 실행되어 권한을 판별하는 방식으로 코드를 작성하였습니다.그런데 useQuery 자체가 비동기 적으로 작동을 하다보니 useAuth 에서 로그인 정보 fetch 가 들어가고 원래의 페이지에도 useQuery 가 존재하면 마치 useAuth 가 두번 작동하는 것처럼 alert 창이 나옵니다.제 생각에는 원래 페이지의 useQuery 가 값을 받아오며 js 코드들이 다시 한번 실행되면서 useAuth 자체도 다시 한번 작동하는 것으로 판단했는데 이걸 한번만 일어나게 바꾸는 방법이 있을까요?개인적인 생각으로는 useAuth 내의 useQuery 가 동기 적으로 작동하면 될 거같은데 방법을 모르겠습니다...아래의 두 컴포넌트 및 함수는 서로 다른 js 파일로 있습니다.export const useAuth &#61; () &#61;> { const { data } &#61; useQuery('로그인정보 fetch') // data 값에 따라서 접근 권한 허용 및 불허 ... } export default function page() { useAuth() const { data } &#61; useQuery('다른 정보 fetch') // 이 부분에 fetch한 데이터가 들어오면서 js 코드가 다시 리렌더링되며 useAuth가 다시 작동하는 것 같습니다 // 기타 페이지 구성 코드들... ... }

공부합시다. · Accepted Answer

useLazyQuery 찾아보세요. 아니면 굳이 hook 사용할 필요 없습니다.client 이용해서 async await 연달아 사용하시면서 사용하셔도 돼요. await client.mutate(...); await client.query(...);

페코옹 · Answer

option에 enabled 활용해보세요

apollo client 라이브러리에 useQuery를 동기적으로 사용하는 방법이 있을까요?

2개의 답변

Q&A 목록