使用 GraphQL 查询数据

介绍

GraphQL 是一种用于访问对象图的查询语言。它被设计为类型安全的，并允许客户端仅请求他们需要的数据。

在本指南中，您将学习如何构建 GraphQL 查询。然后，我们将探索 GraphQL 的一些独特功能，包括片段、发送变量和 GraphQL 指令。在本指南中，您将使用Star Wars API 的 GraphQL 实现来测试 GraphQL 的查询功能。

在 GraphiQL 中执行基本查询

GraphiQL是一个简单的 UI 工具，允许您使用自动完成和语法突出显示的便利来查询 GraphQL 端点。

要开始编写您的第一个 GraphQL 查询，请导航至《星球大战》GraphiQL 页面。从此页面，您可以查看 GraphQL 端点的文档、提交查询并查看输出。

在 GraphiQL 的左上窗格中提交以下查询。

      query GetAllFilms {
  allFilms {
    films {
      title
      episodeID
      openingCrawl
      director
      producers
      releaseDate
    }
  }
}
    

此查询由三部分组成：

GetallFilms是客户端可以设置的操作名称。这对于调试问题很有用。
allFilms是根节点上字段公开的端点。它是一种复杂的Film类型，将多个标量值组合成一个单元。
title、episodeID、director等都是字段。这些是您请求在响应数据中显示的数据单位。allFilms也是一个将嵌套在其中的字段组合在一起的字段。

这些是 GraphQL 查询的基本构建块。在以下部分中，您将使用这些构建块执行更高级的查询。

向 GraphQL 字段发送参数

您刚刚查询了所有影片。但是，有时您只需要这些数据的子集。使用《星球大战》GraphQL 端点，您可以将参数发送到allFilms字段以过滤数据。

有两种方式可以发送参数。第一种是内联方式：

      query GetAllFilms {
  allFilms(first: 3) {
    films {
      title
      episodeID
      openingCrawl
      director
      producers
      releaseDate
    }
  }
}
    

您将查询中的allFilms字段修改为allFilms(first: 3)。当您不需要更改参数的值时，此方法是合适的。如果参数值经常更改，最好定义一个输入变量。

为此，请将您的查询更新为以下内容：

      query GetAllFilms($firstFilms: Int) {
  allFilms(first: $firstFilms) {
    films {
      title
      episodeID
      openingCrawl
      director
      producers
      releaseDate
    }
  }
}
    

您还需要设置变量。在 GraphiQL 中，这在屏幕左下方配置。插入以下 JSON 以设置上面定义的查询操作中的变量。

      {"firstFilms": 3}
    

使用 GraphQL Fragment

当您使用 GraphQL 查询大量资源时，您的查询可能会变得非常大。管理此问题的一种方法是将查询拆分为称为片段的小的可重复使用的部分。片段是特定 GraphQL 类型的选择集，可以在不同的查询操作中重复使用。

下面的代码片段演示了在同一个查询操作中重复使用Film类型的代码片段。

      query GetAllFilms {
  allFilms {
    films {
      title
      episodeID
      openingCrawl
      director
      producers
      releaseDate
      id
    }
  }

  film(id:"ZmlsbXM6MQ==") {
    ...FilmFragment
  }
}

fragment FilmFragment on Film {
  title
  episodeID
  openingCrawl
  director
  producers
  releaseDate
  id
}
    

使用 GraphQL 指令

GraphQL 的一个强大功能是包含指令。这些声明以@为前缀，允许在服务器或客户端上执行额外的逻辑。

Star Wars Schema 中内置了两个指令：@include和@skip 。以下代码片段演示了@include的用法：

      query GetAllFilms($includeFilm: Boolean!) {
  allFilms {
    films {
      title
      episodeID
      openingCrawl
      director
      producers
      releaseDate
      id
    }
  }

  film(id:"ZmlsbXM6MQ==") @include(if: $includeFilm) {
    ...FilmFragment
  }
}

fragment FilmFragment on Film {
  title
  episodeID
  openingCrawl
  director
  producers
  releaseDate
  id
}
    

film字段附加了@include(if: $includeFilm)。添加此项允许客户端在$includeFilm变量设置为true时有条件地请求 film 字段，并在设置为false时不返回此字段。这种方法使得无需修改查询即可检索不同的资源。

结论

GraphQL 正成为一项越来越重要的技术。它由 Facebook 开发，GitHub、Pinterest 和 Coursera 等其他大型组织也采用了它。Web 和集成开发人员需要学习这种查询语言才能访问下一代 API。下一步，您可能想探索如何在 React 应用中设置 GraphQL。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文