Apollo Client

Apollo Client는 GraphQL을 사용했을 때 데이터 교환을 쉽게 할 수 있게 해주는 라이브러리이다. 또한, apollo의 캐시를 이용해서 애플리케이션의 상태를 관리할 수 있다.

GraphQL: 쿼리 언어

Hooks
Apollo Client는 GraphQL의 query, mutation, subscription을 사용하기 위한 리액트 hook을 제공한다.
Apollo Client에서 사용되는 리액트 훅들은 타입스크립트의 제네릭을 이용해서 타이핑(Typing)을 할 수 있다. hook을 사용할 때 필요한 매개변수나 hook의 결과 값의 타입을 지정하면 된다.

Query

useQuery

GraphQL 서버에 있는 데이터를 읽을 때 사용하는 hook이다.

params

• useQuery의 매개 변수로 gql로 감싸진 GraphQL의 쿼리를 넣어준다.
• useQuery가 실행되어 반환하는 값인 data의 타입과 useQuery가 실행될 때 필요한 매개변수의 타입을 지정할 수 있다.
  - 쿼리를 실행할 때 매개변수가 필요한 경우 variables 옵션을 이용할 수 있다. 필요하지 않은 경우는 쓰지 않는다.

results

• useQuery를 호출하면 data, loading, error 등의 속성을 가진 객체가 반환된다.

const INFO = gql`
  query INFO($id: ID!) {
    info(id: $id) {
      id
      name
      email
    }
  }
`;

type Data = {
  id: number;
  name: string;
  email: string;
}

type Variables = {
  id: number;
}

// 쿼리의 매개변수가 필요하지 않은 경우
const { data, loading, error } = useQuery<Data>(INFO);

// 쿼리의 매개변수가 필요한 경우
const { data, loading, error } = useQuery<Data, Variables>(INFO, { variables: { id: id } });

useLazyQuery

useQuery hook은 컴포넌트가 렌더링되면 자동으로 호출(GraphQL 쿼리가 실행됨)된다. 만약, 사용자가 버튼을 클릭(onClick)하거나 폼을 제출(onSubmit)하는 등의 이벤트가 일어났을 때 쿼리를 실행하고 싶은 경우 useLazyQuery를 사용하면 된다.

params

useQuery hook과 똑같이 첫번째 인자로는 GraphQL의 쿼리가 들어가고, 필요한 경우 쿼리를 실행하기 위한 매개변수를 두번째 인자로 넣어준다.

results

반환되는 값은 useQuery를 실행했을 때와 조금 다르다. 특정 이벤트가 일어났을 때 쿼리를 실행할 수 있는 콜백함수가 배열의 첫번째 값으로 반환되고, 두번째 값으로는 data, loading, error 등의 속성을 가진 객체가 반환된다.

function Example() {
  const [callback, { data, loading, error }] = useLazyQuery<Data, Variables>(QUERY);
  
  return (
    <button onClick={() => callback()}>클릭하면 callback 함수 실행</button>
  );
}

Mutation

useMutation

GraphQL 서버에 데이터를 추가, 수정, 삭제할 때 사용하는 hook이다.

params

gql로 감싸진 graphQL의 쿼리(mutation)를 넣어준다. 필요한 경우 매개변수도 넣어준다.

results

useLazyQuery hook과 마찬가지로 mutation 함수가 배열의 첫번째 값으로 들어오고, 두번째 인자로는 mutation 함수가 실행되었을 때의 상태값이 담긴 객체가 반환된다. 객체 안에는 data, loading, error 등의 값이 담길 수 있다.

const UPDATE_NAME = gql`
  mutation UpdateName($name: String!) {
    UpdateName(name: $name) {
      id
      name
      email
    }
  }
`;

function Example({ name }) {
  const [callback, { data, loading, error }] = useMutation<Data, Variables>(
      UPDATE_NAME,
      { variables: { name: name } }
    );
  
  return (
    <button onClick={() => callback()})}>클릭하면 callback 함수 실행</button>
  );
}

Subscription

Subscription은 query처럼 데이터를 읽을 수 있다. 하지만 query와는 달리 서버와의 커넥션을 유지하여 subscripttion의 결과를 서버가 업데이트하도록 한다.

useSubscription

params

results

interface Message {
  content: string;
}

interface News {
  latestNews: Message;
}

const LATEST_NEWS = gql`
  subscription getLatestNews {
    latestNews {
      content
    }
  }
`;

export function LatestNews() {
  const { loading, data } = useSubscription<News>(LATEST_NEWS);
  return (
    <div>
      <h5>Latest News</h5>
      <p>
        {loading ? 'Loading...' : data!.latestNews.content}
      </p>
    </div>
  );
}

reference

• Using Apollo with TypeScript