使用JavaScript API的状态练习GraphQl查询

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我拥有完美的API：JavaScript GraphQl API的全新，新鲜的VS代码状态。

JavaScript调查状态是对JavaScript景观的年度调查。我们已经做了四年了，最近版的开发人员超过20,000。

我们一直依靠盖茨比建立我们的展示网站，但是直到今年，我们一直以一种通过某种仅仅是凡人称为“ Elasticsearch”的奥术魔术而生成的静态YAML文件的形式，以静态的YAML文件的形式提供给Gatsby。

但是，由于盖茨比（Gatsby）大便将其作为GraphQl所食用的所有数据源排出，但我们不妨跳过中间人并直接将其馈送为GraphQl！是的，我知道，这个隐喻在第二次越来越大，我已经后悔了。我的意思是：我们为数据构建了内部GraphQL API，现在我们可以向所有人提供它，以便您也可以轻松利用数据集！

“但是等等，”你说。 “我一生都在研究刀片，这让我没有时间学习GraphQl！”不用担心：这就是本文的出现。

什么是GraphQl？

GraphQl的核心是一种语法，可让您指定要从API接收的数据。请注意，我说的是API ，而不是数据库。与SQL不同，GraphQl查询不是直接转到数据库，而是转到您的GraphQl API端点，该端点可以连接到数据库或任何其他数据源。

GraphQl比REST（如REST）的最大优势在于，它可以让您要求您想要什么。例如：

询问 {
  用户（id：“ foo123”）{
  姓名
 }
}

将为您提供具有单个名称字段的用户对象。还需要电子邮件吗？只是做：

询问 {
 用户（id：“ foo123”）{
  姓名
  电子邮件
 }
}

如您所见，此示例中的用户字段支持ID参数。现在，我们来到GraphQl的最酷功能，嵌套：

询问 {
 用户（id：“ foo123”）{
  姓名
  电子邮件
    帖子{ 
      标题
      身体
    }
  }
}

在这里，我们说我们想找到用户的帖子，并加载其标题和身体。关于GraphQl的好处是，我们的API层可以完成如何以特定格式获取该额外信息的工作，因为我们不是直接与数据库交谈，即使它没有以嵌套格式存储在我们的实际数据库中。

塞巴斯蒂安·斯科尔（Sebastian Scholl）的出色工作在解释graphql时，就好像您是在鸡尾酒搅拌机上第一次见面一样。

介绍GraphIQL

GraphIQL（注意其中的“ i”）是那里最常见的GraphQl IDE，它是我们将用于探索JavaScript API状态的工具。您可以立即在graphiql.stateofjs.com上启动它，并且它将自动连接到我们的端点（即api.stateofjs.com/graphql）。 UI由三个主要要素组成：探险家面板，查询构建器和结果面板。稍后，我们将其添加到其中，但现在让我们保持简单。

Explorer选项卡是由OneGraph开发和维护的涡轮增压版本的一部分。非常感谢他们帮助我们整合它。如果要部署自己的graphiql实例，请务必查看他们的示例存储库。

不用担心，我不会让您编写任何代码。取而代之的是，让我们从现有的GraphQl查询开始，例如与过去四年相对应的React的开发人员体验的查询。

还记得我说我们在内部使用GraphQl来构建我们的网站吗？我们不仅要公开API，而且还可以自己揭露查询。单击小“导出”按钮，在“ GraphQl”选项卡中复制查询，将其粘贴到Graphiql的查询构建器窗口中，然后单击“播放”按钮。

如果一切都按计划进行，则应看到您的数据出现在结果面板中。让我们花点时间分析查询。

查询React_experienceQuery {
  调查（调查：JS）{
    工具（id：react）{
      ID
      实体 {
        首页
        姓名
        github {
          URL
        }
      }
      经验 {
        Allyears {
          年
          全部的
          完成{
            数数
            百分比
          }
          意识感兴趣{
            意识
            兴趣
            满意
          }
          水桶{
            ID
            数数
            百分比
          }
        }
      }
    }
  }
}

首先是查询关键字，该关键字定义了我们的GraphQl查询的开始以及查询的名称react_experienceQuery。查询名称在GraphQL中是可选的，但对于调试目的可能很有用。

然后，我们进行了第一个领域的调查，该领域进行了调查论点。 （我们也有一个CSS调查状态，因此我们需要指定有关调查的调查。）然后，我们有一个工具字段，该工具字段采用ID参数。之后的所有内容都与该特定工具的API结果有关。实体为您提供有关所选特定工具（例如React）的信息，而经验包含实际的统计数据。

现在，我将教您一个小技巧：命令单击（或控制单击）GraphIQL中的任何一个字段，而是会启动Docs面板。恭喜，您刚刚目睹了GraphQl的另一个技巧，即自我证明！您可以将文档直接写入API定义，而GraphIQL将依次将其用于最终用户。

更改变量

让我们进行一些调整：在查询构建器中，用“ vuejs”替换“ react”，您应该注意到另一个很酷的GraphQl Thing：Auto-Completion。这对于避免犯错或节省时间非常有帮助！再次按“ Play”，您将获得相同的数据，但是这次为VUE。

使用资源管理器

现在，我们将再解锁一个GraphQl电源工具：Explorer。资源管理器基本上是整个API的树，不仅可以使您可视化其结构，而且还可以在不编写一行代码的情况下构建查询！因此，让我们尝试使用Explorer这次重新创建React查询。

首先，让我们打开一个新的浏览器选项卡，并在其中加载graphiql.stateofjs.com以开始新鲜。单击Explorer中的调查节点，在其下方的工具节点下，单击“播放”。该工具的ID字段应自动添加到结果中，顺便说一句，这是将默认参数值（“ typeScript”）更改为“ React”的好时机。

接下来，让我们继续钻探。如果您添加没有任何子字段的实体，则应该在其下面看到一条小弯曲的红线，让您知道您还需要指定至少一个或多个子场。因此，让我们至少添加ID，名称和主页。另一个有用的技巧：您可以自动告诉GraphIQL通过将其控制在Explorer中键入选项，以添加所有字段的子字段。

接下来是经验。继续添加字段和子字段，直到您获得最初从JavaScript网站复制的查询的内容。您选择的任何项目都会立即反映在查询构建器面板内。在那里，您刚刚写了第一个GraphQl查询！

过滤数据

您可能已经注意到经验丰富的紫色过滤器项目。实际上，这是您要使用我们的GraphQL API而不是简单地浏览我们的网站的关键原因：API提供的任何聚合都可以通过许多因素过滤，例如受访者的性别，公司规模，工资，工资或国家 /地区。

扩展过滤器，然后选择CompanySize，然后选择EQ和Range_more_than_1000。您刚刚计算了React在大公司中的知名度！相反，选择Range_1，您现在可以将其与自由职业者和独立开发人员之间的同一数据点进行比较。

重要的是要注意，GraphQL仅定义非常低级别的原始词，例如字段和参数，因此这些等式，IN，NIN等。过滤器不是GraphQl本身的一部分，而是我们在设置API时已经定义了自己的参数。一开始这可能是很多工作，但是它确实可以使您完全控制客户如何查询API。

结论

希望您已经看到查询GraphQl API并不是那么大，尤其是使用GraphiQl之类的很棒的工具来帮助您完成。现在可以肯定的是，实际将GraphQl数据集成到现实世界应用程序中是另一回事，但这主要是由于处理客户端和服务器之间的数据传输的复杂性。 GraphQL部分本身实际上很容易！

无论您是希望开始使用GraphQL还是只是学习足以查询我们的数据并提出一些令人惊叹的新见解，我希望本指南能够证明有用！

而且，如果您有兴趣参加我们的下一个调查（应该是CSS 2020的状态），请务必注册我们的邮件列表，以便在我们启动时可以通知您。

JavaScript API参考状态

您可以在API.stateofjs.com上找到有关API的更多信息（包括指向实际端点和GitHub Repo的链接）。

这是JS API状态内使用的术语的快速词汇表。

顶级字段

• 人口统计：重组所有人口统计信息，例如性别，公司规模，工资等。
• 实体：访问有关特定“实体”（库，框架，编程语言等）的更多信息。
• 功能：特定JavaScript或CSS功能的使用数据。
• 功能：相同，但遍布一系列功能。
• 矩阵：访问用于填充我们的交叉参考热图的数据。
• 意见：特定问题的意见数据（例如“您认为JavaScript正在朝正确的方向移动？”）。
• 其他工具： “其他工具”部分的数据（文本编辑器，浏览器，捆绑器等）。
• 资源： “资源”部分的数据（网站，博客，播客等）。
• 工具：体验特定工具（库，框架等）的数据。
• 工具：相同，但跨各种工具。
• ToolsRankings：一系列工具的排名（意识，兴趣，满意度）。

普通字段

• 完成：哪个比例的受访者回答了任何给定的问题。
• 存储桶：包含实际数据的数组。
• 年份/Allyears：是否获取特定调查年度的数据；或包含全年的阵列。

以上是使用JavaScript API的状态练习GraphQl查询的详细内容。更多信息请关注PHP中文网其他相关文章！