강력한 GraphQL API

GraphQL은 왜 이렇게 오랫동안 서버를 REST 노드로 만들었는지 알고 싶을 정도로 데이터를 얻고 변이하는 기술이다.만일 처음 만났을 뿐이라면,grapQL은 실행할 때와 조회 언어입니다. 우리는 데이터의 형식과 데이터를 어떻게 얻는지 설명할 수 있습니다.GraphQL은 특정한 프로그래밍 언어나 데이터베이스에 의존하지 않기 때문에 선택한 데이터베이스나 언어와 함께 사용할 수 있기 때문에 처음부터 아무것도 배울 필요가 없습니다.GraphQL은 응용 프로그램의 다른 부분을 연결하는 기술일 뿐입니다. 이 그림은 제 뜻을 알 수 있습니다.

this short video을 보시면graphQL에 대한 더 많은 정보를 얻을 수 있습니다. 본고에서 기본 노드인 jsgraphQL 노드를 어떻게 만들고 설정하는지 소개할 것입니다. 우리는 이를 조회할 수 있습니다.서버에 nodejs가 있는 typescript를 사용할 것입니다. tsconfig and package.json files here을 찾을 수 있습니다.만약 당신이 슈퍼히어로 개발자라면, 상술한 파일을 받았으니, 반드시 그것들을 하나의 폴더에 저장해서 프로젝트의 디렉터리로 삼아야 한다.텍스트 편집기에서 그 디렉터리를 열고 시작합시다.

인덱스

이 항목이 설정되어 있으면 npm install을 실행하여 이 항목의 의존항을 얻을 수 있습니다.너는 반드시 먼저 수동으로 조작해야 한다.

에서 npm i graphql apollo-server을 실행하여 apollo 서버와graphql를 설치합니다.

그리고 TypeScript 및 nodemon npm i -D typescript nodemon을 설치합니다.

package.json의 메인 스크립트를 우리의 js 파일 "main": "dist/index.js",

으로 변경

은 package.json 파일의 "server": "nodemon dist/index.js" 스크립트 객체에 다음 내용을 추가합니다.

은 tsconfig.json을 사용하여 tsc --init 파일을 생성하여 이렇게 보일 수 있도록 한다.

  {
    "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "target": "es2016", // or newer if your node.js version supports this
      // "strictNullChecks": true,
      "strictFunctionTypes": true,
      "noImplicitThis": true,
      "moduleResolution": "node",
      "strictNullChecks": false,
      "resolveJsonModule": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": true,
      "skipLibCheck": true,
      "declaration": false,
      "noFallthroughCasesInSwitch": true,
      "composite": false,
      "noImplicitAny": true,
      "lib": [
        "dom",
        "es2016",
        "esnext.asynciterable"
      ],
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "strict": false,
      "experimentalDecorators": true,
      "outDir": "dist",
      "rootDir": "src",
    }
  }

은 디렉토리에 so /scr/index.ts과 같은 폴더를 만듭니다./scr이 루트 레벨

에 있는지 확인index.ts에서 ApolloServer10gql, gql을 가져오면 모델을 구축하고 조회와 돌연변이를 정의하는 데 도움을 줄 것입니다.ApolloServer은 apollo 서버의 실례를 만들 수 있도록 해 줍니다.graphQL 조회를 할 수 있습니다./src/index.ts을 열고 인코딩을 시작합니다.
나는 Firestore를 데이터베이스로 사용할 것이다. 나는 이미 Firebase 프로젝트를 설정했고, 나는adminsdk를 사용할 것이다.나는 이곳에서 Firebase 프로젝트를 세우지 않을 것이다. 왜냐하면 그것은 우리의 돛을 동력을 잃게 하기 때문이다.

//index.ts

//  * Importing our firebase-admin
import admin from 'firebase-admin'

// * Importing our serviceAccounnt
import serviceAccount from './serviceAccount.json'

// * Importing our apollo-server

import { ApolloServer, gql, ApolloError } from 'apollo-server'

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "firestore Database url"
});

const db = admin.firestore()

모델을 만들기 전에 모델이 무엇인지 익히자.
모드가 이렇습니다.graphQL은 TypeScript와 유사한 강력한 유형의 언어입니다.데이터의 표현 형식을 구성하는 내장된graphQL 형식의 조합 형식을 사용할 수 있습니다.이 언어는 모델 간의 관계를 정의하여 데이터에 복잡한 모델을 구축할 수 있도록 충분히 유연합니다.사용자와 채널에 대한 기본적인 모델을 정의합시다. 이것은 우리에게 기본적인 소개를 하고, graphQL 모델이 어떻게 작동하는지 이해하게 할 것입니다.

//  /src/index.ts

// Skipped

const typeDefs = gql`
"This will provide information about what you want to describe e.g a User"
# graphQL treats anything that begins with a # as a comment

"An User Schema another comment"

type User{
  email: String!,
  id: ID!,
  name: String!,
  channels: [Channel!]!
# A user can have many channels 
}

"Describes what a channel looks like"

type Channel {
  animal: String!,
  id: ID!,
  photoUrl: String!,
  title: String!
}
`

우리는 이미 사용자와 서적을 위해 기본 모델을 정의했다.우리는 위의 모델을 분석해서 그것이 어떤 특징을 가지고 있는지 보는 데 시간을 좀 들일 것이다.type User은graphQL 내장 형식 중 하나를 인용했습니다. 이 유형은 사용자 정의 모드를 구축할 수 있습니다.기타 내장된graphQL 유형은 (String, Int, Float, Boolean과 ID)를 포함하는데 이것들은
스칼라 유형, 사용자는 문자열인 전자 우편과 이름 속성을 가지고 있습니다.사용자는 id 속성을 가지고 있습니다. 그 유형은 id입니다. 이것은 유일한 식별자를 지정하는 유형이고, 또 하나의 채널 필드가 있습니다. 이것은 채널의 수조입니다. 이것은 우리가 정의한 또 다른 유형입니다.느낌표는 graphQL이 우리에게null로 돌아오지 않도록 하기 위해서입니다.채널 형식은graphQL이 채널의 구조를 어떻게 정하는지 알려주는 패턴이 있습니다. 검색어를 작성할 때 매우 유용할 것입니다.이것이 바로graphQL이 이렇게 멋있는 이유이다. 우리가 사용자를 위해 조회할 때, 우리는 그의 채널을 얻고 싶고, 채널 모드의 속성에 접근할 수 있기 때문에, 우리는 채널 이름만 포함하는 그룹과 채널마다 여러 개의 속성을 되돌릴 수 있다.

묻다

우리의 typeDefs에서 우리는 Query이라는 추가 유형을 정의할 것이다. 이것은 우리가 위에서 정의한 유형에 따라 조회할 수 있는 대상을 정의하고 코드 예시를 보여 준다.

// src/index.ts

// skipped

const typeDefs = gql`
type User {
  // Skipped 
}

type Channel {
  // Skipped
}

type Query {
  user(id: String!): User,  // We can query a user by their id
  users: [User!]!,          // We can query for all the users
  channels: [Channel!]!     // We can query for all the channels
}`

이 단점을 조회할 때 다음과 같은 것을 얻을 수 있다.

id

의 단일 사용자

모든 사용자 목록은 사용자 그룹으로 돌아갑니다.

모든 채널의 목록은 하나의 채널 그룹을 되돌려줍니다.

파서

우리는 주로 유형 정의를 완성했다. 해상도를 보자.해석기에서, 우리는 실제 데이터를 가져와 형식 정의의 유형에 비추었다.잠수하자.전체 유형을 분석하거나 유형에 있는 속성만 분석할 수 있습니다. 이 경우 사용자, 사용자 ID를 기반으로 사용자를 가져오는 방법, 사용자가 속한 채널 목록을 가져오는 방법만 분석합니다.우리는 또한 채널 목록을 해석할 것입니다. 요점은 당신이 유형을 해석할 수 있지만, 반드시 조회를 해석해야 한다는 것입니다.

//  src/index.ts

// src/index.ts

// skipped

const typeDefs = gql`
type User {
  // Skipped 
}

type Channel {
  // Skipped
}

type Query {
  // Skipped
}`

const resolvers = {
    // Let's resolve the channels list on the user
    User { 
    // we can customize the atrribute or logic for getting each field on the types
    // we defined above, in this case we are only interested in the channels
    async channels (parent:any) {
       // the parent refers to an individual instance of a user
      // Get a reference to the channels collection
      const chanRef = await db.collection('channels').get()
      const channels = chanRef.docs.map(d => d.data() )
      // create an empty array
      const userChan:any[] = []
      // loop through the user's channels id 
      parent.channels.forEach((chan:any) => {
        // search the channels collection for the channel with an id that 
        //  matches the id we are iterating over
        const channel = channels.find((item:any) => chan == item.id)
        // add that chanel to the array of users channel
        userChan.push(channel)
      })
      return userChan
    }
  }, 
  // Let's resolve our Query
  Query: {
      // remeber the Query we defined in typeDefs, this is for a list of channels
    channels: async (parent, args) => {
        // Basic firebase
      const channelsRef = await db.collection('channels').get()
      return channelsRef.docs.map(c => c.data())
    },
    // this is for a list of users
    users: async (parent, args, context) => {
      try{
        // Basic firebase stuff
        const usersRef = await db.collection('users').get()
        return usersRef.docs.map(user => user.data())
      }
      catch(err) {
        console.log(err)
        return new ApolloError(err)
      }
    },
    // an individual user, when we want to query for a user, we can pass in 
    // an id as an argument, it will be added to args object but we are destructuring
    user: async (parent:any, {id}: any, context: any) => {
        // Basic firebase
      const userRef = await db.collection('users').doc(id).get()
      return userRef.data()
    }
  }
}

우리 아폴로 서버 시작하기

이제 서버를 시작하기만 하면 됩니다. 이를 위해 ApolloServer의 새로운 실례를 만들고, 위에서 정의한 typedef와 해상도를 포함하는 대상을 전달합니다.그리고 우리는 express 서버에서처럼 서버에서listen을 호출합니다.이 프로젝트에서 TypeScript를 사용하고 있으므로 JavaScript로 컴파일하는 것을 잊지 마십시오.

//  src/index.ts

// src/index.ts

// skipped

const typeDefs = gql`
type User {
  // Skipped 
}

type Channel {
  // Skipped
}

type Query {
  // Skipped
}`

const resolvers = {
    // Let's resolve the channels list on the user
    User { 
    // Skipped
  }, 
  // Let's resolve our Query
  Query: {
      // skipped
  }
}

const server = new ApolloServer({ typeDefs, resolvers })

server.listen().then(({ url }) => {
  console.log(`Server running on ${url}`)
})

이것이 바로 우리의 간단한graphQL 서버 설정입니다. 크롬에graphQL 놀이공원 확장을 설치하고 터미널에서 URL을 복사하여 URL에 붙여넣을 수 있습니다. 모드를 테스트하고 모드를 작성하여 실행하기만 하면 됩니다.

// example playground to test api

Query {
    users {
        name,
        email,
        channels {
            title,
            animal
        }
    }
}

검색을 실행할 때, 그들이 구독하는 채널이 있는 사용자 목록을 볼 수 있을 것입니다.잠시 후 돌연변이를 윤색할 것입니다.graphQL 서버에 들어갈 수 있도록 도와주십시오.만약 이 모든 느낌이 쓰레기처럼 느껴진다면 video by Jeff on building an Apollo Server을 보면 이것이 바로 본문의 영감이라는 것을 인정할 수 밖에 없다.비록 그렇지만, 나는 네가 이것이 매우 유용하다고 생각하고, 몇 가지를 배웠으면 한다.