노드로 GraphQL API를 구축하기 시작하십시오

우리 모두는 많은 관심과 취미를 가지고 있습니다. 예를 들어, 저는 JavaScript, '90 년대 인디 록 및 힙합, 인기없는 재즈, 피츠버그시, 피자, 커피 및 John Lury가 주연을 맡은 영화에 관심이 있습니다. 우리 가족, 친구, 지인, 반 친구 및 동료들도 자신의 사회적 관계, 관심사 및 취미를 가지고 있습니다. 내 친구 라일리처럼 이러한 관계와 관심사 중 일부는 90 년대 힙합과 피자에 관심이 있습니다. 다른 사람들은 자바 스크립트보다 파이썬을 선호하고 차만 마시고 현재 팝 음악을 선호하는 동료 해리슨과 같은 겹치지 않습니다. 대체로, 우리 각자는 우리 삶의 사람들과 관련이있는지도와 관계와 관심사가 어떻게 겹치는지를 가지고 있습니다.

이러한 유형의 상호 관련 데이터는 처음에 API 개발에서 해결되기 시작한 도전 과제입니다. GraphQL API를 작성함으로써 데이터를 효과적으로 연결하여 복잡성 및 요청 수를 줄이면서 필요한 데이터를 클라이언트에 정확하게 제공 할 수 있습니다. (GraphQL 은유를 선호하는 경우 칵테일 파티에서 Meet GraphQL을 확인하십시오.)

이 기사에서는 Apollo Server 패키지를 사용하여 Node.js에서 GraphQL API를 작성합니다. 이를 위해 기본 GraphQL 주제를 탐색하고 GraphQL 패턴을 작성하고 패턴 기능을 구문 분석하기위한 코드를 개발하고 GraphQL Playground 사용자 인터페이스를 사용하여 API에 액세스합니다.

GraphQL이란 무엇입니까?

GraphQL은 API의 오픈 소스 쿼리 및 데이터 조작 언어입니다. 개발 목표는 데이터에 대한 단일 엔드 포인트를 제공하여 응용 프로그램이 필요한 정확한 데이터를 요청할 수 있도록하는 것입니다. 이는 UI 코드를 단순화하는 데 도움이 될뿐만 아니라 네트워크를 통해 전송되어야하는 데이터의 양을 제한하여 성능을 향상시킵니다.

우리는 무엇을 만들고 있습니까?

이 튜토리얼을 따르려면 노드 v8.x 이상이 필요하며 명령 줄을 사용한 경험이 필요합니다.

우리는 우리가 읽은 내용에서 기억에 남는 단락을 저장할 수있는 Book Excerpts에 대한 API 응용 프로그램을 구축 할 것입니다. API 사용자는 발췌문에서 "CRUD"(작성, 읽기, 업데이트, 삭제) 작업을 수행 할 수 있습니다.

• 새로운 발췌문을 만듭니다
• 단일 발췌문과 발췌 목록을 읽으십시오
• 발췌 한 업데이트
• 발췌문을 삭제하십시오

시작

먼저 프로젝트를위한 새 디렉토리를 만들고 새 노드 프로젝트를 초기화하고 필요한 종속성을 설치하십시오.

 <code># 创建新目录mkdir highlights-api # 进入目录cd highlights-api # 初始化新的节点项目npm init -y # 安装项目依赖项npm install apollo-server graphql # 安装开发依赖项npm install nodemon --save-dev</code>

진행하기 전에 의존성을 분류합시다.

• apollo-server 노드 애플리케이션에서 GraphQL을 사용할 수있는 라이브러리입니다. 우리는 이것을 독립형 라이브러리로 사용할 것이지만, Apollo 팀은 기존 노드 웹 응용 프로그램에서 Express, Hapi, Fastify 및 KOA와 협력하기위한 미들웨어를 만들었습니다.
• graphql 에는 GraphQL 언어가 포함되어 있으며 apollo-server 에 필요한 피어 의존성입니다.
• nodemon 변경 사항을 위해 프로젝트를 모니터링하고 서버를 자동으로 다시 시작하는 유용한 라이브러리입니다.

패키지를 설치 한 후 응용 프로그램의 루트 파일 ( index.js 을 만들어 봅시다. 이제 console.log() 사용 하여이 파일에서 메시지를 출력합니다.

 <code>console.log("? Hello Highlights");</code>

개발 프로세스를 단순화하기 위해 package.json 파일의 scripts 개체를 업데이트하여 nodemon 패키지를 사용합니다.

 <code>"scripts": { "start": "nodemon index.js" },</code>

이제 터미널 응용 프로그램에서 npm start 입력하여 응용 프로그램을 시작할 수 있습니다. 모든 것이 잘 작동하면 볼 수 있습니까 ? Hello Highlights 터미널에 기록되었습니다.

그래프 QL 스키마 유형

패턴은 데이터 및 상호 작용의 표현입니다. 필요한 패턴을 통해 GraphQL은 API에 대한 엄격한 계획을 구현합니다. 이는 API가 스키마에 정의 된 데이터 만 반환하고 상호 작용을 수행 할 수 있기 때문입니다. GraphQL 패턴의 기본 구성 요소는 객체 유형입니다. GraphQL에는 5 가지 내장 유형이 포함되어 있습니다.

• 문자열 : UTF-8 문자를 사용하여 인코딩 된 문자열
• 부울 : 참 또는 거짓 가치
• int : 32 비트 정수
• float : float 값
• ID : 고유 식별자

이러한 기본 구성 요소를 사용하여 API 패턴을 구축 할 수 있습니다. schema.js 라는 파일에서 gql 라이브러리를 가져와 스키마 구문에 대한 파일을 준비 할 수 있습니다.

 <code>const { gql } = require('apollo-server'); const typeDefs = gql` # 模式将放在这里`; module.exports = typeDefs;</code>

패턴을 작성하기 위해 먼저 유형을 정의합니다. 발췌 응용 프로그램의 패턴을 어떻게 정의하는지 고려해 봅시다. 먼저 Highlight 라는 새 유형을 만들 것입니다.

 <code>const typeDefs = gql` type Highlight { } `;</code>

각 발췌문에는 고유 한 ID, 일부 컨텐츠, 제목 및 저자가 있습니다. 하이라이트 모드는 다음과 같습니다.

 <code>const typeDefs = gql` type Highlight {  id: ID  content: String  title: String  author: String } `;</code>

느낌표를 추가하여 이러한 필드 중 일부를 필요한 필드로 만들 수 있습니다.

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } `;</code>

발췌 용 객체 유형을 정의했지만 클라이언트가 해당 데이터를 어떻게 얻는 지 설명해야합니다. 이것을 쿼리라고합니다. 나중에 쿼리에 뛰어 들지만 이제 누군가가 우리의 패턴에서 발췌문을 검색하는 방법을 설명해 봅시다. 모든 발췌문이 요청되면 데이터는 배열 ( [Highlight] 로 표시됨)로 반환되며 단일 발췌를 검색하려면 ID를 매개 변수로 전달해야합니다.

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } type Query {  highlights: [Highlight]!  highlight(id: ID!): Highlight } `;</code>

이제 index.js 파일에서 유형 정의를 가져 와서 Apollo Server를 설정할 수 있습니다.

 <code>const {ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs }); server.listen().then(({ url }) => { console.log(`? Highlights server ready at ${url}`); });</code>

노드 프로세스를 계속 실행하면 응용 프로그램이 자동으로 업데이트되고 다시 시작되지만 그렇지 않은 경우 터미널 창의 프로젝트 디렉토리에서 npm start 입력하면 서버가 시작됩니다. 터미널을 살펴보면 Nodemon이 파일을 모니터링하고 서버가 로컬 포트에서 실행 중임을 알 수 있습니다.

 <code>[nodemon] 2.0.2 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node index.js` ? Highlights server ready at http://localhost:4000/</code>

브라우저에서 URL에 액세스하면 API와 상호 작용하기위한 사용자 인터페이스를 제공하는 GraphQL Playground Application이 시작됩니다.

GraphQL 파서

초기 모드 및 Apollo Server 설정을 사용하여 프로젝트를 개발했지만 아직 API와 상호 작용할 수는 없습니다. 이를 위해 파서를 소개합니다. 파서는 이름으로 암시 된 정확한 작업을 수행합니다. API 사용자가 요청한 데이터를 구문 분석합니다 . 스키마에서 먼저 정의 한 다음 JavaScript 코드에서 논리를 구현 하여이 파서를 작성합니다. 우리의 API에는 쿼리와 돌연변이의 두 가지 유형의 파서가 포함됩니다.

먼저 상호 작용할 데이터를 추가합시다. 응용 프로그램에서 이것은 일반적으로 데이터베이스에서 검색하고 작성하는 데이터이지만,이 예제에서는 객체 배열을 사용해 보겠습니다. index.js 파일에 다음을 추가하십시오.

 하이라이트를하자 = [
  {
    ID : '1',
    내용 : '언젠가는 올바른 단어를 찾을 수 있으며 간단 할 것입니다.',
    제목 : 'Dharma Bums',
    저자 : 'Jack Kerouac'
  },
  {
    ID : '2',
    내용 : '상황의 한계에는 유머가 있고 은혜가 있으며 다른 모든 것이 있습니다.',
    제목 : '임의의 멍청한 목표',
    저자 : 'Tamara Shopsin'
  }
]]

질문

쿼리는 API의 특정 데이터를 요청하고 원하는 형식으로 표시합니다. 그런 다음 쿼리는 API 사용자가 요청한 데이터가 포함 된 객체를 반환합니다. 쿼리는 데이터를 수정하지 않습니다. 데이터 만 액세스합니다. 스키마에서 두 가지 쿼리를 작성했습니다. 첫 번째는 발췌 한 배열을 반환하고 두 번째는 특정 발췌를 반환합니다. 다음 단계는 데이터를 반환 할 파서를 작성하는 것입니다.

index.js 파일에서 쿼리를 포함 할 수있는 resolvers 객체를 추가 할 수 있습니다.

 const resolvers = {
  쿼리 : {
    하이라이트 : () => 하이라이트,
    하이라이트 : (부모, args) => {
      return Highlights.Find (하이라이트 => 하이라이트 .id === args.id);
    }
  }
};

highlights 쿼리는 전체 발췌 데이터 배열을 반환합니다. highlight 쿼리는 두 가지 매개 변수의 parent 와 args 허용합니다. parent 는 Apollo Server의 모든 GraqHQL 쿼리의 첫 번째 매개 변수이며 쿼리 컨텍스트에 액세스 할 수있는 방법을 제공합니다. args 매개 변수를 사용하면 사용자가 제공 한 매개 변수에 액세스 할 수 있습니다. 이 경우 API 사용자는 특정 발췌문에 액세스 할 수있는 id 매개 변수를 제공합니다.

그런 다음 Resolver를 포함하도록 Apollo Server 구성을 업데이트 할 수 있습니다.

 const server = new apolloserver ({typedefs, resolvers});

쿼리 파서를 작성하고 Apollo Server를 업데이트 한 후 이제 GraphQL Playground Query API를 사용할 수 있습니다. GraphQL Playground에 액세스하려면 웹 브라우저에서 http://localhost:4000 방문하십시오.

쿼리 형식은 다음과 같습니다.

 쿼리 {
  QueryName {
      필드
      필드
    }
}

이를 염두에두고 각 발췌문의 ID, 내용, 제목 및 저자를 요청하는 쿼리를 작성할 수 있습니다.

 쿼리 {
  하이라이트 {
    ID
    콘텐츠
    제목
    작가
  }
}

UI에 강조 표시된 텍스트의 제목과 저자 만 나열된 페이지가 있다고 가정 해 봅시다. 각 발췌 내용을 검색 할 필요가 없습니다. 대신, 우리는 필요한 데이터 만 요청하는 쿼리를 작성할 수 있습니다.

 쿼리 {
  하이라이트 {
    제목
    작가
  }
}

또한 쿼리에 ID 매개 변수를 포함하여 개별 댓글을 쿼리하는 구문 분석기를 작성했습니다. 우리는 이것을 할 수 있습니다 :

 쿼리 {
  하이라이트 (ID : "1") {
    콘텐츠
  }
}

돌연변이

API에서 데이터를 수정하려면 돌연변이를 사용합니다. 발췌 한 예에서, 우리는 새로운 발췌, 업데이트 된 기존 발췌문, 그리고 발췌를 삭제하기위한 3 분의 1을 만들기 위해 변형을 작성하고 싶을 것입니다. 쿼리와 유사하게, 돌연변이는 또한 객체의 형태로 결과를 반환해야하며, 일반적으로 수행 된 작업의 최종 결과입니다.

GraphQL에서 무엇이든 업데이트하는 첫 번째 단계는 패턴을 작성하는 것입니다. schema.js 파일에 변형 유형을 추가하여 스키마에 변형을 포함시킬 수 있습니다.

 유형 돌연변이 {
  NewHighlight (내용 : 문자열! 제목 : 문자열 저자 : String) : 하이라이트!
  UpdateHighlight (ID : ID! Content : String!) : 하이라이트!
  deletehighlight (id : id!) : 하이라이트!
}

우리의 newHighlight 변형은 content 의 필요한 값과 선택적 title 및 author 값을 취하고 Highlight 반환합니다. updateHighlight 변형은 highlight id 와 content 매개 변수 값으로 전달해야하며 업데이트 된 Highlight 반환해야합니다. 마지막으로 deleteHighlight 변형은 ID 매개 변수를 수락하고 삭제 된 Highlight 반환합니다.

돌연변이를 포함하도록 패턴을 업데이트 한 후 이제 이러한 작업을 수행하기 위해 index.js 파일에서 resolvers 업데이트 할 수 있습니다. 각 돌연변이는 highlights 데이터 배열을 업데이트합니다.

 const resolvers = {
  쿼리 : {
    하이라이트 : () => 하이라이트,
    하이라이트 : (부모, args) => {
      return Highlights.Find (하이라이트 => 하이라이트 .id === args.id);
    }
  },
  돌연변이: {
    NewHighlight : (부모, args) => {
      const 하이라이트 = {
        ID : 문자열 (하이라이트 1),
        제목 : Args.title || '',
        저자 : Args. Author || '',
        내용 : Args.Content
      };
      하이라이트 .push (하이라이트);
      리턴 하이라이트;
    },
    UpdateHighlight : (부모, args) => {
      const index = heights.findIndex (하이라이트 => height.id === args.id);
      const 하이라이트 = {
        id : args.id,
        내용 : Args.Content,
        저자 : 하이라이트 [index]. Author,
        제목 : 하이라이트 [index] .Title
      };
      하이라이트 [index] = 하이라이트;
      리턴 하이라이트;
    },
    deletehighlight : (부모, args) => {
      const deletedhighlight = heights.find (
        하이라이트 => 하이라이트 .id === args.id
      );
      하이라이트 = 하이라이트 .filter (하이라이트 => 하이라이트 .id! == args.id);
      반환 deletedHighlight;
    }
  }
};

이러한 돌연변이를 작성한 후, 우리는 GraphQL 놀이터를 사용하여 돌연변이 데이터를 연습 할 수 있습니다. 돌연변이의 구조는 쿼리와 거의 동일하며 돌연변이의 이름을 지정하고 매개 변수 값을 전달하며 특정 데이터의 반환을 요청합니다. 먼저 새로운 발췌문을 추가합시다.

 돌연변이 {
  NewHighlight (저자 : "Adam Scott"제목 : "JS Everywhere"컨텐츠 : "GraphQL은 대단합니다") {
    ID
    작가
    제목
    콘텐츠
  }
}

그런 다음 돌연변이를 작성하여 발췌를 업데이트 할 수 있습니다.

 돌연변이 {
  UpdateHighlight (id : "3"컨텐츠 : "GraphQL is rad") {
    ID
    콘텐츠
  }
}

발췌문 삭제 :

 돌연변이 {
  deletehighlight (id : "3") {
    ID
  }
}

요약

축하해요! 이제 Apollo Server를 사용하고 메모리 내 데이터 객체에서 GraphQL 쿼리 및 돌연변이를 실행할 수있는 GraphQL API를 성공적으로 구축했습니다. 우리는 GraphQL API 개발의 세계를 탐구하기위한 탄탄한 토대를 마련했습니다.

수준을 향상시키기위한 다음 단계는 다음과 같습니다.

• 중첩 된 GraphQL 쿼리 및 돌연변이에 대해 알아보십시오.
• Apollo Full Stack 튜토리얼을 따르십시오.
• MongoDB 또는 PostgreSQL과 같은 데이터베이스를 포함하도록 예제를 업데이트하십시오.
• 보다 우수한 CSS- 트릭 그래프 QL 기사를 탐색하십시오.
• 새로 인수 한 GraphQL 지식을 사용하여 Gatsby를 사용하여 정적 웹 사이트를 구축하십시오.

위 내용은 노드로 GraphQL API를 구축하기 시작하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!