Apollo Client와 타입스크립트로 GraphQL 활용하기 🚀

현대 웹 개발에서 효율적인 데이터 관리와 타입 안정성은 매우 중요한 요소입니다. 이러한 요구를 충족시키기 위해 GraphQL과 타입스크립트의 조합이 주목받고 있습니다. 특히 Apollo Client를 활용하면 GraphQL을 더욱 강력하게 다룰 수 있죠. 이 글에서는 Apollo Client와 타입스크립트를 이용해 GraphQL을 효과적으로 활용하는 방법에 대해 상세히 알아보겠습니다.

GraphQL의 유연성과 타입스크립트의 정적 타입 검사를 결합하면, 개발자들은 더욱 안정적이고 유지보수가 용이한 코드를 작성할 수 있습니다. 이는 특히 대규모 프로젝트나 팀 단위의 협업에서 큰 장점으로 작용합니다. 마치 재능넷에서 다양한 재능을 효율적으로 연결하듯이, Apollo Client와 타입스크립트는 GraphQL의 강력한 기능들을 개발자들이 쉽게 활용할 수 있도록 연결해주는 역할을 합니다.

이제 본격적으로 Apollo Client와 타입스크립트를 이용한 GraphQL 활용 방법에 대해 자세히 알아보겠습니다. 각 섹션에서는 주요 개념부터 실제 구현 방법, 그리고 고급 기술까지 단계별로 살펴볼 예정입니다. 준비되셨나요? 그럼 시작해볼까요! 💪

1. GraphQL과 Apollo Client 소개 📚

1.1 GraphQL이란?

GraphQL은 Facebook에서 개발한 쿼리 언어로, RESTful API의 한계를 극복하기 위해 만들어졌습니다. GraphQL의 주요 특징은 다음과 같습니다:

단일 엔드포인트: 모든 요청이 하나의 URL로 전송됩니다.
필요한 데이터만 요청: 클라이언트가 필요한 데이터만 정확히 요청할 수 있습니다.
강력한 타입 시스템: 스키마를 통해 데이터의 구조와 타입을 명확히 정의합니다.
실시간 업데이트: Subscription을 통해 실시간 데이터 변경을 감지할 수 있습니다.

이러한 특징들로 인해 GraphQL은 복잡한 데이터 요구사항을 가진 현대적인 애플리케이션 개발에 매우 적합합니다.

1.2 Apollo Client 소개

Apollo Client는 GraphQL을 클라이언트 측에서 쉽게 사용할 수 있게 해주는 강력한 상태 관리 라이브러리입니다. 주요 기능은 다음과 같습니다:

캐싱: 자동으로 쿼리 결과를 캐싱하여 성능을 최적화합니다.
요청 중복 제거: 동일한 데이터에 대한 중복 요청을 방지합니다.
에러 핸들링: 네트워크 오류나 서버 에러를 효과적으로 처리합니다.
로컬 상태 관리: 원격 데이터뿐만 아니라 로컬 상태도 관리할 수 있습니다.

Apollo Client를 사용하면 개발자는 복잡한 데이터 흐름 관리에서 벗어나 비즈니스 로직에 더 집중할 수 있습니다.

위 다이어그램은 GraphQL 서버와 Apollo Client 간의 상호작용을 보여줍니다. Apollo Client는 GraphQL 쿼리와 뮤테이션을 서버로 전송하고, 서버로부터 받은 응답 데이터를 효율적으로 관리합니다.

1.3 타입스크립트와의 시너지

Apollo Client와 GraphQL을 타입스크립트와 함께 사용하면 다음과 같은 이점을 얻을 수 있습니다:

타입 안정성: GraphQL 스키마를 타입스크립트 타입으로 자동 생성할 수 있어, 런타임 에러를 줄일 수 있습니다.
자동 완성: IDE에서 쿼리 작성 시 자동 완성 기능을 활용할 수 있어 생산성이 향상됩니다.
리팩토링 용이성: 타입 시스템을 통해 코드 변경 시 영향받는 부분을 쉽게 파악할 수 있습니다.
문서화 효과: 타입 정의 자체가 문서 역할을 하여 코드의 가독성과 유지보수성이 향상됩니다.

이러한 이점들로 인해 Apollo Client, GraphQL, 그리고 타입스크립트의 조합은 현대 웹 개발에서 매우 강력한 도구로 자리잡고 있습니다.

💡 Pro Tip: Apollo Client와 타입스크립트를 함께 사용할 때는 @graphql-codegen/typescript 라이브러리를 활용하면 GraphQL 스키마로부터 타입스크립트 타입을 자동으로 생성할 수 있습니다. 이는 개발 생산성을 크게 향상시키는 강력한 도구입니다!

다음 섹션에서는 Apollo Client와 타입스크립트를 실제로 설정하고 사용하는 방법에 대해 자세히 알아보겠습니다. 기본적인 개념을 이해했으니, 이제 실전으로 들어가볼 시간입니다! 🚀

2. Apollo Client 설정하기 🛠️

Apollo Client를 프로젝트에 통합하는 과정은 매우 중요합니다. 이 섹션에서는 Apollo Client를 타입스크립트 프로젝트에 설정하는 방법을 단계별로 살펴보겠습니다.

2.1 필요한 패키지 설치

먼저, 필요한 패키지들을 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요:

npm install @apollo/client graphql

또한, 타입스크립트 관련 패키지도 필요합니다:

npm install -D typescript @types/react

2.2 Apollo Client 인스턴스 생성

Apollo Client 인스턴스를 생성하는 코드를 작성해봅시다. 새로운 파일 apollo-client.ts를 만들고 다음 코드를 추가하세요:

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

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-graphql-endpoint.com/graphql', // GraphQL 서버 주소
  }),
  cache: new InMemoryCache()
});

export default client;

여기서 uri는 여러분의 GraphQL 서버 주소로 변경해야 합니다.

2.3 React 애플리케이션에 Apollo Client 연결

Apollo Client를 React 애플리케이션에 연결하려면, 최상위 컴포넌트를 ApolloProvider로 감싸야 합니다. App.tsx 파일을 다음과 같이 수정하세요:

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from './apollo-client';

const App: React.FC = () => {
  return (
    <ApolloProvider client={client}>
      {/* 여기에 애플리케이션 컴포넌트들이 위치합니다 */}
    </ApolloProvider>
  );
};

export default App;

2.4 타입스크립트 설정

타입스크립트와 Apollo Client를 함께 사용하기 위해 tsconfig.json 파일에 몇 가지 설정을 추가해야 합니다:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

이 설정은 타입스크립트가 Apollo Client와 React를 올바르게 인식하도록 도와줍니다.

2.5 GraphQL 코드 생성 설정 (선택사항)

GraphQL 스키마로부터 타입스크립트 타입을 자동으로 생성하려면, GraphQL Code Generator를 설정할 수 있습니다. 이는 선택사항이지만, 큰 프로젝트에서는 매우 유용합니다.

먼저, 필요한 패키지를 설치하세요:

npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

그리고 프로젝트 루트에 codegen.yml 파일을 생성하고 다음과 같이 설정하세요:

overwrite: true
schema: "https://your-graphql-endpoint.com/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      withHooks: true

이제 package.json에 스크립트를 추가하세요:

"scripts": {
  "generate": "graphql-codegen --config codegen.yml"
}

npm run generate 명령어를 실행하면 GraphQL 스키마를 기반으로 타입스크립트 타입과 React hooks가 자동으로 생성됩니다.

위 다이어그램은 Apollo Client 설정 프로세스의 주요 단계를 시각적으로 보여줍니다. 각 단계는 순차적으로 진행되며, 마지막 두 단계는 병렬로 수행될 수 있습니다.

⚠️ 주의: GraphQL 엔드포인트 URL을 하드코딩하는 것은 보안상 좋지 않습니다. 실제 프로덕션 환경에서는 환경 변수를 사용하여 URL을 관리하는 것이 좋습니다. 예를 들어, process.env.REACT_APP_GRAPHQL_URL과 같은 방식으로 사용할 수 있습니다.

이제 Apollo Client와 타입스크립트 설정이 완료되었습니다! 다음 섹션에서는 이 설정을 바탕으로 실제로 GraphQL 쿼리와 뮤테이션을 수행하는 방법에 대해 알아보겠습니다. Apollo Client의 강력한 기능들을 활용하여 데이터를 효율적으로 관리하는 방법을 배우게 될 것입니다. 계속해서 흥미진진한 GraphQL의 세계로 들어가볼까요? 🚀

3. GraphQL 쿼리 실행하기 🔍

Apollo Client를 설정했으니, 이제 실제로 GraphQL 쿼리를 실행해보겠습니다. 이 섹션에서는 타입스크립트와 함께 Apollo Client를 사용하여 데이터를 조회하는 방법을 자세히 알아볼 것입니다.

3.1 기본 쿼리 작성

먼저, 간단한 GraphQL 쿼리를 작성해봅시다. 예를 들어, 사용자 목록을 가져오는 쿼리를 만들어보겠습니다.

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

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

interface User {
  id: string;
  name: string;
  email: string;
}

interface UsersData {
  users: User[];
}

const UserList: React.FC = () => {
  const { loading, error, data } = useQuery<UsersData>(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data?.users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
};

이 예제에서 useQuery 훅은 쿼리의 실행 상태(loading), 오류(error), 그리고 결과 데이터(data)를 반환합니다. 타입스크립트를 사용함으로써 data 객체의 구조를 명확히 정의할 수 있습니다.

3.2 쿼리 변수 사용하기

때로는 쿼리에 동적인 변수를 전달해야 할 때가 있습니다. Apollo Client에서는 이를 쉽게 처리할 수 있습니다.

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

interface UserData {
  user: User;
}

interface UserVars {
  id: string;
}

const UserProfile: React.FC<{ userId: string }> = ({ userId }) => {
  const { loading, error, data } = useQuery<UserData, UserVars>(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h2>{data?.user.name}</h2>
      <p>Email: {data?.user.email}</p>
    </div>
  );
};

여기서 useQuery 훅의 제네릭 타입으로 UserData와 UserVars를 전달하여 타입 안정성을 확보했습니다.

3.3 쿼리 결과 캐싱

Apollo Client는 기본적으로 쿼리 결과를 캐시합니다. 이는 동일한 쿼리를 여러 번 실행할 때 성능을 크게 향상시킵니다. 하지만 때로는 캐시를 무시하고 항상 새로운 데이터를 가져와야 할 때도 있습니다.

const { loading, error, data } = useQuery<UserData, UserVars>(GET_USER, {
  variables: { id: userId },
  fetchPolicy: 'network-only', // 항상 네트워크에서 데이터를 가져옵니다.
});

fetchPolicy 옵션을 사용하여 캐싱 전략을 제어할 수 있습니다.

3.4 쿼리 결과 업데이트

때로는 쿼리 결과를 수동으로 업데이트해야 할 때가 있습니다. Apollo Client의 cache.modify 메서드를 사용하면 이를 쉽게 할 수 있습니다.

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

const updateUserEmail = (cache: ApolloCache<any>, userId: string, newEmail: string) => {
  cache.modify({
    id: cache.identify({ __typename: 'User', id: userId }),
    fields: {
      email: () => newEmail,
    },
  });
};

이 함수를 사용하면 캐시의 특정 사용자 데이터를 직접 수정할 수 있습니다.

3.5 쿼리 에러 처리

GraphQL 쿼리 실행 중 발생할 수 있는 다양한 에러를 적절히 처리하는 것이 중요합니다. Apollo Client는 네트워크 오류와 GraphQL 오류를 모두 처리할 수 있는 방법을 제공합니다.

const { loading, error, data } = useQuery<UserData, UserVars>(GET_USER, {
  variables: { id: userId },
  onError: (error) => {
    console.error('GraphQL 쿼리 에러:', error.message);
    // 여기서 에러를 사용자에게 표시하거나 로깅할 수 있습니다.
  }
});

if (error) {
  if (error.networkError) {
    return <p>네트워크 오류가 발생했습니다. 인터넷 연결을 확인해주세요.</p>;
  }
  if (error.graphQLErrors) {
    return (
      <ul>
        {error.graphQLErrors.map(({ message }, i) => (
          <li key={i}>GraphQL 오류: {message}</li>
        ))}
      </ul>
    );
  }
}

이렇게 하면 네트워크 오류와 GraphQL 오류를 구분하여 처리할 수 있습니다.

이 다이어그램은 GraphQL 쿼리 실행의 전체 프로세스를 보여줍니다. 쿼리 정의부터 시작하여 데이터 렌더링과 캐시 업데이트까지의 흐름을 시각화했습니다.

💡 Pro Tip: Apollo Client의 refetch 함수를 사용하면 특정 쿼리의 데이터를 수동으로 새로고침할 수 있습니다. 이는 사용자 액션에 따라 데이터를 갱신해야 할 때 유용합니다.

const { loading, error, data, refetch } = useQuery<UserData, UserVars>(GET_USER, {
  variables: { id: userId },
});

// 데이터 새로고침
const handleRefresh = () => {
  refetch();
};

이제 Apollo Client와 타입스크립트를 사용하여 GraphQL 쿼리를 효과적으로 실행하는 방법을 살펴보았습니다. 다음 섹션에서는 GraphQL 뮤테이션을 수행하는 방법에 대해 알아보겠습니다. 뮤테이션을 통해 서버의 데이터를 수정하고, 이를 클라이언트의 캐시와 동기화하는 방법을 배우게 될 것입니다. 계속해서 Apollo Client의 강력한 기능들을 탐험해볼까요? 🚀

4. GraphQL 뮤테이션 수행하기 ✏️

GraphQL 뮤테이션은 서버의 데이터를 수정하는 데 사용됩니다. Apollo Client를 사용하면 타입스크립트와 함께 뮤테이션을 쉽고 안전하게 수행할 수 있습니다. 이 섹션에서는 뮤테이션을 정의하고 실행하는 방법, 그리고 뮤테이션 후 캐시를 업데이트하는 방법에 대해 알아보겠습니다.

4.1 기본 뮤테이션 작성

먼저, 간단한 뮤테이션을 작성해봅시다. 예를 들어, 사용자 정보를 업데이트하는 뮤테이션을 만들어보겠습니다.

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

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!, $email: String!) {
    updateUser(id: $id, name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

interface UpdateUserVars {
  id: string;
  name: string;
  email: string;
}

interface UpdateUserResult {
  updateUser: User;
}

const UserUpdateForm: React.FC<{ userId: string }> = ({ userId }) => {
  const [updateUser, { loading, error }] = useMutation<UpdateUserResult, UpdateUserVars>(UPDATE_USER);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const name = formData.get('name') as string;
    const email = formData.get('email') as string;

    try {
      const result = await updateUser({
        variables: { id: userId, name, email },
      });
      console.log('User updated:', result.data?.updateUser);
    } catch (e) {
      console.error('Error updating user:', e);
    }
  };

  if (loading) return <p>Updating...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" placeholder="New name" required />
      <input name="email" type="email" placeholder="New email" required />
      <button type="submit">Update User</button>
    </form>
  );
};

이 예제에서 useMutation 훅은 뮤테이션 함수와 함께 로딩 상태와 에러 정보를 반환합니다. 타입스크립트를 사용하여 뮤테이션의 변수와 결과의 타입을 명확히 정의했습니다.

4.2 뮤테이션 후 캐시 업데이트

뮤테이션 후에는 Apollo Client의 캐시를 업데이트하여 UI가 최신 데이터를 반영하도록 해야 합니다. 이를 위해 update 함수를 사용할 수 있습니다.

const [updateUser] = useMutation<UpdateUserResult, UpdateUserVars>(UPDATE_USER, {
  update(cache, { data }) {
    if (!data) return;
    
    cache.modify({
      id: cache.identify({ __typename: 'User', id: data.updateUser.id }),
      fields: {
        name: () => data.updateUser.name,
        email: () => data.updateUser.email,
      },
    });
  },
});

이 update 함수는 뮤테이션이 성공적으로 완료된 후 호출되며, 캐시의 해당 사용자 데이터를 새로운 값으로 업데이트합니다.

4.3 낙관적 UI 업데이트

사용자 경험을 향상시키기 위해 낙관적 UI 업데이트를 구현할 수 있습니다. 이는 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 기법입니다.

const [updateUser] = useMutation<UpdateUserResult, UpdateUserVars>(UPDATE_USER, {
  optimisticResponse: (vars) => ({
    updateUser: {
      __typename: 'User',
      id: vars.id,
      name: vars.name,
      email: vars.email,
    },
  }),
  update(cache, { data }) {
    // 위와 동일한 update 로직
  },
});

optimisticResponse 옵션을 사용하면 뮤테이션 요청이 서버로 전송되는 즉시 UI가 업데이트됩니다.

4.4 에러 처리

뮤테이션 수행 중 발생할 수 있는 에러를 적절히 처리하는 것이 중요합니다.

const [updateUser] = useMutation<UpdateUserResult, UpdateUserVars>(UPDATE_USER, {
  onError: (error) => {
    console.error('Mutation error:', error.message);
    // 여기서 사용자에게 에러 메시지를 표시할 수 있습니다.
  },
});

// 뮤테이션 실행 시
try {
  const result = await updateUser({ variables: { id, name, email } });
  // 성공 처리
} catch (e) {
  // 에러 처리
  if (e instanceof ApolloError) {
    if (e.networkError) {
      console.log('Network error:', e.networkError);
    } else if (e.graphQLErrors) {
      e.graphQLErrors.forEach((error) => {
        console.log('GraphQL error:', error.message);
      });
    }
  }
}

이렇게 하면 네트워크 오류와 GraphQL 오류를 구분하여 처리할 수 있습니다.

이 다이어그램은 GraphQL 뮤테이션의 전체 프로세스를 보여줍니다. 뮤테이션 정의부터 시작하여 서버 요청, 응답 처리, 캐시 업데이트, 그리고 에러 처리까지의 흐름을 시각화했습니다.

💡 Pro Tip: 복잡한 뮤테이션의 경우, Apollo Client의 refetchQueries 옵션을 사용하여 관련된 쿼리들을 자동으로 다시 실행할 수 있습니다. 이는 뮤테이션 후 여러 관련 데이터를 갱신해야 할 때 유용합니다.

const [updateUser] = useMutation<UpdateUserResult, UpdateUserVars>(UPDATE_USER, {
  refetchQueries: [
    { query: GET_USER, variables: { id: userId } },
    'GetUserPosts'
  ],
});

이제 Apollo Client와 타입스크립트를 사용하여 GraphQL 뮤테이션을 효과적으로 수행하는 방법을 살펴보았습니다. 다음 섹션에서는 Apollo Client의 고급 기능들에 대해 더 자세히 알아보겠습니다. 캐시 정책, 에러 처리, 네트워크 상태 관리 등 Apollo Client의 강력한 기능들을 더 깊이 탐험해볼 준비가 되셨나요? 🚀

5. Apollo Client의 고급 기능 🔧

Apollo Client는 기본적인 쿼리와 뮤테이션 기능 외에도 다양한 고급 기능을 제공합니다. 이 섹션에서는 캐시 정책, 에러 처리, 네트워크 상태 관리 등 Apollo Client의 고급 기능들을 살펴보겠습니다.

5.1 캐시 정책 설정

Apollo Client의 캐시 정책을 적절히 설정하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

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

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://your-graphql-endpoint.com/graphql' }),
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          users: {
            merge(existing, incoming) {
              return incoming;
            },
          },
        },
      },
      User: {
        fields: {
          name: {
            read(name: string | undefined) {
              return name ? name.toUpperCase() : name;
            },
          },
        },
      },
    },
  }),
});

이 예제에서는 users 쿼리에 대한 병합 정책과 User 타입의 name 필드에 대한 읽기 정책을 설정했습니다.

5.2 에러 처리 및 로깅

Apollo Client는 네트워크 오류와 GraphQL 오류를 구분하여 처리할 수 있는 기능을 제공합니다.

import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
import { onError } from "@apollo/client/link/error";

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({ uri: 'https://your-graphql-endpoint.com/graphql' });

const client = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache()
});

이 설정을 통해 모든 GraphQL 및 네트워크 오류를 중앙에서 로깅하고 처리할 수 있습니다.

5.3 네트워크 상태 관리

Apollo Client는 네트워크 상태를 관리하는 기능을 제공합니다. 이를 통해 오프라인 상태에서의 동작을 제어할 수 있습니다.

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { RetryLink } from '@apollo/client/link/retry';

const retryLink = new RetryLink({
  delay: {
    initial: 300,
    max: Infinity,
    jitter: true
  },
  attempts: {
    max: 5,
    retryIf: (error, _operation) => !!error
  }
});

const httpLink = new HttpLink({ uri: 'https://your-graphql-endpoint.com/graphql' });

const client = new ApolloClient({
  link: from([retryLink, httpLink]),
  cache: new InMemoryCache()
});

이 설정은 네트워크 오류 발생 시 자동으로 재시도를 수행합니다.

5.4 서버 사이드 렌더링 (SSR) 지원

Apollo Client는 서버 사이드 렌더링을 지원합니다. 이를 통해 초기 페이지 로드 성능을 향상시킬 수 있습니다.

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

const client = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: 'https://your-graphql-endpoint.com/graphql',
    credentials: 'same-origin'
  }),
  cache: new InMemoryCache(),
});

// 서버에서
const { getDataFromTree } = require('@apollo/client/react/ssr');

getDataFromTree(app).then(() => {
  // 초기 상태를 클라이언트에 전달
  const initialState = client.extract();
  const html = `
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${ReactDOMServer.renderToString(app)}</div>
        <script>
          window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(/</g, '\\u003c')}
        </script>
      </body>
    </html>
  `;
  res.send(html);
});

// 클라이언트에서
const client = new ApolloClient({
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
  link: createHttpLink({
    uri: 'https://your-graphql-endpoint.com/graphql',
  }),
});

이 설정을 통해 서버에서 초기 데이터를 로드하고, 이를 클라이언트에 전달하여 초기 렌더링 성능을 최적화할 수 있습니다.

이 다이어그램은 Apollo Client의 주요 고급 기능들을 시각화하여 보여줍니다. 각 기능들이 어떻게 상호 연결되어 있는지, 그리고 전체적인 성능 최적화에 어떻게 기여하는지를 나타냅니다.

💡 Pro Tip: Apollo Client의 @client 지시어를 사용하면 로컬 상태 관리도 GraphQL을 통해 할 수 있습니다. 이를 통해 서버 데이터와 클라이언트 로컬 데이터를 일관된 방식으로 관리할 수 있습니다.

const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Query: {
      cartItems: () => {
        return localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
      },
    },
  },
});

이제 Apollo Client의 고급 기능들에 대해 살펴보았습니다. 이러한 기능들을 적절히 활용하면 GraphQL 기반의 애플리케이션을 더욱 강력하고 효율적으로 만들 수 있습니다. 다음 섹션에서는 Apollo Client와 타입스크립트를 사용할 때의 베스트 프랙티스와 주의사항에 대해 알아보겠습니다. 계속해서 Apollo Client의 세계를 탐험해볼까요? 🚀

6. Apollo Client와 TypeScript 사용 시 베스트 프랙티스 🏆

Apollo Client와 TypeScript를 함께 사용할 때, 몇 가지 베스트 프랙티스를 따르면 더욱 효율적이고 안정적인 코드를 작성할 수 있습니다. 이 섹션에서는 이러한 베스트 프랙티스와 주의사항에 대해 알아보겠습니다.

6.1 코드 생성 도구 활용

GraphQL Code Generator를 사용하면 GraphQL 스키마로부터 TypeScript 타입을 자동으로 생성할 수 있습니다. 이는 타입 안정성을 크게 향상시키며, 개발 생산성을 높입니다.

// codegen.yml
overwrite: true
schema: "http://localhost:4000/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:  
      withHooks: true
      withHOC: false
      withComponent: false

// 터미널에서 실행
npm run codegen

이렇게 생성된 타입과 훅을 사용하면 타입 안정성이 보장되며, 자동 완성 기능을 활용할 수 있습니다.

6.2 타입 안전한 쿼리 작성

생성된 타입을 활용하여 타입 안전한 쿼리를 작성할 수 있습니다.

import { useGetUserQuery, GetUserQuery, GetUserQueryVariables } from './generated/graphql';

const UserProfile: React.FC<{ userId: string }> = ({ userId }) => {
  const { data, loading, error } = useGetUserQuery<GetUserQuery, GetUserQueryVariables>({
    variables: { id: userId }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>{data?.user?.name}</div>;
};

6.3 Fragment 활용

Fragment를 사용하면 코드 재사용성을 높이고 타입 안정성을 개선할 수 있습니다.

const USER_FRAGMENT = gql`
  fragment UserFields on User {
    id
    name
    email
  }
`;

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      ...UserFields
    }
  }
  ${USER_FRAGMENT}
`;

6.4 Apollo Client의 타입 정의 확장

Apollo Client의 타입 정의를 확장하여 커스텀 필드나 함수를 추가할 수 있습니다.

import { ApolloCache, NormalizedCacheObject } from '@apollo/client';

declare module '@apollo/client' {
  export interface ApolloCache<TCacheShape> extends ApolloCache<NormalizedCacheObject> {
    customMethod(): void;
  }
}

6.5 에러 처리 타입 정의

GraphQL 에러에 대한 타입을 정의하여 더 안전한 에러 처리를 할 수 있습니다.

interface GraphQLError {
  message: string;
  locations?: { line: number, column: number }[];
  path?: string[];
  extensions?: Record<string, any>;
}

const handleError = (error: GraphQLError) => {
  console.error(`Error: ${error.message}`);
  // 추가적인 에러 처리 로직
};

6.6 타입 가드 활용

타입 가드를 사용하여 런타임에 타입을 확인하고 타입 안정성을 높일 수 있습니다.

interface User {
  id: string;
  name: string;
}

interface Admin extends User {
  role: 'admin';
}

const isAdmin = (user: User | Admin): user is Admin => {
  return 'role' in user && user.role === 'admin';
};

const UserOrAdminComponent: React.FC<{ user: User | Admin }> = ({ user }) => {
  if (isAdmin(user)) {
    return <div>Admin: {user.name}</div>;
  }
  return <div>User: {user.name}</div>;
};

이 다이어그램은 Apollo Client와 TypeScript를 함께 사용할 때의 주요 베스트 프랙티스를 시각화합니다. 각 프랙티스가 어떻게 전체적인 타입 안정성 향상에 기여하는지를 보여줍니다.

💡 Pro Tip: Apollo Client의 useQuery와 useMutation 훅을 사용할 때, 제네릭 타입을 명시적으로 지정하면 더욱 강력한 타입 체크를 할 수 있습니다.

const { data, loading, error } = useQuery<GetUserQuery, GetUserQueryVariables>(GET_USER, {
  variables: { id: userId }
});

이러한 베스트 프랙티스를 따르면 Apollo Client와 TypeScript를 사용하는 프로젝트의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. 타입 안정성이 보장되면 런타임 에러를 줄이고, 개발 생산성을 높일 수 있습니다. 또한, 자동 완성과 같은 IDE 기능을 최대한 활용할 수 있어 개발 경험도 향상됩니다.

다음 섹션에서는 Apollo Client와 TypeScript를 사용한 실제 프로젝트 예제를 통해 이러한 개념들을 어떻게 적용할 수 있는지 살펴보겠습니다. 실제 코드를 통해 배운 내용을 종합적으로 적용해보는 시간을 가져볼까요? 🚀