frontendreact

React에 Apollo Client 적용하기

apollo, graphql, react
Views: 398

시작하기

REST API의 단점을 보완하고 더 개선된 사용 환경을 제공하기 위해 GraphQL을 기반으로 한 Apollo Client 입니다.

GraphQL 기본 쿼리문

  • query: 데이터를 받아올 때 사용합니다 (get).
  • mutation: 데이터를 생성, 수정, 삭제할 때 사용합니다 (post, put, patch, delete).
  • subscription: 웹소켓을 사용해 실시간 양방향 통신을 구현할 때 사용합니다 (websocket).

설치하기

1
create-react-app apollo-client-app --typescript

apollo 와 graphql를 설치해주도록 합니다.

1
npm install apollo-boost @apollo/react-hooks graphql

클라이언트 만들기

GraphQL 서버의 엔드포인트를 설정해주도록 합니다.

index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { gql } from "apollo-boost";

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io"
});

client
  .query({
    query: gql`
      {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result)); // 기본 사용방법

클라이언트를 React에 연결

Apollo Client를 React에 연결하려면 ApolloProvider를 사용해야합니다.
기존에 작성했던 query는 지워줍니다. 다른 컴포넌트에서 사용해야합니다.

index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";

const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io" // 예제 graphql api 입니다.
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ExchangeRates 컴포넌트 생성

EXCHANGE_RATES쿼리를 입력해주도록 합니다.

ExchangeRates.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";

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

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 }: { currency: string; rate: string }) => (
      <div key={currency}>
        <p>
          {currency}: {rate}
        </p>
      </div>
    )
  );
}

export default ExchangeRates;

ExchangeRates 컴포넌트를 추가해주도록 합니다.

App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import ExchangeRates from './ExchangeRates';

function App() {
  return (
    <div className="App">
      🚀Apollo graphql starter
      <ExchangeRates />
    </div>
  );
}

export default App;

이것으로 apollo client를 사용해보았습니다.

Share