React에 Apollo Client 적용하기

시작하기

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