0%

[React] React Apollo Hooks 사용하기


Design by @imrahelk


안녕하세요. 안피곤입니다.

Hooks는 리액트 v16.8에 도입되었습니다. Hooks를 사용하면 함수형 컴포넌트에서도 상태관리와 다양한 작업들을 할 수 있습니다. 이번에는 React에서 Apollo Hooks 를 사용하는 방법을 안내합니다.

 


*

 

설치하기

1
2
3
4
5
npm install react-apollo-hooks

# or

yarn add react-apollo-hooks

참고: https://github.com/trojanowski/react-apollo-hooks

 

react-apollo-hooks 사용하기

react-apollo-hooks를 사용하기 위해 다음과 같이 작성 합니다. 루트 컴포넌트를 <ApolloProvider> 로 감쌉니다. 그리고 ApolloProvider의 client에 ApolloClient를 전달합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import ReactDOM from 'react-dom';

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo-hooks';

// Create Apollo client
const client = = new ApolloClient({
uri: process.env.REACT_APP_GRAPHQL_URL,
});

const App = () => (
<ApolloProvider client={client}>
<MyRootComponent />
</ApolloProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

참고로 리액트에서는 .env 파일을 사용할때, 반드시 Key에 REACT_APP_ 를 붙여야 합니다. 이걸 몰라서 고생했습니다. 그리고 ApolloClient에 대해 자세한 내용은 apollo-client를 참고하세요.

 

그다음 apollo-boost를 사용하여 GraphQL을 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { gql } from "apollo-boost";

const GET_POSTS = gql`
query GetPosts(
$tags: [String!]!
) {
getPosts(
tags: $tags
) {
post_id
title

}`;

 

useQuery

useQuery를 사용하면 아래와 같이 작성합니다.

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
const MainPage = (props) =>
const { data, error, loading } = useQuery(GET_POSTS, {
variables: {
tags: ['kr-dev'],

});

if (loading) {
return <div>Loading...</div>;
};

if (error) {
return <div>Error! {error.message}</div>;
};

return (
<ul>

data.getPosts.map(post => (
<li key={post.post_id}>{post.title}</li>
))

</ul>
);

 

useApolloClient

useApolloClient를 사용하면 아래와 같이 작성합니다.

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
32
33
34
35
36
const MainPage = (props) =>

// ApolloClient
const client = useApolloClient();

// posts Data
const [posts, setPosts] = useState([]);

// getPosts
const _getPosts = async ({ tags }) => {
const { data } = await client.query({
query: GET_POSTS,
variables: {
tags,

});
setPosts(data.getPosts);


return (
<>
<button onClick={() => {
_getPosts({ tags: ['kr-dev'] })
}}>GetPosts</Button>
<ul>

posts.map(post => (
<li key={post.post_id}>{post.title}</li>
))

</ul>
</>
);
};

export default MainPage;

 


*

 

React + GraphQL + React Apollo Hooks를 사용하여 아래와 같은 사이트를 만들고 있습니다. 일단 컨셉만 잡아보았습니다.


해피 코딩하세요~!


![](https://steemitimages.com/400x0/https://cdn.steemitimages.com/DQmQmWhMN6zNrLmKJRKhvSScEgWZmpb8zCeE2Gray1krbv6/BC054B6E-6F73-46D0-88E4-C88EB8167037.jpeg)

Originally posted on http://steemit.com