Apollo 공식문서 첫부분

https://www.apollographql.com/docs/react/get-started/

공식문서를 그대로 따라하였다.

npm install, npx-create-react-app 같은 부분은 설명하지 않는다.

튜토리얼은 공식문서에 잘 설명되어 있기 때문에, 튜토리얼보다는 튜토리얼을 나름대로 정리했다.

---

공식문서를 따라한 CodeSandBox

• InMemoryCache : 아폴로가 캐시를 이용할 수 있게 해주는 라이브러리
• ApolloProvider : 모든 컴포넌트에서 아폴로에 접근하도록 해준다.
• useQuery : GraphQL 데이터를 UI와 공유하도록 도와주는 리액트 훅

useQuery를 통해 응답의 상태를 추적

컴포넌트가 렌더될 때 useQuery는 Apollo Client에서 object를 리턴한다. 

이는 loading,error, data 속성을 포함한다.

export function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

// 이렇게 응답의 상태를 추적하여 응답의 상태에 따라 조건부 렌더링한다.
// 개발자가 수동으로 조정하지 않아도 되는 편리함이 있다.
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

굳이 loading상태를 useState로 만들어주지 않아도, 로딩인디케이터를 활용할 수 있다.