6、Gatsby 数据获取与查询全攻略

Gatsby 数据获取与查询全攻略

在 Gatsby 项目中，数据的获取和查询是构建功能丰富网站的关键环节。本文将详细介绍在 Gatsby 中使用 GraphQL 查询数据的方法，以及如何从本地文件和远程内容管理系统（CMS）中获取数据。

1. GraphQL 查询的使用场景

在 Gatsby 项目中，GraphQL 查询主要可在以下三个地方使用：
- Gatsby - node.js ：该文件可基于动态数据以编程方式创建页面。例如，若有一个 Markdown 博客文章列表，想为每篇文章创建一个页面，可在此处使用查询从文章中检索所需数据，以动态创建页面。
- 页面内部 ：可将查询附加到单实例页面，使数据在该页面中可用。也可在页面模板中进行查询，查询在构建时运行，因此创建的页面仍是静态的。
- 其他组件内部 ：可在任何创建的 React 组件中检索 GraphQL 数据。但在页面模板之外检索数据的方法不同，因为在页面模板之外无法使用变量获取动态内容，所以这种方式运行的查询是静态的。

2. 从本地文件获取数据

2.1 网站元数据

可将小型可重复使用的数据存储在 gatsby - config.js 文件的 siteMetadata 属性中。以下是创建网站元数据并在主页中使用的步骤：
1. 更新 gatsby - config.js 文件：