Apollo Client

Apollo Client는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript용 상태 관리 라이브러리입니다. UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정하는 데 사용합니다.

특징

1. 데이터 fetching

2. 우수한 개발 경험 (TypeScript, devtools 등 유용한 도구 사용 가능)

3. 모던 React용으로 설계 (훅과 같은 최신 React 기능을 활용 가능)

4. 범용 호환 (모든 빌드 셋업 및 GraphQL API를 사용)

등등..

사용법

1. reactapp에서 npm install @apollo/client graphql

2. client.js를 만든 후

   import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
   const client = new ApolloClient({
     uri: '<http://localhost:4000/>',//자신이 만든 GraphQL 서버주소입력
     cache: new InMemoryCache(),
   });
   

3. index.js에서 <App />을 Provider로 감싸고 위에서 만든 client를 보낸다.

   import {ApolloProvider} from '@apollo/client';
   
   <ApolloProvider client={client}>
       <App />
     </ApolloProvider>,
   

UseQuery

useQuery 훅을 사용하여 React에서 GraphQL 데이터를 가져오고 그 결과를 UI에 연결할 수 있습니다. useQuery 훅은 Apollo 애플리케이션에서 쿼리를 실행하기 위한 기본 API입니다. 컴포넌트가 렌더링될 때 useQuery는 UI를 렌더링하는 데 사용할 수 있는 loading, error, data 속성이 포함된 Apollo Client의 객체를 반환합니다.

const GET_DOGS = gql`
	query example {
		id
		name
	}
`
const { loading, error, data } = useQuery(GET_DOGS);

useQuery에 변수추가하기

const GET_MOVIE = gql`
  query getMovie($movieId:String!) {
    movie(id:$movieId) {
      id
      title
      medium_cover_image
      rating
    }
  }
`

const {data, loading} = useQuery(GET_MOVIE, {
    variables:{
      movieId: id
    }
  }) //두번째 인자로 변수를 줄 수 있다.
		 //gql에서 사용하는 변수와 이름이 같아야한다.