我如何像 5 岁孩子一样学习 GraphQL

前言

像 5 岁孩子一样接触 GraphQL

结论

前言

我们经常听到这样一句话：“像5岁孩子一样跟我解释”。就在昨天，我在dev.to上看到了一篇很有意思的帖子，标题也是这个。一段时间以来，我一直想写一篇关于如何把这句话反过来理解为“像5岁孩子一样思考”的文章。5岁的孩子可以学习能力极强，并且擅长用简单的语言思考。他们的简洁性使他们能够非常高效地获得他们想要的东西。

随着年龄的增长，我们的语言能力不断提升，也越来越注重礼仪和举止。所以，如果我们看到朋友在吃糖果，我们也想吃，就会问：

“嗨，你好吗？那块糖看起来很好吃？我可以吃一块吗？”

而孩子则只是说：

“糖果棒！”

即使拿着糖的大人问：“你说什么？”孩子还是会说：“糖！”大人回答：“你说‘请’”（但还是把糖递给了孩子！），孩子会笑着说：“不，你说‘请’。”

成年人必须注意礼节，因为这是尊重他人的一种方式。成年人知道，如果他在提问时不尊重他人，最终可能会一无所获……甚至可能收到类似“当然不行”的回复。而孩子则相反，因为他当时可能还不懂事，所以可以免责。真是幸运的孩子！

这种成人的思维方式似乎有时会影响我们的编程方式，降低我们的效率，让我们过于关注信息的表达方式，而我们真正关心的只是数据。我们可能会忘记，当我们与机器而非人类对话时，我们可以少操心一些言行举止，只需告诉机器我们想要什么就行。

像 5 岁孩子一样接触 GraphQL

初次接触 GraphQL 时，我感觉它很有吸引力：作为一名开发者，我可以专注于数据，而不用操心获取数据的各种手续（因为写一长串 API 路由列表从来都不是我想要的工作）。但我当时也有点忐忑，因为我不确定自己是否准备好接受一种完全不同的思维方式。幸运的是，“完全不同的思维方式”实际上需要我将自己的思维简化到像 5 岁孩子一样。

让我们继续用“糖果棒”的例子来解释如何像孩子一样思考让生活变得更轻松。

一个成年人的大脑从 RESTful API 中学习到的知识可能会是这样的：

http.get('/?candybar=kitkat&size=kingSize').then(handleResp)

成年人必须熟悉“http”协议、特殊字符“&”、“=”，并知道如何正确定位它们。此外，还必须记住“.then”。

具有 SQL 思维的成年人可能会像这样构造查询：

SELECT * FROM CANDYBARS WHERE CANDYBAR="kitkat" AND SIZE="kingSize"

成年人必须关注表名和列名。成年人必须了解数据的表格结构。为了得到一块糖果，需要输入很多代码。哦，还有“SELECT”、“WHERE”、“FROM”、“AND”……这些都是英文……所以，如果英语不是成年人的母语，那么这个查询对她来说就有点难以理解了……

另一方面，孩子可能会尽快要糖果：

candybar = 'kitkat'
size = 'kingSize'

简单多了，对吧？现在，这段代码实际上不是 GraphQL，但非常接近。我就是这样开始学习的。当时我的想法是：“好吧，GraphQL，你说你只关心数据，我们就让它只关心数据。” 我会稍微改进一下我的查询，让它符合我认为的 JSON 查询的样子，因为我认为这才是你所期望的：也许是一些花括号和一个逗号。

{
  candybar: 'kitkat',
  size: 'kingSize'
}

呃...再想想...省略逗号，因为 5 岁的孩子可能并不总是那么关心标点符号，而是关心效率。

有了这样的思维模式，我该去做另一件五岁小孩最擅长的事情了：玩一玩。幸运的是，在线工具“GraphiQL”非常实用。无需设置或身份验证。我只需要浏览一下，它就可以接受我的输入了。

在那个 Playground 中，我能够在代码窗格中尝试上面的代码片段，并立即发现语法不对。“结果”窗格会告诉我有哪些错误，进一步查看右上角，可以发现有哪些可用的 Schema。所以，最终，只需进行一些修改（是的，还有阅读文档），我就知道上面的查询应该这样写：

{ // <-- NOTE: the word "query" is optional and can be omitted; GraphQL treats this as a query by default. Pretty cool, right?
  candyBars (candyBar: 'kitkat', size: 'kingSize') { // <-- query params
    candyBar // <-- include in resp back to me
    size // <-- include in resp back to me
  }
}

但是，即使实际参数保持不变，一个 5 岁的孩子可能也需要更多信息。这在 GraphQL 中很容易实现：

query {
  candyBars (candyBar: 'kitkat', size: 'kingSize') { // <-- query params
    id // <-- Makes life easier. See mutations below.
    candyBar
    size
    /* Extra props here: */
    shape // 'rectangle'
    wrapperColor // 'red'
    wrapperHasCartoon // true
    /* <-- keep typing...GraphiQL has intellisense... --> */
    /* type until you get the prop you want. */
  }
}

这解决了查询问题，但是如何改变糖果的状态呢？5岁的孩子可能想咬一大块。所以我最初的想法是这样的：

update (id: 123, pctBitten: "50%") {
  size // respond with new size
}

所以，在 GraphQL 中，这个词不是“更新”，而是“变更”。稍加修改后，代码片段就变成了：

mutation {
  biteCandyBar(id: 123, pct: "50%") { // mutations are labeled
    size // respond with new size
  }
}

尽管“mutation”这个词比“update”更难输入，甚至可能超出了5岁孩子的词汇范围，但mutation中的block可能更接近5岁孩子的思维。例如，要执行的mutation是“biteCandyBar”。这也使得参数从“pctBitten”简化为“pct”。根据mutation的标签，可以推断“pct”指的是“pctBitten”。

结论

是的，GraphQL 远不止我描述的这些。这只是皮毛，想要成为它的专家，有责任心的开发者可能会全面阅读文档。但是，为了让你入门，我建议你像 5 岁的孩子一样思考！这或许能很好地减轻你最初接触这门新查询语言时可能产生的恐惧。