Graph QL(2) - Apollo

📌시작하며

Graph QL 관련 자료를 찾다보니, Apollo를 함께 사용하는 것을 보았다.😎 Apollo는 무엇인지, 어떻게 적용할 수 있는지 알아보고 Graph QL 관련된 유튜브 영상에서 배운 내용을 나름대로 정리해보고자 한다.

✅Apollo란?

공식 문서의 설명을 살펴보자.

Apollo는 데이터를 통합하고 서비스들을 단일 분산 GraphQL API인 슈퍼그래프(supergraph)로 통합할 수 있는 개발자 플랫폼과 도구를 제공한다. Apollo는 처음으로 API를 구축하거나 API를 쿼리하거나, 플랫폼을 슈퍼그래프로 마이그레이션할 때까지, 어떤 단계나 규모에서도 GraphQL이 효과적으로 작동하도록 도와준다.

슈퍼그래프 : 여러 개의 GraphQL 서비스와 데이터 소스를 하나의 통일된 GraphQL API로 합친 것

즉, Apollo는 데이터와 서비스를 간단하게 통합하고 관리할 수 있게 해주고, GraphQL을 효율적으로 사용할 수 있도록 도와주는 도구다.

✅Apollo Server

Apollo Server는 사양을 준수하는 오픈 소스 GraphQL 서버로, Apollo 클라이언트를 비롯한 모든 GraphQL 클라이언트와 호환된다.

Apollo Server를 통해 간단한 설정으로 개발자가 빠르게 데이터를 가져올 수 있다!

➡️프로젝트 시작

📌 1. 새 프로젝트 만들기

mkdir graphql-server-example
cd graphql-server-example

📌 2. package.json 생성

npm init --yes && npm pkg set type="module"

📌 3. 종속성 설치

npm install @apollo/server graphql

➡️ GraphQL schema 설정

참고로, typeDefs = `` 로 작성하면 안의 schema 들이 string 처럼 표시되는데, vsCode 확장프로그램을 설치하면 적절하게 컬러가 변경되어 보기 좋아진다.

import { ApolloServer } from "@apollo/server"
import { startStandaloneServer } from "@apollo/server/standalone"

const typeDefs = `
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`

하나씩 살펴보자.

요소	설명
typeDefs	GraphQL 스키마 언어로 작성된 문자열
type Book	Book 타입에 대한 데이터 모델 정의
type Query	클라이언트가 실행할 수 있는 쿼리를 정의 API의 진입점 역할로, 클라이언트가 어떤 데이터를 요청할 수 있는지 규정

다음과 같이 데이터 모델을 추가할 수 있다!

const typeDefs = `
  type Book {
    title: String
    author: String
  }

  type Movie {
    title: String
    release: Int
  }

  type Query {
    books: [Book]
    movies: [Movie]
  }
`

➡️data set 설정

위에서는 데이터 구조를 정의했으니, 데이터를 정의하자. 위에서 type Query {books: [Book]}를 작성했는데 여기서 books를 지정해준다고 생각하면 된다.

const books = [
  {
    title: "The Awakening",
    author: "Kate Chopin",
  },
  {
    title: "City of Glass",
    author: "Paul Auster",
  },
]

➡️resolver 정의

data set을 정의했지만, Apollo Sever는 쿼리를 실행할 때 해당 data set을 사용해야 한다는 것을 알지 못하기 때문에, resolver를 생성한다.

const resolvers = {
  Query: {
    books: () => books,
  },
}

➡️ApolloSever 인스턴스 생성

//스키마 정의와 리졸버 집합 두 개의 매개변수를 작성한다.
const server = new ApolloServer({
  typeDefs,
  resolvers,
})

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
})

console.log(`🚀  Server ready at: ${url}`)

✅Apollo Client

Apollo Client는 JavaScript를 위한 종합적인 상태 관리 라이브러리다. 이 라이브러리를 사용해 GraphQL로 로컬 및 원격 데이터를 모두 관리할 수 있다. 이를 이용해 애플리케이션 데이터를 가져오고, 캐시하고, 수정하는 동시에 UI를 자동으로 업데이트할 수 있다.

핵심 @apollo/client 라이브러리는 React와의 통합을 제공한다.

➡️프로젝트 시작

📌 1. vite 이용해 React 세팅

npm create vite@latest

📌 2. 모듈 설치
두 가지 최상위 종속성을 설치한다.

• @apollo/client: Apollo 클라이언트를 설정하는 데 사용한다. 인메모리 캐시, 로컬 상태 관리, 오류 처리 및 React 기반 뷰 레이어가 포함된다.
• graphql: 이 패키지는 GraphQL 쿼리 구문 분석을 위한 로직을 제공한다.

npm install @apollo/client graphql

➡️ApolloClient 초기화

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  gql,
} from "@apollo/client"

//현재 로컬 환경에서 실행 되므로 uri는 위에서 설정한 4000번
const client = new ApolloClient({
  uri: "http://localhost:4000/",
  cache: new InMemoryCache(),
})

• uri: GraphQL 서버의 URL을 지정.
• cache: 아폴로 클라이언트가 쿼리 결과를 가져온 후 캐싱하는 데 사용하는 InMemoryCache의 인스턴스.

➡️데이터 가져오기

동일한 파일 안에서, 쿼리 문자열(gql 템플릿 리터럴로 래핑)을 사용하여 client.query()를 호출한다.

client
  .query({
    query: gql`
      query GetBooks {
        books {
          title
          author
        }
      }
    `,
  })
  .then((result) => console.log(result.data.books))
  .catch((error) => console.error(error))

➡️리액트에서 함께 사용하기

위와 같이 데이터를 불러와서 사용할 수도 있지만, 리액트에서 더 편리하게 이용할 수 있는 방법도 있다.

📌 1. ApolloProvider 감싸기
React의 Context.Provider 처럼 ApolloProvider를 이용해 React 앱을 래핑하고 Apollo 클라이언트를 컨텍스트에 배치하자.

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
)

📌 2. ApolloProvider 감싸기
ApolloProvider가 연결되면, useQuery로 데이터 요청을 시작할 수 있다. useQuery 훅은 GraphQL 데이터를 UI와 공유하는 React 훅이다!

import { useQuery, gql } from "@apollo/client"

// books 쿼리 정의
const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`

// DisplayBooks 컴포넌트
function DisplayBooks() {
  const { loading, error, data } = useQuery(GET_BOOKS)

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

  return data.books.map(({ title, author }, index) => (
    <div key={index}>
      <h3>{title}</h3>
      <p>{author}</p>
      <br />
    </div>
  ))
}

// App 컴포넌트 업데이트
export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <DisplayBooks />
    </div>
  )
}

🗂️참고 사이트

• https://www.apollographql.com/docs/