Apollo

Apollo

GraphQL 을 client, server 모두에서 편하게 사용 가능하도록 해주는 라이브러리

 

 

Apollo Client

• 쿼리 캐싱 가능
• loading 상태 및 Error 처리 가능
• 서버와 데이터 동기화 유지 가능

 

Apllo Server

Apollo 클라이언트를 포함한 모든 GraphQL 클라이언트와 호환되는 오픈 소스 GraphQL 서버

 

Apollo-server 3 버전 설치

npm install apollo-server-express

 

소스 코드 작성

const { loadFilesSync } = require('@graphql-tools/load-files');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const { ApolloServer } = require('apollo-server-express');
const express = require('express');
const path = require('path');

const loadedTypes = loadFilesSync('**/*', {
  extensions: ['graphql'],
});

const loadedResolvers = loadFilesSync(path.join(__dirname, '**/*.resolvers.js'));

async function startApolloServer() {
  const app = express();

  const schema = makeExecutableSchema({
    typeDefs: [loadedTypes],
    resolvers: loadedResolvers,
  });

  // 아폴로 서버 객체 생성
  const server = new ApolloServer({
    schema,
  });
  
  // 아폴로 서버 시작을 기다려줌
  await server.start();

  // 아폴로 미들웨어와 익스프레스 서버 연결
  server.applyMiddleware({ app, path: 'graphql' });

  app.listen(4000, () => {
    console.log('앱 실행!');
  });
}

startApolloServer();

 

Apollo Sandbox Tool

graphQL 을 위한 Postman 같은 도구

http://localhost:4000/graphql

 

Apollo-server 4 버전으로 변경

 

기존 패키지 삭제

npm uninstall apollo-server-express

 

필요한 패키지 설치

npm install @apollo/server cors body-parser

 

소스 코드 변경

// 삭제
server.applyMiddleware({ app, path: 'graphql' });

// 추가
const { json } = require('body-parser');
const cors = require('cors');
const { expressMiddleware } = require('@apollo/server/express4');

app.use(
  '/graphql',
  cors(),
  json(),
  expressMiddleware(server, {
    context: async ({ req }) => ({ token: req.headers.token }),
  })
);