반응형 개발/GraphQL , Apollo19 fetchPolicy 와 nextFetchPolicy 공식문서 해석 fetch policy 세팅 디폴트로 useQuery 훅은 apollo client 캐시를 체크한다. (요청한 데이터가 이미 로컬에서 사용가능한지 아닌지 볼려고) 만약 모든 데이터가 로컬에서 사용가능하면 useQuery 훅은 graphQL서버에 쿼리를 날리지 않는다. 이 cache-first 정책은 apollo client의 디폴트 fetch policy이다. fetchPolicy 옵션은 다음과 같이 작성할 수 있다. const { loading, error, data } = useQuery(GET_DOGS, { fetchPolicy: "network-only" // Doesn't check cache before making a network request }); nextFetchPolicy 위에서 언.. 2022. 3. 27. useLazyQuery 공식문서 해석하기 리액트에서 useQuery를 호출하는 컴포넌트를 렌더링할때, apollo client는 자동으로 일치하는 query를 실행한다. 그멈 만약 버튼 이벤트같은 다른 이벤트들에 반응하는 query를 실행하고 싶다면 어떻게 해야할까?? useLazyQuery useLazyQuery는 컴포넌트 렌더링이외의 이벤트에 반응하는 쿼리를 실행하기에 최적의 Hook이다. useQuery와 달리, useLazyQuery를 호출할때, 즉시 query를 실행하지 않고 query function을 리턴한다. 이 함수는 쿼리를 실행할 준비가 될 때마다 호출된다. import React from 'react'; import { useLazyQuery } from '@apollo/client'; funct.. 2022. 3. 26. useQuery, useLazyQuery와 의존성 회사에서 graphQL을 주력으로 사용하고 있는데, 나는 graphQL이 익숙치 않아 graphQL연습용 사이드 프로젝트를 진행하고 있다. useLazyQuery의 존재를 모른 상태에서, useQuery만 이용하여 데이터fetching을 시도했다. 버튼이 클릭될때만 데이터를 불러오게 하고 싶었지만, useQuery를 이용하면 매 순간 데이터가 fetching되었다. 구글링으로 두가지 사실을 알게 되었다. useQuery는 콜백함수안에서 사용할 수 없고, 컴포넌트가 렌더될때마다 apollo client에 의해 자동으로 실행된다. useLazyQuery는 컴포넌트가 렌더될때가 아닌, 어떠한 이벤트에 대해 Query를 실행하게 해준다. 처음에는 아래와 같이 적어주었다. const [author, setAuth.. 2022. 3. 26. Apollo useMutation - Refetching queries 아폴로 공식문서가 설명이 잘 되어 있다. Updating local data mutation을 사용했다면, DB의 데이터를 변경한 것이다. 이를 다시 UI에 반영하기 위해서 가장 간단한 방법은 muation의 영향을 받은 query를 refetch 하는 것이다. 하지만 이는 추가 네트워크 요청을 뜻한다. 만약! mutation이 수정된 필드를 돌려준다면 (응답객체처럼), 우린 추가 네트워크 요청 없이도 캐시를 직접 업데이트 할 수 있다. 지금부터 안내하는 방법들을 통해 우리가 개발하는 App의 반응성을 향상 시킬 수 있다. Refetching queries mutation 이후 query를 refetch 하고 싶다면, useMutation에 refetchQueries 배열을 추가 옵션으로 포함시키면 된다.. 2022. 3. 5. 이전 1 2 3 4 5 다음 반응형
