[Next.js] Apollo client 연결하기

Apollo client란?

[GraphQL] Apollo Client 란? / 사용법

 

Next.js 프로젝트에 apollo client 설치하기

npm i @apollo/client

 

Apollo client 만들기

// components/apollo.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

// 새로운 apollo client 만들기
const client = new ApolloClient({
  uri: '나의 apollo server 주소',
  cache: new InMemoryCache(),
});

export default client;

 

Next.js 페이지에서 쿼리 사용하고, 데이터 불러오기

// 위에서 만든 apollo client 불러오기
import client from '../components/apollo';

const Home = (data) => {
  // 불러온 데이터 확인하기
  console.log(data)
  return (
    <div>Home</div>
  );
};

// getStaticProps 함수는, React 컴포넌트가 실행되기 전에 실행된다!
export const getStaticProps = async() => {
  // apollo에 연결된 graphql쿼리문 사용하고, 데이터 불러오기
  const { data } = await client.query({
    query: gql`나의 쿼리문`;
  });

  // Home의 props로 data 보내주기
  return {
    props: {
      data
    },
  };
}

export default Home;