GraphQL-Apollo-Client

공식 문서

Apollo Client는 GraphQL API를 클라이언트 단에서 호출하기 위해서 사용한다.

( ReduxRTKQuery와 사용법이 유사하다!)

1. 환경 설정

# 패키지 설치
npm install @apollo/client graphql

// App.js

// apolloClient 모듈을 import한다. 
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client'


// GraphQL 서버로와 정보를 주고 받을 ApolloClient 객체를 만든다. 
const client = new ApolloClient({
  uri: 'http://localhost:4000', // 서버 주소 
  cache: new InMemoryCache()    // InMemoryCache를 통한 캐시 관리
});

//   ...

// 내부 요소들을 ApolloProvider로 감싸준다.
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <header className="App-header">
          <h1>Company Management</h1>
          <nav>
            <ul>
              {NavMenus()}
            </ul>
          </nav>
        </header>
        <main>
          {mainComp[menu]}
        </main>
      </ApolloProvider>
    </div>
  );

2. GraphQL API 호출

1) useQuery (Read)

공식 문서

useQuery는 기본적으로 loading, error, data를 반환한다.

• loading: 로딩 중이면 true, 아니면 false를 반환한다.
• data: 요청에 의해 반환되는 데이터
• error: error 여부

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

// 선언 
const GET_DOGS = gql`
  query GetDogs($id :Int) {
    dogs {
      id
      breed
    }
  }
`

// 호출
function GetDog() {
  const { loading, error, data } = useQuery(GET_DOGS, {
    variables: { breed },
  });
    
 // ...
    
}

아폴로 클라이언트는 쿼리의 결과를 자동으로 캐싱한다. 그래서 똑같은 쿼리를 보낸 경우 빠르게 반응할 수 있다.

polling 과 refetch를 통해 캐시된 데이터를 최신 상태로 유지할 수 있다.

// 1. polling: 정한 시간마다 자동으로 데이터를 갱신
const { loading, error, data } = useQuery(GET_DOGS, {
    variables: { breed },
    pollInterval: 500,
  });


// 2. refetch: 유저의 특정 행동 후에 다시 query를 요청하는 함수를 실행 (데이터 갱신)
const { loading, error, data, refetch } = useQuery(GET_DOGS, {
    variables: { breed },
  });

  // ...

  return (
	<button onClick={() => refetch({breed: "new_dog_breed"})}> click </button>
  );
};

2) useLazyQuery

useLazyQuery는 사용자의 이벤트에 대한 응답으로 쿼리를 요청하는데 적합하다.

useQuery의 경우 호출하면 연결된 쿼리를 즉시 실행하지만,

useLazyQuery는 즉시 실행하지 않고 쿼리 함수를 반환하여 특정 이벤트 후에 쿼리를 요청하도록 할 수 있다.

import { useLazyQuery } from '@apollo/client';


function GetDog() {
 // 호출했지만, GET_DOGS가 바로 실행되지 않는다.
 // 쿼리는 getDog()통해 실행된다. 
const [getDog, { loading, error, data }] = useLazyQuery(GET_DOGS);
    
  // ...
    
  return (
	<button onClick={() => getDog({variables: { breed: "new_dog_breed"}})}> click </button>
  );
};

3) useMutation (Create, Update, Delete)

공식 문서

useMutation은 useLazyQuery와 유사하게 쿼리 함수를 반환한다.

일반적으로 추가, 수정, 삭제는 사용자의 이벤트에 대한 응답으로 실행되는 경우가 많기 때문에 useQuery와 같이 호출시 즉시 실행하지 않는다.

import { gql, useMutation } from '@apollo/client';

// 선언
const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;


// 호출, 실행
function AddTodo() {
 const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);
 
 // form을 제출하면, mutate 함수가 실행된다. 
 return (
 	<form onSubmit={event => {
      event.prevendDefault();
      addTodo({variables: {type: input.value}});
     }};
    > 
    //...
    </form>
 
 )
}

만약, mutation 요청을 보낸 후에 데이터를 최신 상태로 유지하고 싶다면 refetchQueries옵션을 사용하면 된다.

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
  refetchQueries: [
    {query: GET_POST}, // DocumentNode object parsed with gql
    'GetComments' // Query name
  ],
});