Apollo Server를 사용하여 GraphQL API 만들기

애초 2020년 12월 2일https://www.wisdomgeek.com에 발표됐다.
GraphQL 생태계에 대한 많은 불평 중 하나는 GraphQL 응용 프로그램을 만들 때 어떤 패키지를 사용하느냐에 간접적인 문제가 많다는 것이다.하나를 선택하더라도 GraphQL 서버가 작동하려면 많은 템플릿 코드를 작성해야 합니다.사실이지만 꼭 복잡할 필요는 없다.본 논문에서 Apollo Server를 사용하여 가장 간단한GraphQL 서버를 만들 것입니다.

왜 아폴로 서버예요?

자바스크립트(GraphQL.js, ExpressGraphQL,GraphQL요가,Apollo서버와GraphQLHelix)를 사용하여GraphQL서버를 만드는 데 사용할 수 있는 모든 옵션에서Apolloserver2를 사용합니다.
GraphQL 요가는 더 이상 유지되지 않는 것 같아서 배제하기 쉽다.
GraphQL.js의 실현 수준이 너무 낮아서 고려할 수 없습니다.
GraphQL Helix에는 커뮤니티 지원이 많지 않은 것 같습니다.
Apollo Server의 유일한 대체품은 ExpressGraphQL이지만 Apollo Server는 편리한 특성이 많아서 저는 ExpressGraphQL이 아니라 이런 특성을 더 좋아합니다.Apollo Server의 자술은express graphql과 어떤 면에서 비교되어 이들의 차이를 이해하는 데 도움이 된다.너는 그것을 찾을 수 있다. here (Git는 영원히 잊지 않을 것이다.)
Hasura,Prisma 등 다른 도구도 있지만 이 도구들은 ORM과 다른 기능과 관련이 있기 때문에 본 논문의 옵션으로 토론하지 않겠습니다.
아폴로 서버의 다른 장점은 다음과 같습니다.

과도한 내장 기능

대규모 커뮤니티 지원(엔터프라이즈 지원 포함)

자주 업데이트

목적별 추가 라이브러리 및 도구용

다른 프레임워크와의 상호 운용성

이로써 Apollo 서버를 사용하여 기능이 완비된 GraphQL API를 구축하겠습니다.저희 API는 데이터를 읽고 업데이트하는 조회와 돌연변이를 지원할 것입니다.모르시는 경우GraphQL types (queries and mutations) 이전 게시물을 읽어주시기 바랍니다.만약 당신이 GraphQL 자체의 초보자라면 Why GraphQL 에 관한 게시물은 GraphQL의 장점을 이해하는데 도움이 될 수 있습니다.

GQL을 사용하여 유형 정의 만들기

어떤 일을 하기 전에 디렉터리를 만들고 npm/Thread를 사용하여 프로젝트에apollo 서버를 설치합니다.만약 우리가 이미 이렇게 했다면, 우리는 서버를 만들 것이다.js 파일은 우리의 폴더에 있습니다.
Apollo 서버는 형식 정의와 해석기를 설명할 수 있도록 "gql"이라는 내보내기를 제공합니다.gql에서는 JavaScript 템플릿 텍스트를 매개 변수 전달 메커니즘으로 사용합니다.따라서 함수로 호출하는 것이 아니라 표시된 템플릿 텍스트 문법으로 호출합니다.
패턴 정의는 유형 정의와 모든 관계를 포함합니다.서버에서 강제로 실행해야 합니다.유형과 정의가 뭡니까?우리는 형식 정의를 얻기 위해 export라는 gql을 사용합니다.

const { gql } = require('apollo-server');

const typeDefs = gql`
  # Our schema will be written here
`;

유형 정의가 있으면, 우리는apollo가 아는 정의가 있지만, 이 검색어를 호출할 수 없습니다. 왜냐하면 그들은 지금 아무것도 하지 않기 때문입니다.GraphQL API가 작동하려면 파서를 정의해야 합니다.

GraphQL 서버에 대한 해상도 정의

해상도는 모드에서 필드 데이터를 채우는 함수를 담당합니다.
파서는GraphQL 사양의 일부가 아닙니다.그러나 대부분의GraphQL 서버가GraphQL 요청을 실현하고 처리하는 전형적인 방식이다.형식 정의에 정의된 모든 필드는 GraphQL 요청에 참여할 수 있도록 일치하는 해상도 필드가 있어야 합니다.
GraphQL 규범은 GraphQL 형식 정의의 루트 레벨 조회 정의를 필요로 합니다.다음에 코드에 해상도 대상을 만들 것입니다.이전 기사에서 우리 모드의 하위 집합을 선택하십시오.

type Post {
  id: ID!
  title: String!
}
type Query {
  getAllBlogs: [Post]
}

우리는 해석 프로그램을 정의하기 시작할 것이다.충돌 해결 프로그램은 인용 모드의 모든 유형과 충돌 해결 프로그램 함수의 대상이다.

분해 함수

파서 함수는 매핑 유형의 모든 필드에 사용되는 규칙으로, 상위 매개변수, 매개변수, 컨텍스트 및 정보 등 4개의 매개변수를 포함합니다.패턴에 정의된 결과를 되돌려줍니다.
parent 파라미터는 현재 해상도의 부모 해상도를 제공합니다.쿼리를 중첩할 수 있기 때문에, 이 매개 변수는 현재 해상도를 호출하는 부모를 이해하는 데 도움을 줍니다.톱 레벨 파서에 대해서는 정의되지 않습니다.
arguments 매개 변수는 GraphQL에 요청한 내용을 알려 줍니다.
상하문은 일반적으로 응용 프로그램의 일부 전역 설정(예를 들어 데이터베이스 연결 문자열)이다.
information 매개 변수는 응용 프로그램의 상태와 같은 응용 프로그램에 대한 정보를 포함합니다.

파서 생성하기

GetAllBlogs 해상도에서 되돌아오는 형식은 게시물 목록입니다.이 작업을 위해 JavaScript 객체를 만들고 이를 일시적으로 반환합니다.

const resolvers = {
  Query: {
    getAllBlogs: () => {
      const blogs = [
        {
          id: 1,
          title: 'Why GraphQL?',
        },
        {
          id: 2,
          title: 'Creating a GraphQL API with Apollo Server',
        },
      ];
      return blogs;
    },
  },
};

우리가 다음 단계에 들어가기 전에, 아폴로가 자동으로 해석기 함수를 생성할 수 있다는 것을 지적해야 한다.부모 매개변수에 분석 프로그램 이름과 연관된 값이 포함된 속성이 있으면 Apollo 서버가 해당 속성의 값을 반환합니다.이름이 일치하지 않으면 undefined를 되돌려줍니다.만약 이 값이 함수라면, 이 함수를 호출하고 함수의 반환 값을 되돌려줍니다.
이 경우 Post 유형의 각 필드에 대해 명시적으로 파서를 작성합니다.이것은 선택할 수 있는 것이다.그러나 이것은 우리로 하여금 부모 파라미터를 어떻게 사용하는지 알게 했다.파서 객체는 다음과 같습니다.

const resolvers = {
  Query: {
    getAllBlogs: () => {
      const blogs = [
        {
          id: 1,
          title: 'Why GraphQL?',
        },
        {
          id: 2,
          title: 'Creating a GraphQL API with Apollo Server',
        },
      ];
      return blogs;
    },
  },
  Post: {
    id: (parent) => parent.id,
    title: (parent) => parent.title,
  },
};

물건을 한데 놓다

현재 형식 정의와 해석기를 작성했습니다. 이 정의들을 함께 놓고 apollo 서버에 전달한 다음 시작해야 합니다.구성이 있는express 서버를 시작하는 것처럼 apollo 서버를 시작합니다.

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(4000).then(({ url }) => {
  console.log(`Server started at ${url}`);
});

노드 서버를 실행하면명령 프롬프트에서 서버가 시작되고 실행되어야 합니다.다음에 브라우저에서localhost:4000으로 이동합니다.GraphQL 놀이공원을 얻었습니다. 저희가 방금 구축한 서버에 포스터 명령을 보낼 수 있습니다.우리는 그것을 사용하여 우리의 댓글을 조회할 것이다.IntelliSense를 사용하여 질의를 작성할 수 있습니다.검색을 실행한 후, 우리는 서버에서 하드코딩 게시물을 얻을 것입니다.

돌연변이를 이루다

우리가 어떻게 조회를 진행하는지 알았으니, 돌연변이를 실현하는 것은 간단한 임무인 것 같다.우리는 유형 정의에 변이 속성을 추가하고 해석기에서 그것을 실현해야 한다.블로그 글의 제목을 업데이트하기 위해 변종을 쓰자.
유형 정의에 추가합니다.

type Mutation {
  updateBlogPost(id: ID!, title: String!): Post
}

파서에는 다음과 같은 추가 속성이 있습니다.

const resolvers = {
  Query: { ... },
  Mutation: {
    updateBlogPost: (_, args) => {
      let blog = blogs.find((blog) => blog.id == args.id);
      if (blog) {
        blog.title = args.title;
        return blog;
      }
    },
  }
}

그리고 서버를 실행한 후 운동장에서 돌연변이를 호출하여 업데이트된 값을 얻을 수 있습니다.

따라서 저희 작업 서버의 최종 코드는 다음과 같습니다.

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

const blogs = [
  {
    id: 1,
    title: 'Why GraphQL?',
  },
  {
    id: 2,
    title: 'Creating a GraphQL API with Apollo Server',
  },
];

const typeDefs = gql`
  type Post {
    id: ID!
    title: String!
  }

  type Query {
    getAllBlogs: [Post]
  }

  type Mutation {
    updateBlogPost(id: ID!, title: String!): Post
  }
`;

const resolvers = {
  Query: {
    getAllBlogs: () => {
      return blogs;
    },
  },
  Post: {
    id: (parent) => parent.id,
    title: (parent) => parent.title,
  },
  Mutation: {
    updateBlogPost: (_, args) => {
      let blog = blogs.find((blog) => blog.id == args.id);
      if (blog) {
        blog.title = args.title;
        return blog;
      }
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(4000).then(({ url }) => {
  console.log(`Server started at ${url}`);
});

우리는 이것이 아폴로 서버를 사용하는 데 도움이 되기를 바란다.궁금한 사항이 있으시면 아래에 의견을 달아주시면 도움을 드리겠습니다.