기초 개념을 배웠으니, 이번에는 Movie api를 만들어보면서 실제로 사용해보겠습니다.
이 실습은 노마드코더 GraphQL강의를 바탕으로 작성하였습니다.
GraphQL은 내가 원하는 정보들만 불러올 수 있습니다.
그래서 아래의 문제들을 모두 해결이 가능합니다.
vscode IDE에서의 graphQL 적용을 위해 extension을 설치해 줍니다.
a. github에 repository를 생성합니다.
b. 프로젝트 폴더를 생성 한 뒤 IDE에서 npm init
명령어를 실행합니다.
c. git init
을 해준 뒤 github에 생성한 repository에 업로드해줍니다.
npm init을 할 때, 터미널에서 뭔가 작동하다가 말고, 메시지를 날리길래 오류인가 싶어서
습관적으로 터미널에서 실행을 끄고 다시 시작을 한다고 엄하게 시간을 날려버렸는데,
알고보니 package.json을 설치하려면 간단한 작성이 필요해서 그에 대한 작성을 기다리는 글이었네요..ㅠㅠ
package.json생성 시 이름(name), 버전(version)
은 필수적으로 입력해야하는 필드입니다.
그 외의 질문들은 description / git repository / keyword / author / license
가 있습니다.
npm i graphql-yoga
npm i nodemon -D
npm i @babel/cli -D
npm i @babel/core -D
npm i @babel/node -D
npm i @babel/preset-env -D
.barbelrc 파일 생성
{"presets":["@babel/preset-env"]}
package.json 파일 수정
"scripts": {
"start": "nodemon --exec babel-node index.js"
}
graphql폴더 > schema.js 파일 생성
import { buildSchema } from "graphql";
const schema = buildSchema(`
type Query {
name: String!
}
`);
export default schema;
정보를 바꾸는 작업을 할 때
를 말합니다.graphql폴더 > resolvers.js 파일 생성
Resolver는 Query를 resolver(해결)하는 것을 말합니다.
const resolvers = {
Query: {
name: () => "nicolas"
}
};
export default resolvers;
index.js 파일 생성
server 테스트를 할 때, 꼭 schema를 작성 후 해야 오류가 나지않습니다.
이 때, schema는 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명입니다.
즉, 무엇을 받을지, 무엇을 줄지에 대한 설명입니다.
import { createServer } from "@graphql-yoga/node";
import schema from "./graphql/schema";
import resolvers from "./graphql/resolvers";
const server = createServer({
schema: {
typeDefs: schema,
resolvers,
}
});
server.start(() => console.log("Graphql Server Running"));
자, 이제 server가 작동하는지 알아볼 시간이 되었습니다.
만약 제대로 작성이 되었다면 터미널에서 아래와 같은 이미지를 확인 할 수 있을겁니다.