[Graphql] Graphql 프로젝트 적용해보기(1)

apollo를 활용한 server 구축하기

mkdir 원하는 폴더 명
cd 폴더 경로 이동

npm init --yes

package.json 파일 생성

	npm install @apollo/server graphql

root에다가 index.js 파일 생성

import { ApolloServer, gql } from "apollo-server";

// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = gql`
  #graphql
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.

  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. In this
  # case, the "books" query returns an array of zero or more Books (defined above).
  type Query {
    books: [Book]
  }
`;

const books = [
  {
    title: "The Awakening",
    author: "Kate Chopin",
  },
  {
    title: "City of Glass",
    author: "Paul Auster",
  },
];

// Resolvers define how to fetch the types defined in your schema.
// This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    books: () => books,
  },
};

// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// Passing an ApolloServer instance to the `startStandaloneServer` function:
//  1. creates an Express app
//  2. installs your ApolloServer instance as middleware
//  3. prepares your app to handle incoming requests

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

index.js 파일에 넣어주면 댐.

resolver

리졸버는 apollo 서버에 특정 유형과 관련된 데이터를 가져오는 방법을 알려줌.

const resolvers = {
  Query: {
    books: () => books,
  },
};

index.js에 추가

서버 구축

  // The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
    typeDefs,
    resolvers,
  });
  
  // Passing an ApolloServer instance to the `startStandaloneServer` function:
  //  1. creates an Express app
  //  2. installs your ApolloServer instance as middleware
  //  3. prepares your app to handle incoming requests
  const { url } = await startStandaloneServer(server, {
    listen: { port: 4000 },
  });
  
  console.log(`🚀  Server ready at: ${url}`);

index.js에 추가

서버 실행 하기

node index.js

package.json

{
  "name": "graphql-apollo-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server": "^3.4.0",
    "graphql": "^15.6.1"
  },
  "type": "module"
}

index.js 파일안에 있는 books에 값을 바꿨지만 바로 반영되지 않는 것을 알 수있다.

const books = [
  {
    title: "The Awakening",
    author: "Kate Chopin2",
  },
  {
    title: "City of Glass",
    author: "Paul Auster2",
  },
];

이를 위해

npm install nodemon

package.json에서 start를

    "start": "nodemon index.js"

위 코드로 변경 후 다시 실행시키자

---