[第4章：在Gatsby中处理数据的方法 编] 尝试翻译Gatsby官方文档
首先
在這個系列中，我們將翻譯（並在必要時進行大致摘要）官方文檔，以幫助那些只接觸過英文資料且想嘗試使用「Gatsby」卻不太理解的人們。
这里是实际的官方文件。
这一章的目标是了解GraphQL的概述，并实际获取并显示网站内的信息。
以下是对中文的原生释义：
4. 在《了不起的盖茨比》中，数据的处理方式
让我们学习一下 Gatsby 网站的数据结构，它可以从各种源如 WordPress、Markdown 文件和其他 CMS 中提取数据。
盖茨比的数据结构是由GraphQL构建的。如果想要了解更详细的信息，请点击此处（英文）。
这是基本的事实，网站由以下四个部分组成:
– HTML
– CSS
– JavaScript
– 数据
那么我们首先来学习关于这份数据的内容吧。
“数据是什么？” shì ?)
用计算机科学的角度解释，”数据是指具有字符串（”string”）、整数（42）和对象（{ pizza: true}）等类型的事物的总称”。
然而，在学习Gatsby时，我认为将其视为“在React组件外部的所有内容”会更容易理解。
在你进入这一章之前，你一直直接在组件中编写文本和图像。然而，你可能还希望将位于你所创建的组件之外的信息和图像显示在网站上。
举例来说，假如你使用WordPress和Gatsby来创建网站，你可以将发布的照片、文字等数据拉到你自己创建的组件中并显示出来。
只要学会GraphQL，你就可以从任何来源直接将数据传递给组件并进行显示。
GraphQL是如何将数据传递给组件的？
有很多方法可以获取数据并传递给React组件。其中最著名和受欢迎的方法是GraphQL。
GraphQL是一种由Facebook开发的查询语言。查询是在客户端和服务器之间进行通信时使用的东西，用于直接干预数据库。
Gatsby使用GraphQL查询来声明组件所需的数据。
GraphQL可以在大型且复杂的网站中发挥巨大的作用。如果您要创建的网站规模较小且数据交换较少，可能还需要考虑使用createPages等其他API的方法。如果您不想使用GraphQL而想使用Gatsby，请参阅此处（英文链接）。
尝试使用GraphQL创建网站
我打算在接下来的日子里创建一个名为“Pandas Eating Lots”的Markdown博客网站，其中会发布大量关于熊猫吃食物的照片和视频。通过这个网站，我相信能够亲身体验到GraphQL技术和Gatsby在处理Markdown文件时的易用性。
首先，打开一个新的终端标签，并执行以下命令。
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-four
接下来，让我们在工作目录中安装所需的npm包。我们将使用Typography的主题“Kirkham”和CSS-in-JS库“Emotion”。
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
让我们尝试创建一个类似于第3章中创建的网站。
src/components/layout.js 可以被改写成以下形式：
src/components/layout.js的原文本。
import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"
import { rhythm } from "../utils/typography"
export default ({ children }) => (
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
Pandas Eating Lots
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
)
src/pages/index.js 可以被简化为以下中文语句：”首页的页面js文件”。
import React from "react"
import Layout from "../components/layout"
export default () => (
<Layout>
<h1>Amazing Pandas Eating Things</h1>
<div>
<img
src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
alt="Group of pandas eating bamboo"
/>
</div>
</Layout>
)
src/pages/about.js 可以翻译为”关于.js”或者”关于页面.js”。
import React from "react"
import Layout from "../components/layout"
export default () => (
<Layout>
<h1>About Pandas Eating Lots</h1>
<p>
We're the only site running on your computer dedicated to showing the best
photos and videos of pandas eating lots of food.
</p>
</Layout>
)
src/utils/typography.js 的中文翻译如下：
import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"
const typography = new Typography(kirkhamTheme)
export default typography
export const rhythm = typography.rhythm
请务必将下面的gatsby-config.js文件放置在项目的最顶层目录中。
gatsby-config.js -> gatsby 配置文件.js
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
添加所有上述文件，并执行gatsby develop。如果一切正常，那就没问题了。
这个网站有一个lauout组件和两个page组件，现在已经完成了。现在，让我们开始查询吧。
让我们尝试使用GraphQL。
在创建网站时，我们经常会遇到需要在多个页面上重复使用的数据（信息或图片），比如刚才创建的/about页面中，网站标题（Pandas Eating Lots）在layout组件的头部和about.js文件的
标签中都被使用到了。
然而，如果将来你想要改变网站标题，你会怎么做呢？如果你是很久之前创建的网站，已经记不清楚了，你是否想要检查所有组件并找到显示网站标题的部分进行修正呢？
不是这样，而是只需要准备一个存储此类数据的位置，并在需要时从其他文件中调用该数据以在组件中进行显示，这样不仅可以节省寻找的麻烦，而且减少错误的发生并且容易管理。
在Gatsby网站上，一般的数据，例如标题，都会保存在gatsby-config.js文件的siteMetadata中。您可以将您的网站标题真实地放入并使用。
gatsby-config.js -> Gatsby配置文件
module.exports = {
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
让我们尝试执行查询
那么，让我们将about.js编辑如下，并尝试访问localhost:8000/about。
以下是 src/pages/about.js 的重述版本：
src/pages/about.js 的页面内容
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => (
<Layout>
<h1>About {data.site.siteMetadata.title}</h1>
<p>
We're the only site running on your computer dedicated to showing the best
photos and videos of pandas eating lots of food.
</p>
</Layout>
)
export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`
请确认标题是否正确显示了？
这次执行的查询是以下的GraphQL代码。
{
site {
siteMetadata {
title
}
}
}
这是一个被称为页面查询的东西，通常写在页面组件的最后部分。事实上，这个页面查询只能在页面组件中执行。
让我们尝试使用StaticQuery。
StaticQuery是在Gatsby的v2版本中引入的新API，可以在除了page组件以外的地方使用。让我们试试实际地导入和使用一个叫做useStaticQuery的工具。
让我们将 src/components/layout.js 作如下编辑。
src/components/layout.js 的中文翻译可为：源码/组件/布局.js。
import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"
import { rhythm } from "../utils/typography"
export default ({ children }) => {
const data = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
}
}
}
`
)
return (
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
{data.site.siteMetadata.title}
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
)
}
在layout组件中是否显示了使用GraphQL获取的标题，如下所示？
暂时记住这个事实：在这次的页面组件中有一些只能用于页面组件的查询，还有一些可以用于其他地方的查询。在第5至7章中，我们还将学习有关数据的内容，所以GraphQL的学习才刚刚开始。
最后，让我们将网站标题恢复为原来的“熊猫大吃特吃”。只需要编辑gatsby-config.js文件中的title。
辛苦了！
参考文献：Gatsby官方文档
下一章的主题是”尝试使用插件来利用GraphQL”。
尽情享受吧！
[第0章：环境搭建版] 尝试翻译 Gatsby 官方文档。
第1章：理解Gatsby网站 编：尝试翻译Gatsby官方文档。
[Gatsby样式化篇：第2章] 尝试翻译Gatsby官方文档。
我尝试翻译了Gatsby官方文档中的第3章：使用Layout组件。
