GraphQL 이해: GraphQL 소개

개요

GraphQL은 임시 쿼리 및 작업을 위한 흥미롭고 새로운 API입니다. 매우 유연하며 많은 이점을 제공합니다. 특히 그래프나 트리 형태로 정리된 데이터를 노출하는데 적합합니다. 페이스북은 2012년에 GraphQL을 개발했고, 2015년에 오픈소스로 공개했습니다.

빠르게 발전하여 가장 핫한 기술 중 하나로 자리잡고 있습니다. 많은 혁신적인 기업들이 GraphQL을 프로덕션에 채택하고 사용하고 있습니다. 이 튜토리얼에서 배울 내용은 다음과 같습니다.

• GraphQL의 원리
• REST와 비교하면 어떤가요
• 건축을 디자인하는 방법
• GraphQL 서버 설정 방법
• 쿼리 및 변경 구현 방법
• 그리고 다른 프리미엄 테마

GraphQL의 주요 특징은 무엇인가요?

GraphQL은 데이터가 계층 구조나 그래프로 구성되어 있고 프런트 엔드가 해당 계층 구조나 그래프의 다양한 하위 집합에 액세스하려고 할 때 가장 좋습니다. NBA를 노출하는 애플리케이션을 생각해 보세요. 팀, 선수, 코치, 챔피언십 및 각각에 대한 수많은 정보가 있습니다. 다음은 몇 가지 샘플 쿼리입니다.

• 현재 Golden State Warriors 명단에 있는 선수들의 이름은 무엇인가요?
• 워싱턴 위저즈 선발 선수들의 이름, 키, 나이는 어떻게 되나요?
• 현재 가장 많은 우승을 차지한 코치는 누구인가요?
• 코치는 몇 년도에 어느 팀의 우승을 차지했나요?
• MVP 상을 가장 많이 수상한 선수는 누구인가요?

이렇게 하면 수백 가지 질문을 할 수 있어요. 사용자나 제품 관리자가 새롭고 흥미로운 쿼리 콘텐츠를 제시할 때 이러한 모든 쿼리를 프런트 엔드에 노출하고 새로운 쿼리 유형으로 API를 쉽게 확장할 수 있는 API를 설계해야 한다고 상상해 보십시오.

이건 작은 일이 아닙니다. GraphQL은 바로 이 문제를 해결하기 위해 설계되었으며, 곧 알게 되겠지만 단일 API 엔드포인트를 통해 엄청난 기능을 제공합니다.

GraphQL 및 REST

GraphQL의 세부 사항을 살펴보기 전에 현재 가장 인기 있는 웹 API 유형인 REST와 비교해 보겠습니다.

REST는 리소스 지향 모델을 따릅니다. 리소스가 선수, 코치, 팀이라면 다음과 같은 엔드포인트가 있을 수 있습니다.

• /플레이어
• /player/
• /코치
• /코치/
• /팀
• /팀/

일반적으로 ID가 없는 엔드포인트는 ID 목록만 반환하는 반면, ID가 있는 엔드포인트는 리소스에 대한 전체 정보를 반환합니다. 물론, API를 다른 방식으로 설계할 수도 있습니다(예: /players 엔드포인트는 각 플레이어의 이름이나 각 플레이어에 대한 모든 정보를 반환할 수도 있습니다).

동적 환경에서 이 접근 방식의 문제점은 과소 가져오기(예: ID만 가져오고 추가 정보가 필요함) 또는 과다 가져오기(예: 이름에만 관심이 있음)라는 것입니다.

어려운 질문이네요. 충분히 가져오지 못할 때 100개의 ID를 가져오는 경우 각 플레이어의 정보를 가져오기 위해 별도의 API 호출을 100번 수행해야 합니다. 오버페치하면 필요하지 않은 대량의 데이터를 준비하고 전송하는 데 많은 백엔드 시간과 네트워크 대역폭이 낭비됩니다.

REST를 통해 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 각각 필요한 데이터를 정확히 반환하는 여러 사용자 지정 엔드포인트를 디자인할 수 있습니다. 이 솔루션은 확장 가능하지 않습니다. API를 일관되게 유지하는 것은 어렵습니다. 발전시키기 어렵네요. 녹음 및 사용이 어렵습니다. 이러한 사용자 지정 엔드포인트 간에 중복되는 부분이 많으면 유지 관리가 어렵습니다.

다음과 같은 추가 엔드포인트를 고려하세요.

• /플레이어/이름
• /players/names_and_championships
• /팀/시작

또 다른 접근 방식은 소수의 공통 엔드포인트를 유지하면서 많은 수의 쿼리 매개변수를 제공하는 것입니다. 이 솔루션은 다중 엔드포인트 문제를 방지하지만 REST 모델의 원칙을 위반하며 일관성 있는 개발 및 유지 관리가 어렵습니다.

GraphQL은 이러한 접근 방식을 한계까지 끌어냈다고 할 수 있습니다. 명시적으로 정의된 리소스가 아니라 전체 도메인의 하위 그래프를 고려합니다.

GraphQL 유형 시스템

GraphQL은 유형과 속성으로 구성된 유형 시스템을 사용하여 도메인을 모델링합니다. 모든 속성에는 유형이 있습니다. 속성 유형은 GraphQL에서 제공하는 ID, String, Boolean 등 기본 유형 중 하나일 수도 있고, 사용자 정의 유형일 수도 있습니다. 그래프의 노드는 사용자 정의 유형이고 간선은 사용자 정의 유형이 있는 속성입니다.

예를 들어 "Player" 유형에 "Team" 유형의 "Team" 속성이 있는 경우 각 플레이어 노드에서 팀 노드까지 에지가 있음을 의미합니다. 모든 유형은 GraphQL 도메인 개체 모델을 설명하는 스키마에 정의됩니다.

이것은 NBA 도메인의 매우 단순화된 아키텍처입니다. 선수에게는 이름, 가장 많이 소속된 팀(예, 선수들이 때때로 한 팀에서 다른 팀으로 이동한다는 것을 알고 있습니다), 선수가 우승한 챔피언십 수가 있습니다.

팀에는 이름, 명단, 팀이 우승한 챔피언십 수가 있습니다.

으아아아

미리 정의된 진입점도 있습니다. 쿼리, 변경, 구독이 바로 그것입니다. 프런트엔드는 진입점을 통해 백엔드와 통신하며 필요에 따라 사용자 정의할 수 있습니다.

다음은 단순히 모든 플레이어를 반환하는 쿼리입니다.

type Query {
    allPlayers: [Player!]!
}

感叹号表示该值不能为空。对于 allPlayers 查询，它可以返回空列表，但不能返回 null。另外，这意味着列表中不能有空玩家（因为它包含 Player！）。

设置 GraphQL 服务器

这是一个基于 Node-Express 的成熟 GraphQL 服务器。它有一个内存中的硬编码数据存储。通常，数据将位于数据库中或从其他服务获取。数据定义如下（如果您最喜欢的球队或球员未能入选，请提前致歉）：

let data = {
  "allPlayers": {
    "1": {
      "id": "1",
      "name": "Stephen Curry",
      "championshipCount": 2,
      "teamId": "3"
    },
    "2": {
      "id": "2",
      "name": "Michael Jordan",
      "championshipCount": 6,
      "teamId": "1"
    },
    "3": {
      "id": "3",
      "name": "Scottie Pippen",
      "championshipCount": 6,
      "teamId": "1"
    },
    "4": {
      "id": "4",
      "name": "Magic Johnson",
      "championshipCount": 5,
      "teamId": "2"
    },
    "5": {
      "id": "5",
      "name": "Kobe Bryant",
      "championshipCount": 5,
      "teamId": "2"
    },
    "6": {
      "id": "6",
      "name": "Kevin Durant",
      "championshipCount": 1,
      "teamId": "3"
    }
  },

  "allTeams": {
    "1": {
      "id": "1",
      "name": "Chicago Bulls",
      "championshipCount": 6,
      "players": []
    },
    "2": {
      "id": "2",
      "name": "Los Angeles Lakers",
      "championshipCount": 16,
      "players": []
    },
    "3": {
      "id": "3",
      "name": "Golden State Warriors",
      "championshipCount": 5,
      "players": []
    }
  }
}

我使用的库是：

const express = require('express');
const graphqlHTTP = require('express-graphql');
const app = express();
const { buildSchema } = require('graphql');
const _ = require('lodash/core');

这是构建架构的代码。请注意，我向 allPlayers 根查询添加了几个变量。

schema = buildSchema(`
  type Player {
    id: ID
    name: String!
    championshipCount: Int!
    team: Team!
  }
  
  type Team {
    id: ID
    name: String!
    championshipCount: Int!
    players: [Player!]!
  }
  
  type Query {
    allPlayers(offset: Int = 0, limit: Int = -1): [Player!]!
  }`

关键部分来了：连接查询并实际提供数据。 rootValue 对象可能包含多个根。

这里，只有 allPlayers。它从参数中提取偏移量和限制，对所有玩家数据进行切片，然后根据团队 ID 设置每个玩家的团队。这使得每个玩家都是一个嵌套对象。

rootValue = {
  allPlayers: (args) => {
    offset = args['offset']
    limit = args['limit']
    r = _.values(data["allPlayers"]).slice(offset)
    if (limit > -1) {
      r = r.slice(0, Math.min(limit, r.length))
    }
    _.forEach(r, (x) => {
      data.allPlayers[x.id].team   = data.allTeams[x.teamId]
    })
    return r
  },
}

最后，这是 graphql 端点，传递架构和根值对象：

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: rootValue,
  graphiql: true
}));

app.listen(3000);

module.exports = app;

将 graphiql 设置为 true 使我们能够使用出色的浏览器内 GraphQL IDE 来测试服务器。我强烈推荐它来尝试不同的查询。

使用 GraphQL 进行临时查询

万事俱备。让我们导航到 http://localhost:3000/graphql 并享受一些乐趣。

我们可以从简单的开始，只包含玩家姓名列表：

query justNames {
    allPlayers {
    name
  }
}

Output:

{
  "data": {
    "allPlayers": [
      {
        "name": "Stephen Curry"
      },
      {
        "name": "Michael Jordan"
      },
      {
        "name": "Scottie Pippen"
      },
      {
        "name": "Magic Johnson"
      },
      {
        "name": "Kobe Bryant"
      },
      {
        "name": "Kevin Durant"
      }
    ]
  }
}

好吧。我们这里有一些超级巨星。毫无疑问。让我们尝试一些更奇特的东西：从偏移量 4 开始，有 2 名玩家。对于每个球员，返回他们的名字和他们赢得的冠军数量以及他们的球队名称和球队赢得的冠军数量。

query twoPlayers {
    allPlayers(offset: 4, limit: 2) {
    name
    championshipCount
    team {
      name
      championshipCount
    }
  }
}

Output:

{
  "data": {
    "allPlayers": [
      {
        "name": "Kobe Bryant",
        "championshipCount": 5,
        "team": {
          "name": "Los Angeles Lakers",
          "championshipCount": 16
        }
      },
      {
        "name": "Kevin Durant",
        "championshipCount": 1,
        "team": {
          "name": "Golden State Warriors",
          "championshipCount": 5
        }
      }
    ]
  }
}

所以科比·布莱恩特随湖人队赢得了 5 个总冠军，湖人队总共获得了 16 个总冠军。凯文·杜兰特在勇士队只赢得了一次总冠军，而勇士队总共赢得了五次总冠军。

GraphQL 突变

魔术师约翰逊无疑是场上的魔术师。但如果没有他的朋友卡里姆·阿卜杜勒·贾巴尔，他不可能做到这一点。让我们将 Kareem 添加到我们的数据库中。我们可以定义 GraphQL 突变来执行从图表中添加、更新和删除数据等操作。

首先，让我们向架构添加突变类型。它看起来有点像函数签名：

type Mutation {
    createPlayer(name: String, 
                 championshipCount: Int, 
                 teamId: String): Player
}

然后，我们需要实现它并将其添加到根值中。该实现只是获取查询提供的参数并将一个新对象添加到 data['allPlayers']。它还确保正确设置团队。最后，它返回新的玩家。

  createPlayer: (args) => {
    id = (_.values(data['allPlayers']).length + 1).toString()
    args['id'] = id
    args['team'] = data['allTeams'][args['teamId']]
    data['allPlayers'][id] = args
    return data['allPlayers'][id]
  },

要实际添加 Kareem，我们可以调用突变并查询返回的玩家：

mutation addKareem {
  createPlayer(name: "Kareem Abdul-Jabbar", 
               championshipCount: 6, 
               teamId: "2") {
    name
    championshipCount
    team {
      name
    }
  }
}

Output:

{
  "data": {
    "createPlayer": {
      "name": "Kareem Abdul-Jabbar",
      "championshipCount": 6,
      "team": {
        "name": "Los Angeles Lakers"
      }
    }
  }
}

这是一个关于突变的黑暗小秘密......它们实际上与查询完全相同。您可以在查询中修改数据，并且可能只从突变中返回数据。 GraphQL 不会查看您的代码。查询和突变都可以接受参数并返回数据。它更像是语法糖，可以使您的架构更具人类可读性。

高级主题

订阅

订阅是 GraphQL 的另一个杀手级功能。通过订阅，客户端可以订阅每当服务器状态发生变化时就会触发的事件。订阅是后来引入的，不同的框架以不同的方式实现。

验证

GraphQL 将验证针对架构的每个查询或突变。当输入数据具有复杂形状时，这是一个巨大的胜利。您不必编写烦人且脆弱的验证代码。 GraphQL 将为您处理好它。

架构自省

您可以检查和查询当前架构本身。这为您提供了动态发现架构的元能力。下面是一个返回所有类型名称及其描述的查询：

query q {
  __schema {
    types {
      name
      description            
    }
  }

结论

GraphQL 是一项令人兴奋的新 API 技术，与 REST API 相比，它具有许多优势。它背后有一个充满活力的社区，更不用说Facebook了。我预测它将很快成为前端的主要内容。试一试。你会喜欢的。

위 내용은 GraphQL 이해: GraphQL 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!