03_Apollo

Apollo-Client는 GraphQL 쿼리를 작성하기만 하면 Apollo-Client가 데이터를 요청하고 캐싱하고 UI를 업데이트 한다.

이는 정확한 EndPoint를 알고 Fetch or Axios로 서버에 요청해야하는 것과 달리 코드도 간결해지고 가독성도 좋아진다.

 

graphQL로 이루어진 서버에 클라이언트가 요청을 하기 위해서는 클라이언트에서 Apollo 셋팅이 되어야 한다.

 

클라이언트에 아폴로를 셋팅하기 위해서는,

1. Create Client

const client = new ApolloClient({
        link: links,  // links에는 웹소켓 링크, 에러에 대한 링크, 서버 ENDPOINT 링크, 인증을 위한 token 미들웨어가 있다.
        cache,
});

 

2. Connect Client to React

 <ApolloProvider client={client}>
  <Provider {...store}>
    <MainStack />
  </Provider>
</ApolloProvider>

/*
ApolloProvider로 하위 컴포넌트를 감싸주면 하위 컴포넌트에서 쿼리문을 사용하고, 캐쉬를 사용할 수 있게 된다.
Provider는 MobX의 Provider이므로 다음에 다루어 보겠다.
*/

두가지 과정을 거치면 된다.

 

프로젝트를 진행하면서 이 클라이언트 셋팅을 다시 고치기도 하였었다.

초기에 셋팅을 잘해두지 않으면 분명히 나중에 문제가 생길것이다...

 

이렇게 Apollo-Client셋팅을 마치게 되면, 이제 신나게 서버에 쿼리로 요청하면 된다!!!

 

아폴로 셋팅이 끝났으니 MobX셋팅을 해주자!