[React] React Apollo Hooks 사용하기

^{Design by @imrahelk}

---

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

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

 

*

 

설치하기

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를 전달합니다.

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을 작성합니다.

import ｛ gql ｝ from "apollo-boost";

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

 

useQuery

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

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를 사용하면 아래와 같이 작성합니다.

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를 사용하여 아래와 같은 사이트를 만들고 있습니다. 일단 컨셉만 잡아보았습니다.

해피 코딩하세요~!

---