[ReactJS] 리액트에서 Apollo Client로 전역 상태 관리하기

 

리액트에는 ContextAPI, Redux, MobX 등 전역으로 상태관리를 하기 위한 많은 선택지가 있다. Apollo Client도 그 중 하나의 선택지로 로컬에서 전역 상태관리를 하기위해 사용할 수 있다.

 

 

Apollo Client란

Apollo Client는 GraphQL 기반의 상태 관리 라이브러리이다.

클라이언트 어플리케이션의 GraphQL과 데이터 교환을 돕는다.

 

 

Apollo Client의 기능

1. graphQL API에서 데이터를 fetch해올 수 있다.

2. 어플리케이션에서 로컬로 상태 관리를 할 수 있게 해준다.

 

즉, 서버에 있는 데이터를 가지고 오고, 로컬에 있는 데이터를 관리할 수 있게 해준다.

그리고 이 두 종류의 데이터를 동기화할 수 있게 한다는 것이 큰 장점이다.

 

 

Apollo Client 설치하기

npm install @apollo/client graphql

 

https://www.apollographql.com/docs/react/

Introduction to Apollo Client

 

 

📁 src/client.js

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

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

export default client;

 

📁 src/App.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

App을 apollo client를 설정해준 ApolloProvider로 감싸준다.

그러면 App 안에 있는 모든 곳에서 client에 접근할 수 있게 된다. 모~~~든 곳에서 자유롭게 client에 접근할 수 있기 때문에 편리하다.

굿.

 

 

 useQuery hook

 

useQuery hook을 사용하면 좋은 점

useQuery를 호출하면 GraphQL 요청에서 얻은 data, client, error, loading, networkStatus 정보 등등을 모두 얻을 수 있다.

 

const ALL_MOVIES = gql`
    query getAllMovies { 
        allMovies {
            title
            id
        }
    }
`;

export default function Movies() {
    const { data, loading, error } = useQuery(ALL_MOVIES);
    if (loading) {
        return <h1>Loading...</h1>;
    }
    if (error) {
        return <h1>Could not fetch :(</h1>
    }
    return(
        <ul>
            <h1>Movies</h1>
            {data.allMovies.map(movie => (
                <li key={movie.id}>
                    <Link to={`/movies/${movie.id}`}>{movie.title}</Link>
                </li>
            ))}
        </ul>
    );
}