Apollo Link 개요와 주요 기능

 

Apollo Link

 

• Apollo Client에서 GraphQL 요청을 전송하고 응답을 처리하는 과정을 확장하거나 수정할 수 있는 유연한 미들웨어 시스템이다.
• 링크 체인을 구성하여 다양한 기능을 수행할 수 있다.

 

 

1. 요청 수정
   • 각 요청에 대해 헤더나 인증 토큰 등을 추가하거나, 변형할 수 있다.
     
     
2. 에러 처리
   • 요청 중에 발생하는 에러를 처리하거나, 재시도 로직을 구현할 수 있다.
     
     
3. 캐시 관리
   • 캐시를 관리하거나 요청을 캐시를 사용해 최적화할 수 있다.
     
     
4. 네트워크 요청
   • HTTP를 통해 요청을 보내거나 WebSocket을 사용하여 실시간 통신을 할 수 있다.
     
     

 

 

Apollo Link는 여러 개의 링크를 체인으로 연결하여 각 단계마다 처리 로직을 추가할 수 있다.

• HttpLink는 기본적으로 HTTP 요청을 보내는 역할을 하고,
• ErrorLink는 에러를 처리하며,
• RetryLink는 네트워크 요청을 재시도하게 하는 등의 역할을 수행한다.

 

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

// ErrorLink 설정
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}`);
});

// HttpLink 설정
const httpLink = new HttpLink({ uri: '<https://example.com/graphql>' });

// 링크 체인 설정
const link = ApolloLink.from([errorLink, httpLink]);

// Apollo Client 생성
const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

이렇게 Apollo Link를 사용하면 요청 흐름을 세분화하고, 커스터마이징 할 수 있다.