Get started 'react-apollo'

셋팅해본적이 없어서 셋팅해본 react-apollo. 물론 간단한 웹앱을 만들때 하는 설정셋팅이고 로그인, apollo-client, initialCacheState 등을 사용하려면 디렉토리구조를 세분화하는것이 좋다.

🍕react-apollo를 사용하는 이유

1. REST API와 Redux를 대체하는 GraphQL과 Apllo
2. graphql을 기반으로 한 상태관리 플랫폼. 클라이언트에서 graphql을 사용해 데이터를 가져오는 UI를 만들 때 사용하기 좋다.
3. @apollo/react-hooks로 더 간편하게 사용할 수 있다. => useQuery, useMutation, useApolloClient 등

1. Installation

npm install apollo-boost @apollo/react-hooks graphql

• apollo-boost : Apollo Client를 설정하는데 필요한 것이 들어있는 패키지
• react-apollo : React를 위한 apollo
• graphql : GraphQL 쿼리를 사용할 수 있다.

npm i graphql-tag

gql 템플릿 리터럴 태그로 감싸 쿼리문을 사용할 수 있다.

npm i apollo-link-http apollo-cache-inmemory apollo-client

그리고 네트워크 통신에 사용할 apollo-link-http 와 로컬 메모리에 데이터를 캐시하는데 사용할 apollo-cache-inmemory 및 apollo-client를 설치한다.

2. create a client

2-1. setting up Apollo-Client

const client = new ApolloClient({
  uri: "서버주소",
  cache: new InMemoryCache()
});

2-2. ApolloProvider

react app을 래핑하고, context에 배치하여 어느곳에서나 사용할 수 있게한다.

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

3. request data

ApolloProvider가 연결되면, useQuery로 data를 가져올 수 있다.

const { loading, data } = useQuery(Queries.GET_DATA);