아폴로 클라이언트

Apollo Client 는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript 용 포괄적인 상태 관리 라이브러리입니다. 이를 사용하여 UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정합니다.

Apollo Client는 최신 개발 방식과 일치하는 경제적이고 예측 가능하며 선언적인 방식으로 코드를 구성할 수 있도록 도와줍니다. 핵심 @apollo/client 라이브러리는 React와의 내장 통합을 제공하며 더 큰 Apollo 커뮤니티는 다른 인기 있는 보기 계층에 대한 통합을 유지 관리 합니다.

 

 

 

Apollo Client 는 useQuery, useLazyQuery 를 제공한다.

 

 

 

 

 

 

 

 

< 아폴로 클라이언트 세팅 >

 

src/apolloClient.tsx

 

import {
  createHttpLink,
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";
import React from "react";

const link = createHttpLink({
  uri: "http://localhost:5006",
});

const cache = new InMemoryCache();

export const client = new ApolloClient({ link, cache });

export function ApolloFiProvider({ children }: { children: React.ReactNode }) {
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

 

context api 와 비슷한 형태이다.

이것을 아래와 같이 App 에 감싸주면 된다.

 

 

 

 

 

 

 

src/index.tsx

 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ApolloFiProvider } from "./apolloClient";

ReactDOM.render(
  <React.StrictMode>
    <ApolloFiProvider>
      <App />
    </ApolloFiProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

 

 

 

 

 

 

Fetch data with useQuery

ApolloProvider 가 연결되면 우리는 useQuery 와 함께 데이터를 요청할 수 있다.

useQuery 는 리액트 훅이며, GraphQL 데이터를 너의 UI 와 함께 공유한다.

 

 

 

 

 

 

다음 쿼리를 gql 로 감싸자

 

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

 

 

 

 

 

 

 

 

 

 

 

다음에는 ExchangeRates 컴포넌트에 GetExchangeRates 쿼리를 실행하는 useQuery 훅과 함께 정의해보겠다.

 

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>
  ));
}