[next.js 13] react에서는 apolloclient를 사용할때 에러처리

React에서는 Apollo Client를 사용하여 GraphQL 데이터를 관리하고 불러올 수 있습니다. 이 때, useQuery나 useMutation과 같은 Apollo Hooks를 사용하여 에러 처리를 할 수 있습니다. 그러나, next.js 13 버전에서는 use 문법을 지원하지 않기 때문에, 예제를 찾아도 에러 처리 구문이 없는 것이 일반적입니다.

이 경우, Apollo Client에서 제공하는 Promise 문법을 사용하여 에러 처리를 할 수 있습니다. 예를 들어, useQuery 대신에 client.query를 사용하여 쿼리를 실행할 수 있습니다. 그리고 이때 반환되는 Promise에서 then과 catch를 사용하여 데이터와 에러를 처리할 수 있습니다 

아래는 예제 코드입니다.

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

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

client
  .query({
    query: gql`
      query GetDogs {
        dogs {
          id
          breed
        }
      }
    `,
  })
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

위 코드에서 query 메서드가 반환하는 Promise에서 then과 catch를 사용하여 결과와 에러를 처리합니다. 이와 같은 방법으로 next.js 13 버전에서도 Apollo Client를 사용하여 GraphQL 데이터를 관리하고 처리할 수 있습니다.