1. Apollo가 뭐에요?
- Apollo는 GraphQL을 Client와 Server 모두에서 편하게 사용할 수 있는 라이브러리
1-1) Apollo Client
- Apollo Client를 사용하면 쿼리 캐싱, loading 상태 및 Error 처리, 서버와 데이터 동기화 유지와 같은 이점이 있다.
- 웹,ios 또는 Android 에서 React를 사용하든 angular를 사용하든 상관없이 가져온 데이터를 프론트엔드 Component에서 사용할 수 있다.
1-2) Apollo Server
- Apollo Server는 Apollo Client를 포함한 모든 GraphQL 클라이언트와 호환되는 사양 준수의 오픈 소스 GraphQL 서버이다.
- 모든 소스의 데이터를 사용할 수 있는 자체 문서화 가능한 자체 문서 GraphQL API를 구축하는 가장 좋은 방법이다.
- 최신버전은 4지만 아직 많은 사람들이 3을 사용하고 있다.
2. Apollo Server V3
- 현재 사용했던 코드를 이용하여 Apollo Server를 사용해보자.
- 먼저 전에 설치한 GraphQL-express를 제거하고 Apollo server를 설치한다.
- 코드를 변경한다.
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 port = 4000
const loadFiles = loadFilesSync('**/*',{
extensions : ['graphql']
})
const loadedResolvers = loadFilesSync(path.join(__dirname,"**/*.resolvers.js"))
async function startApolloServer(){
const app = express()
const schema = makeExecutableSchema({
typeDefs : loadFiles,
resolvers : loadedResolvers
})
const server = new ApolloServer({
schema
})
await server.start()
server.applyMiddleware({app, path:'/graphql'})
app.listen(port,()=>{
console.log('running')
})
}
startApolloServer()
3. Apollo Server 3->4
- Apollo Server 패키지 삭제
npm uninstall apollo-server-express
const { loadFilesSync } = require('@graphql-tools/load-files')
const { makeExecutableSchema } = require('@graphql-tools/schema')
const {ApolloServer} = require('@apollo/server')
const express = require('express')
const cors = require('cors')
const {json} = require('body-parser')
const {expressMiddleware} = require('@apollo/server/express4')
const path = require('path')
const port = 4000
const loadFiles = loadFilesSync('**/*',{
extensions : ['graphql']
})
const loadedResolvers = loadFilesSync(path.join(__dirname,"**/*.resolvers.js"))
async function startApolloServer(){
const app = express()
const schema = makeExecutableSchema({
typeDefs : loadFiles,
resolvers : loadedResolvers
})
const server = new ApolloServer({
schema
})
await server.start()
app.use('/graphql',
cors(),
json(),
expressMiddleware(server,{
context:async({req}) => ({token:req.headers.token})
})
)
app.listen(port,()=>{
console.log('running')
})
}
startApolloServer()