12단계: GraphQL 사용법

12-1. GraphQL이란?

GraphQL은 Facebook에서 개발한 데이터 쿼리 언어입니다. 클라이언트가 필요한 데이터만 명확히 요청할 수 있도록 설계되어 REST보다 유연합니다.

12-2. 기본 개념

Query: 데이터를 읽기 위한 요청
Mutation: 데이터를 수정하는 요청
Schema: 데이터 구조 정의
Resolver: 실제 데이터 반환 로직

12-3. 설치 및 초기 설정 (Apollo Client)

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache()
});

<ApolloProvider client={client}>
  <App />
</ApolloProvider>

12-4. 쿼리 작성 및 데이터 조회

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

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

function UserList() {
  const { data, loading } = useQuery(GET_USERS);
  if (loading) return <p>로딩 중...</p>;
  return (
    <ul>
      {data.users.map((user) => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

12-5. 뮤테이션 작성

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

const ADD_USER = gql`
  mutation AddUser($name: String!) {
    addUser(name: $name) {
      id
      name
    }
  }
`;

const [addUser] = useMutation(ADD_USER);

<button onClick={() => addUser({ variables: { name: '철수' } })}>
  사용자 추가
</button>

12-6. 쿼리와 캐시 관리 전략

refetchQueries: 뮤테이션 후 쿼리 갱신
update: Apollo 캐시 직접 수정
onCompleted: 요청 후 후처리 로직 실행

요약

GraphQL은 필요한 데이터만 명시적으로 요청할 수 있는 쿼리 언어
Apollo Client는 React와 GraphQL을 연동하는 데 가장 많이 쓰이는 도구
쿼리와 뮤테이션은 각각 조회/수정 작업을 담당
캐시와 상태 처리를 Apollo 내부에서 함께 관리할 수 있음

심화학습

Q1. GraphQL이 REST보다 유리한 상황은 어떤 경우인가요?
A1. 여러 API 요청을 하나로 묶고 싶은 경우, 필요한 필드만 선택적으로 가져오고 싶은 경우 등에 적합합니다.

Q2. Apollo Client의 캐시를 수동으로 업데이트해야 하는 이유는?
A2. 뮤테이션 후 자동으로 반영되지 않는 데이터를 직접 수정하거나, 새 항목 추가 시 리스트에 직접 삽입하기 위해 필요합니다.

Q3. useQuery와 useEffect + fetch 조합과의 차이점은?
A3. useQuery는 상태, 로딩 처리, 에러 관리, 캐싱을 내장하고 있어 fetch보다 훨씬 구조화되고 효율적인 통신 흐름을 제공합니다.