Apollo Client 맛 보기

이희제·2021년 2월 6일

apollo 프론트엔드

Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리입니다. 이번 시간에는 간략하게 React에서 Apollo Client에 대해 살펴보겠습니다.

Apollo 공식문서를 바탕으로 합니다.

패키지 설치

➡️ 리액트 앱에서 apollo client를 사용하기 위해서는 패키지를 설치해야합니다.

@apollo/client : 이 패키지는 Apollo Client를 설정하는데 필요한 모든 것을 포함하고 있습니다.
graphql : 이 패키지는 GraphQL query들을 파싱하는 로직을 포함하고 있습니다.

Client 생성

➡️ 먼저 Apollo Client를 생성해줘야 하는데, 이 때 호출할 GraphQL API의 접속 정보를 설정해야합니다.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://rickandmortyapi.com/graphql',
  cache: new InMemoryCache()
});

저는 즐겨보던 릭 앤 모티 만화에 대한 GraphQL API를 사용했습니다.

React에 Apollo Client 연결

➡️ 위에서 생성한 Apollo Client 객체를 React에 연결해줘야 합니다.

가장 상위 컴포넌트인 App.js에서 Apollo Client를 사용하도록 설정해야 합니다.

import { ApolloProvider } from "@apollo/client";

function App() {
    return (
        <ApolloProvider client={client}>
            <RickAndMorty />
        </ApolloProvider>
    );
}

ApolloProvider 를 통해 Apollo Client를 연결시켜줍니다.

GraphQL API 호출

➡️ 바로 위의 예시에서 <RickAndMorty /> 컴포넌트에서 GraphQL API를 호출하고자 합니다.

데이터를 가지고 오기위해서 useQuery hook을 사용할 것입니다. 이 hook은 결과 객체를 리턴하는데 이는 loading, error, data 프로퍼티를 가지고 있습니다.

Query


import { gql, useQuery } from "@apollo/client";

const GET_EPISODE = gql`
    query Epspsode($ids: [ID!]!) {  
        episodesByIds(ids: $ids) {
            name
            characters {
                name
                gender
                image
                status
            }
        }
    }
`;

💡useQuery hook을 이용해 API를 호출하고 인자도 전달해줄 수 있습니다.

➡️ ids의 타입이 [ID!]! 인 것을 릭 앤 모티 GraphQL API DOCS에서 확인할 수 있습니다.

Component


const RickAndMorty = () => {
    const { loading, error, data } = useQuery(GET_EPISODE, {
        variables: { ids: [1, 2] },  // 인자를 전달합니다.
    });

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error!(</p>;
    return (
        <>
            <h2>RickAndMorty</h2>

            <div>
                {data.episodesByIds.map(({ name, characters }) => {
                    return (
                        <>
                            <h3>에피소드 이름: {name}</h3>
                            <div
                                style={{
                                    display: "grid",
                                    gridTemplateColumns: "1fr 1fr 1fr",
                                }}
                            >
                                {characters.map(
                                    ({ name, gender, image, status }) => {
                                        return (
                                            <div>
                                                <img src={image} alt="hi"></img>
                                                <p>
                                                    이름: {name} 성별: {gender}
                                                </p>
                                                <p>생사여부: {status}</p>
                                            </div>
                                        );
                                    }
                                )}
                            </div>
                        </>
                    );
                })}
            </div>
        </>
    );
};

export default RickAndMorty;