React - GraphQL Client (with Apollo)

Apollo, GraphQL in React

• Apollo? 애플리케이션 클라이언트를 백엔드 서비스에 원활하게 연결하는 데이터 그래프 를 구축하기위한 플랫폼

---

패키지 설치

npm install @apollo/client graphql

• @apollo/client : Apollo Client를 설정하는 데 필요한 대부분의 것이 포함
• graphql : GraphQL 쿼리 분석을 위한 로직 제공

---

클라이언트 생성

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

const client = new ApolloClient({
    uri: 'http://localhost:4000/',
    cache: new InMemoryCache()
});

• ApolloClient() : 새로운 client를 생성할 수 있도록 한다.
• uri : api 서버 주소
• InMemoryCache() : gql의 결과를 InMemoryCache에 저장한다. 이를 통해 클라이언트는 추가적인 네트워크 요청없이도 기존의 데이터에 대한 요청이 가능해진다.
• cf. https://velog.io/@talentceffort/Apollo-In-Memory-Cache-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

---

React에 클라이언트 연결

import { ApolloProvider } from '@apollo/client';
import client from './apollo'

ReactDOM.render(
  <ApolloProvider client={client}>
      <App />
  </ApolloProvider>
);

• Apollo provider : 생성된 클라이언트를 context에 배치해 컴포넌트 트리 어느 곳에서든 액세스 가능하도록 한다.
• 이제 해당 App 컴포넌트 트리 어느 곳에서든 client 활용이 가능해진다.

---

Query문 작성 및 활용

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

const GET_MOVIES = gql`
{
    movies{
        title
    }
}
`;

export default () => {
    const { loading, error, data } = useQuery(GET_MOVIES);
    return <h1>{loading ? "Loading..." : data.title}</h1>;
};

• gql : query문을 작성 가능하도록하고, 이를 객체로 만들어준다. (해당 코드에서는 movies query를 요청하고, 여기서 title들만 받아오도록 했다.)
• useQuery : gql로 만들어진 query문 객체를 기반으로 API 서버에서 값을 얻어온다.
• loading : data가 불러와지는 도중엔 true, data가 모두 불러와지면 false. 해당 값을 이용해 데이터 로드 여부를 체크해야 제대로 페이지를 구성할 수 있다.
• error : 에러값
• data : GraphQL API에서 얻어온 실질적 Data