apollo client vs apollo server

날짜

Nov 17, 2024 09:08 PM

apollo client : api로 apollo server에 데이터를 요청

graphql 쿼리 정의

apollo server : api제공, 클라 요청 처리(데이터 반환)

graphql 스키마 정의, 리졸버(데이터 반환 함수) 정의
서버환경(ex. node.js, Express)에서 동작

client 코드


// apollo-server 설치: npm install apollo-server graphql
const { ApolloServer, gql } = require('apollo-server');

// GraphQL 스키마 정의
const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

// 샘플 데이터
const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

// 리졸버 정의 (데이터를 반환하는 함수)
const resolvers = {
  Query: {
    books: () => books,
  },
};

// Apollo Server 인스턴스 생성
const server = new ApolloServer({ typeDefs, resolvers });

// 서버 시작
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

server 코드


// apollo-client 설치: npm install @apollo/client graphql
import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

// Apollo Client 설정
const client = new ApolloClient({
  uri: 'http://localhost:4000/', // Apollo Server URL
  cache: new InMemoryCache(),
});

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

// 컴포넌트에서 데이터 페칭
function Books() {
  const { loading, error, data } = useQuery(GET_BOOKS);

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

  return (
    <div>
      <h2>Books</h2>
      <ul>
        {data.books.map((book) => (
          <li key={book.title}>
            <strong>{book.title}</strong> by {book.author}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 애플리케이션 루트 컴포넌트
function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h1>Apollo Client Example</h1>
        <Books />
      </div>
    </ApolloProvider>
  );
}

export default App;