안녕하세요!GraphQL 튜토리얼 시리즈의 궁극적인 초보자 가이드 2부로 돌아온 것을 환영합니다.우리가 시작하기 전에, 만약 당신이 아직 보지 못했다면, 당신은 보고 싶을 것이다. part 1본 강좌는 here에서 학습한 개념을 바탕으로 한다.
여기까지 말씀드리자면 제가 1부에서 간단명료하게 언급한 것인GraphQL 인프라에 대해 더 깊이 있게 알고 싶습니다.GraphQL이 어떻게 일을 하는지 배우는 중요한 부분인데, 무엇이 그렇게 훌륭한지.

제1부 GraphQL 인프라

GraphQL의 장점과 단점을 더욱 잘 이해하기 위해 저는 이 편리한 작은 정보도를 만들었습니다.

그래!GraphQL의 내부 작업 원리에 대해 조금이나마 이해하고 조작을 더욱 깊이 있게 이해할 수 있기를 바랍니다.

조직 코드

불행하게도, 우리가 이 강좌의 재미있는 내용을 배우기 전에, 우리는 반드시 먼저 무료한 것을 배워야 한다.이것은 우리의 코드를 조직해야 한다는 것을 의미한다.
만약 기억하지 못하신다면, 우리는 표준 서버 코드를 사용하고, 튜토리얼 의 index.js 파일에 중대한 변경을 했습니다.나는 네가 먼저 이 부분을 읽어야 우리가 하고 있는 일을 이해할 수 있을 것이라고 건의한다.1부분을 완성한 후, 우리의 색인에 있는 코드입니다.js 파일은 다음과 같습니다.

const port = process.env.port || 3000;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
]

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

완전한 해석을 이해하려면 part 1을 읽으십시오.그렇지 않으면, 위의 코드는express 서버 옆에 GraphQL 서버를 만들고 실행할 간단한 검색어를 정의합니다.먼저 가지 마라. 계속 읽어라.우리는 이 강좌의 뒤에서 이 데이터베이스 모델을 확장할 것이다.
우리는 index.js 파일의 코드를 크게 확장할 것이기 때문에 다른 파일로 나누는 것이 도움이 될 수 있습니다.이것은 주 파일의 혼란을 줄이고 프로젝트 파일의 조리를 유지합니다.
코드를 구성하기 위해서 우리는 schema와 resolvers 대상을 단독 파일로 이동할 수 있다.처음에는 좀 지나친 것 같았지만, 우리가 그것을 확장한 후에, 이것은 완전히 필요할 것이다.
이를 위해, 우선 프로젝트의 루트 단계에서 models 폴더를 만듭니다.우리는 여전히 프로젝트 중의 모든 내용이 부합되기를 희망한다part 1.
그리고 새 models 폴더에 파일schema.js과 resolvers.js을 만들 것입니다.
다음에 schema.js에서 색인에서 잘라서 붙여넣기schema 대상.js:

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

그리고 resolvers.js에서 resolvers에서 users 대상과 index.js 그룹을 잘라서 붙인다.

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: _ => users;
  }
}

그런 다음 다음과 같이 표시되도록 수정index.js합니다.

const port = process.env.port || 3000;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const schema = require('./models/schema.js');
const resolvers = require('./models/resolvers.js');

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

경탄할 만한!현재 우리의 코드는 모두 매우 좋고 조리가 있다.우리가 위에서 한 것은 단지 resolvers와 schema의 대상을 모듈로 정렬했을 뿐이다. 이렇게 하면 같은 파일을 엉망진창으로 만들지 않을 것이다.

MVC 형식 매개 변수를 사용하여 더 높은 질의 작성

자, 이제GraphQL의 핵심인 검색을 연구할 때가 되었습니다.조회는GraphQL에서 가장 크고 가장 중요한 부분이라고 할 수 있다(일부 원인은 QL이 조회 언어를 대표하기 때문이다).하지만 그럼에도 불구하고 이제는 더 높은 검색 함수를 작성하는 데 전념할 때가 됐다.우리가 1부에서 작성한 조회는 매우 좋으나, 그것들은 얼마 할 수 없고, 아직도 개선해야 할 부분이 많다.
현실적으로 GraphQL 조회는 대량의 데이터를 되돌려줄 수 있다.이런 상황을 초래한 원인은 매우 많다.
이해하기 어렵다
• 이는 웹 사이트의 속도를 크게 떨어뜨린다
• 작업을 필터링하거나 수행할 수 없음
보시다시피 이 옵션들 중 좋은 것은 하나도 없습니다.이것이 바로 더 좋은 조회를 작성하는 것이 왜 중요한가 하는 것이다. 필터를 통해 데이터는 전체 데이터베이스가 아니라 우리가 필요로 하는 내용만 되돌려준다.우리는 조회 파라미터를 추가해서 이 점을 실현할 수 있다.

매개변수 추가

질의에 매개변수를 추가하려면 schema.js 파일로 이동합니다.
그리고 getUsers 유형의 Query 조회에 파라미터를 추가합니다.

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers(id:Int, username:String, email:String, password:String): User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

보시다시피, 저희는 getUsers 조회에 필요한 모든 파라미터를 추가했습니다.이 매개 변수를 추가한 이유는 특정 필드를 통해 다른 사용자를 필터할 수 있기 때문입니다.매개 변수 중의 대상 유형 뒤에 감탄 부호가 없습니다. 왜냐하면 모든 매개 변수가 선택할 수 있기를 바랍니다.
그러나 이 매개 변수를 사용하여 검색을 성공적으로 실행하기 전에, 우리는 해상도를 편집해야 한다.resolvers.js로 이동합니다.분석기 getUsers 를 업데이트합시다.지금 보면 이렇다.

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

형편없죠?현재, 이 엉터리 해석기는 우리가 설정한 대상 그룹만 되돌려줄 수 있다.그럼에도 불구하고, 우리는 검색의 결과를 필터할 수 없다.
바꿀 때가 됐어.다음과 같이 업데이트resolvers.js:

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: (parent, args) => {
      if (args.id) {
        return users.filter(user => user.id === args.id);
      } else if (args.username) {
        return users.filter(user => user.username === args.username);
      } else if (args.email) {
        return users.filter(user => user.email === args.email);
      } else if (args.password) {
        return users.filter(user => user.password === args.password);
      } else {
        return users;
      }
    }
  }
}

와--많이 늘었어.하지만 많은 일들이 일어나고 있다.내가 너에게 설명해 줄게.
1. 우선getUsers 방법은 두 가지 파라미터를 받아들인다. parent과args.args 두 번째 매개변수여야 합니다. 그렇지 않으면 오류가 발생합니다.
둘째, 우리는 긴 성명을 한다if.우선, 우리는 파라미터id, username, email 또는 password를 제공하여 데이터를 필터했는지 검사합니다.매개 변수를 제공하지 않으면 사용자 그룹의 모든 데이터를 되돌려줍니다.
3. 조회에 매개 변수를 제공하면 users 방법으로 array.filter() 수조의 데이터를 필터합니다.그리고 일치하는 데이터를 되돌려줍니다. 있다면.
이제 새로운 검색과 개선된 검색을 테스트해 봅시다.서버를 실행하고 localhost:3000/graphql로 이동합니다.

그런 다음 왼쪽 상자에 다음 질의를 입력합니다.

query {
  getUsers(id:1) {
    id
    username
    email
    password
  }
}

이것은 id가 1인 사용자의 모든 데이터를 검색합니다.

GraphQL 돌연변이

GraphQL의 다음 중요한 부분은 데이터베이스에 있는 데이터를 수정하는 것이다.Google 장면에서 사용자 추가 및 삭제를 포함합니다.다행히도 GraphQL은 우리에게 간단한 방법인 돌연변이를 제공했다.
요컨대, 돌연변이는GraphQL 조회와 같이 데이터가 수정되었을 뿐이다.돌연변이를 진행하기 위해 우리는 돌연변이 유형을 정의할 수 있다. 마치 우리가 모델에서 정의한 Query 유형과 같다.
모드를 schema.js에서 다음과 같이 수정합니다.

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers(id:Int, username:String, email:String, password:String): User
  }
  type Mutation {
    createUser(username:String, email:String, password:String): User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

보시다시피 돌연변이는 검색과 다를 것이 없어 보입니다.물론 당신은 항상 더 진보적일 수 있다.이런 돌연변이는 매우 기본적인 수준이다.
상기Mutation 유형에서 우리는 createUser 돌연변이를 정의했다.이런 돌연변이에는 세 가지 파라미터가 포함된다. username,email와password.id 속성을 제공하지 않는 이유는 id가 수동 정의가 아니라 컴퓨터로 정의되기를 원하기 때문입니다.
우리의 변이를 효력을 발생시키기 위해서, 우리는 해석 프로그램에 대해 약간의 편집을 해야 한다.다음 새 파서를 보십시오.

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
];
const resolvers = {
  Query: {
    getUsers: (parent, args) => {
      if (args.id) {
        return users.filter(user => user.id === args.id);
      } else if (args.username) {
        return users.filter(user => user.username === args.username);
      } else if (args.email) {
        return users.filter(user => user.email === args.email);
      } else if (args.password) {
        return users.filter(user => user.password === args.password);
      } else {
        return users;
      }
    }
  },
  Mutation: {
    createUser: (parent, args) => {
      let newUser = {
        id: users.length + 1,
        username: args.username,
        email: args.email,
        password: args.password
      };
      users.push(newUser);
      return newUser;
    }
  }
}

보시다시피 저희 해석기에서 Query 속성 다음에 새로운 속성이 있습니다!이것은 Mutation 부동산입니다.Mutation 속성 중, 우리는 createUser 방법이 있다.이것은 지금까지 우리의 첫 번째 돌변이다.createUser 방법에서 우리는 세 가지 일을 한다.
1. newUser 대상을 만듭니다.이 대상에서 우리는 새로운 사용자id,username,email와 password를 설정했다.

데이터베이스에 newUser 대상을 추가합니다.실제로 우리는 newUser를 데이터베이스에 추가할 것이다.그러나 우리는 가상 데이터베이스 모델만 사용하기 때문에 array.push()만 사용하여 newUser를 users 그룹에 추가합니다.

이 되돌아오다newUser.이것은 매우 간단하다.우리는 돌연변이 후newUser의 대상으로 돌아갈 뿐이다.

우리의 첫 번째 변종을 운행하다

이제 유전자 돌연변이를 끝냈으니 도망갈 때가 됐어.(네, 그 압운이요.😀). 변종을 실행하려면 서버를 시작하고 localhost:3000/graphql 로 이동하십시오.

모든 것이 정상적임을 확보하기 위해서, 우리는 먼저 조회를 운행할 것이다.왼쪽 상자에 이 질의를 입력합니다.

query {
  getUsers {
    id
    username
    email
    password
  }
}

다음과 같은 결과가 표시되어야 합니다.

우리가 모든 정상을 확보했고 아무런 잘못도 없었으니 이제는 우리의 돌연변이를 테스트할 때가 되었다.우리가 전에 쓴 돌연변이를 입력하자.

mutation myMutation {
  createUser(username:"Subscriber to TJN", email:"[email protected]", password:"secret") {
    id
    username
    email
    password
  }
}

보시다시피, 저희는 createUser 를 호출하고 매개 변수를 지정합니다.다음 결과를 반환해야 합니다.

{
  "data": {
    "createUser": {
      "id": 3,
      "username": "Subscriber to TJN",
      "email": "[email protected]",
      "password": "secret"
    }
  }
}

그리고 만약 우리가 다시 조회를 실행한다면, 우리는 우리의 돌연변이가 이미 효력을 발생한 것을 볼 수 있다.
실행:

query {
  getUsers {
    id
    username
    email
    password
  }
}

다음을 확인해야 합니다.

{
  "data": {
    "getUsers": [
      {
        "id": 1,
        "username": "The Javascript Ninja",
        "email": "[email protected]",
        "password": "its-a-secret"
      },
      {
        "id": 2,
        "username": "The Javascript Ninjas Best Friend",
        "email": "[email protected]",
        "password": "its-a-secret"
      },
      {
        "id": 3,
        "username": "Subscriber to TJN",
        "email": "[email protected]",
        "password": "secret"
      }
    ]
  }
}

만세!우리의 변이가 성공했어!

아무튼...

됐어, 친구들아!
오늘 우리는 코드를 어떻게 구성하고, 더 높은 조회 (파라미터와 변수 사용) 를 작성하는지,GraphQL 변체를 어떻게 만드는지 토론했다.
아주 좋은 물건이에요.
나는 이곳에서 이 강좌를 끝낼 것이다. 이렇게 하면 너무 길지 않지만, 확보해 주십시오. 이렇게 하면 당신은 어떤 멋진 내용도 놓치지 않을 것입니다.
계속해서 관심을 가지고 가능한 한 빨리 이야기를 나누세요!