📡 78. React Native에서 GraphQL 사용 완전 정리 — Apollo Client, URQL, Relay 비교

---

모바일 앱이 점점 복잡해지면서 API 호출 방식도 다양해졌다.
기존 REST API만 사용하던 환경에서 GraphQL을 도입하면 데이터 요청 방식과 개발 경험이 크게 달라진다.

이번 글에서는 React Native 환경에서 GraphQL을 사용할 때
대표적인 클라이언트 라이브러리인 Apollo Client, URQL, Relay를 비교하고
설치부터 사용 예시까지 정리한다.

---

🔍 1. GraphQL이란?

GraphQL은 Facebook이 만든 API 쿼리 언어로, 다음과 같은 특징이 있다.

• 필요한 데이터만 선택적으로 요청 가능
• 여러 리소스를 한 번의 요청으로 가져오기
• 타입 기반 스키마로 API 문서와 타입 보장

---

⚙️ 2. Apollo Client 사용법

설치

npm install @apollo/client graphql

기본 사용 예시

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

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

const GET_USER = gql`
  query {
    user(id: 1) {
      id
      name
    }
  }
`;

function User() {
  const { data, loading, error } = useQuery(GET_USER);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error!</Text>;

  return <Text>{data.user.name}</Text>;
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <User />
    </ApolloProvider>
  );
}

---

⚡ 3. URQL 사용법

설치

npm install urql graphql

기본 사용 예시

import { createClient, Provider, useQuery } from 'urql';

const client = createClient({
  url: 'https://example.com/graphql',
});

const GET_USER = `
  query {
    user(id: 1) {
      id
      name
    }
  }
`;

function User() {
  const [{ data, fetching, error }] = useQuery({ query: GET_USER });

  if (fetching) return <Text>Loading...</Text>;
  if (error) return <Text>Error!</Text>;

  return <Text>{data.user.name}</Text>;
}

export default function App() {
  return (
    <Provider value={client}>
      <User />
    </Provider>
  );
}

---

🧠 4. Relay 사용법

Relay는 Facebook이 만든 GraphQL 클라이언트로, 성능과 타입 안정성에 강점이 있다.

설치

npm install react-relay relay-runtime graphql

Relay는 컴파일 단계에서 쿼리를 최적화하므로 설정이 다소 복잡하지만, 대규모 프로젝트에서 강력하다.

---

📊 5. 라이브러리 비교

라이브러리	장점	단점	추천 사용 환경
Apollo Client	풍부한 기능, 생태계 크다	번들 크기 큼	대부분의 프로젝트
URQL	가볍고 빠름	기능 제한	간단한 앱, 빠른 시작
Relay	성능 최적화, 타입 안전	설정 복잡	대규모, Facebook 스타일 개발

---

🧩 6. 실전 팁

1. 캐시 전략을 미리 설계해야 성능을 최대화할 수 있다.
2. GraphQL 서버와 클라이언트 타입을 자동 생성하면 생산성이 크게 오른다. (graphql-codegen)
3. 모바일 네트워크 환경을 고려해 오프라인 지원 여부를 결정한다.

---

📌 “GraphQL을 선택하는 순간, 데이터 흐름 설계가 API 설계와 하나가 된다.”

---