46일차

🦫

46일차

Part 14. GraphQL 맛보기 (Server 만들기)

https://slides.com/woongjae/graphql2021

GraphQL 2021

그래프큐엘 2021

slides.com

https://graphql.org/

GraphQL | A query language for your API

Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featu

graphql.org

🔗 Apollo 를 이용해서 Node.js 서버 만들기

https://github.com/apollographql/apollo-server

GitHub - apollographql/apollo-server: 🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop

🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more. - GitHub - apollographql/apollo-server...

github.com

$ npm i apollo-server graphql

$ npm i nodemon -D

// ./index.js

const { ApolloServer, gql } = require("apollo-server");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    hello: () => "world",
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true, // ⭐
});

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

// package.json

{
  ...
  "scripts": {
    "dev": "nodemon index.js" // $ npm run dev
  },
  ...
}

🔗 typeDef 와 resolver

typeDef(s)
- GraphQL Schema 를 정의하는 곳
  - Object
  - Query
  - Mutation
  - Input
- gpl 과 Tagged Template Literals 로 작성한다.

resolver(s)
- Schema 에 해당하는 구현을 하는 곳
- 요청을 받아 데이터를 조회, 수정, 삭제

🔗 여러개의 데이터 조회하기 - Query

// ./index.js

const { ApolloServer, gql } = require("apollo-server");
const { readFileSync } = require("fs");
const { join } = require("path");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    books: [Book]
  }

  type Book {
    bookId: Int
    title: String
    message: String
    author: String
    url: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    hello: () => "world",
    books: () => {
      return JSON.parse(readFileSync(join(__dirname, "books.json")).toString());
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

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

// ./books.json

[
  {
    "bookId": 1,
    "title": "titke test",
    "message": "message test",
    "author": "author test",
    "url": "url test"
  },
  {
    "bookId": 2,
    "title": "titke test 2",
    "message": "message test 2",
    "author": "author test 2",
    "url": "url test 2"
  }
]

🔗 특정 데이터 조회하기 - Query

// ./index.js

const { ApolloServer, gql } = require("apollo-server");
const { readFileSync } = require("fs");
const { join } = require("path");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    books: [Book]
    book(bookId: Int): Book
  }

  type Book {
    bookId: Int
    title: String
    message: String
    author: String
    url: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    hello: () => "world",
    books: () => {
      return JSON.parse(readFileSync(join(__dirname, "books.json")).toString());
    },
    book: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      return books.find((book) => book.bookId === args.bookId);
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

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

🔗 데이터 추가하기 - Mutation

// ./index.js

const { ApolloServer, gql } = require("apollo-server");
const { readFileSync, writeFileSync } = require("fs");
const { join } = require("path");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    books: [Book]
    book(bookId: Int): Book
  }

  type Mutation {
    addBook(title: String, message: String, author: String, url: String): Book
  }

  type Book {
    bookId: Int
    title: String
    message: String
    author: String
    url: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  // 데이터 조회
  Query: {
    hello: () => "world",
    books: () => {
      return JSON.parse(readFileSync(join(__dirname, "books.json")).toString());
    },
    book: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      return books.find((book) => book.bookId === args.bookId);
    },
  },
  // 데이터 추가
  Mutation: {
    addBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const maxId = Math.max(...books.map((book) => book.bookId));
      const newBook = { ...args, bookId: maxId + 1 };
      writeFileSync(
        join(__dirname, "books.json"),
        JSON.stringify([...books, newBook])
      );
      return newBook;
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

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

// ./books.json

[{"bookId":1,"title":"titke test","message":"message test","author":"author test","url":"url test"},{"bookId":2,"title":"titke test 2","message":"message test 2","author":"author test 2","url":"url test 2"},{"title":"t","message":"m","author":"a","url":"u","bookId":3}]

🔗 데이터 변경하기 - Mutation

// ./index.js

const { ApolloServer, gql } = require("apollo-server");
const { readFileSync, writeFileSync } = require("fs");
const { join } = require("path");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    books: [Book]
    book(bookId: Int): Book
  }

  type Mutation {
    addBook(title: String, message: String, author: String, url: String): Book
    editBook(
      bookId: Int
      title: String
      message: String
      author: String
      url: String
    ): Book
  }

  type Book {
    bookId: Int
    title: String
    message: String
    author: String
    url: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  // 데이터 조회
  Query: {
    hello: () => "world",
    books: () => {
      return JSON.parse(readFileSync(join(__dirname, "books.json")).toString());
    },
    book: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      return books.find((book) => book.bookId === args.bookId);
    },
  },

  // 데이터 추가 & 변경 & 삭제
  Mutation: {
    // 추가
    addBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const maxId = Math.max(...books.map((book) => book.bookId));
      const newBook = { ...args, bookId: maxId + 1 };
      writeFileSync(
        join(__dirname, "books.json"),
        JSON.stringify([...books, newBook])
      );
      return newBook;
    },

    editBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const newBooks = books.map((book) => {
        if (book.bookId === args.bookId) {
          return args;
        } else {
          return book;
        }
      });
      writeFileSync(join(__dirname, "books.json"), JSON.stringify(newBooks));
      return args;
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

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

// ./package.json

[{"bookId":1,"title":"titke test","message":"message test","author":"author test","url":"url test"},{"bookId":2,"title":"titke test 2","message":"message test 2","author":"author test 2","url":"url test 2"},{"bookId":3,"title":"t1","message":"m","author":"a","url":"u"}]

🔗 데이터 삭제하기 - Mutation

// ./index.js

const { ApolloServer, gql } = require("apollo-server");
const { readFileSync, writeFileSync } = require("fs");
const { join } = require("path");

// The GraphQL schema
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    books: [Book]
    book(bookId: Int): Book
  }

  type Mutation {
    addBook(title: String, message: String, author: String, url: String): Book
    editBook(
      bookId: Int
      title: String
      message: String
      author: String
      url: String
    ): Book
    deleteBook(bookId: Int): Book
  }

  type Book {
    bookId: Int
    title: String
    message: String
    author: String
    url: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  // 데이터 조회
  Query: {
    hello: () => "world",
    books: () => {
      return JSON.parse(readFileSync(join(__dirname, "books.json")).toString());
    },
    book: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      return books.find((book) => book.bookId === args.bookId);
    },
  },

  // 데이터 추가 & 변경 & 삭제
  Mutation: {
    // 추가
    addBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const maxId = Math.max(...books.map((book) => book.bookId));
      const newBook = { ...args, bookId: maxId + 1 };
      writeFileSync(
        join(__dirname, "books.json"),
        JSON.stringify([...books, newBook])
      );
      return newBook;
    },

    editBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const newBooks = books.map((book) => {
        if (book.bookId === args.bookId) {
          return args;
        } else {
          return book;
        }
      });
      writeFileSync(join(__dirname, "books.json"), JSON.stringify(newBooks));
      return args;
    },

    deleteBook: (parent, args, context, info) => {
      const books = JSON.parse(
        readFileSync(join(__dirname, "books.json")).toString()
      );
      const deleted = books.find((book) => book.bookId === args.bookId);
      const newBooks = books.filter((book) => book.bookId !== args.bookId);
      writeFileSync(join(__dirname, "books.json"), JSON.stringify(newBooks));
      return deleted;
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

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

// ./package.json

[{"bookId":1,"title":"titke test","message":"message test","author":"author test","url":"url test"},{"bookId":2,"title":"titke test 2","message":"message test 2","author":"author test 2","url":"url test 2"}]

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

48일차 (0)	2022.03.30
47일차 (0)	2022.03.29
45일차 (0)	2022.03.28
43, 44일차 (0)	2022.03.26
42일차 (0)	2022.03.26

👩‍💻 Hong Yujin

46일차

🦫

46일차

Part 14. GraphQL 맛보기 (Server 만들기)

Part 14. GraphQL 맛보기 (Server 만들기)

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

티스토리툴바

46일차

🦫

46일차

Part 14. GraphQL 맛보기 (Server 만들기)

Part 14. GraphQL 맛보기 (Server 만들기)

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

'💬/ㅍㅅㅌㅋㅍㅅ 챌린지' Related Articles

티스토리툴바