GraphQL 数据层
介绍
在 Gatsby 框架中提供了一个统一的存储数据的地方,叫做数据层。
Gatsby 在构建应用时,会先从外部源获取数据并将数据放入数据层,组件可以直接从数据层查询数据。
目的:由于外部数据源的多样性,造成了数据格式的多样性。将数据统一存储在数据层,有助于统一对数据格式进行转化,有助于对数据资源进行统一的规划处理。
Gatsby 数据层是使用 GraphQL 构建的。
GraphQL 调试页面:http://localhost:8000/___graphql
示例
构建查询命令
构建查询页面信息的命令。
点击展开左侧查询数据对象,勾选要查询的数据:
在组件中从数据层中查询数据
页面组件
- 在组件文件中导出查询命令
- 调用 gatsby 提供的
graphql
方法创建查询命令(实际返回一串数字字符串) graphql
方法以模板字符串方式接受 GraphQL 调试页面中构建的查询命令
- 调用 gatsby 提供的
- 框架执行查询并将结果传递到组件的
props
对象- 查询结果就是 GraphQL 调试页面右侧的查询结果的
data
的值 - 查询结果会存储在
props.data
属性上
- 查询结果就是 GraphQL 调试页面右侧的查询结果的
// src\pages\index.js
import React from "react"
import {graphql } from "gatsby"
export default function Home({ data }) {
return <div>Page Count: {data.allSitePage.totalCount}</div>
}
// 导出的 query 变量可以定义为任意名称
// Gatsby 会从文件中查找导出的 `graphql` 字符串
export const query = graphql`
query {
allSitePage {
totalCount
nodes {
path
}
}
}
`
注意:此处并没有将查询命令的名称
MyQuery
粘贴过来,因为项目中如果出现重复的查询名称,可能会报错:Multiple "root" queries found: "MyQuery" and "MyQuery". Only the first ("MyQuery") will be registered.
为避免这种情况,还是不要使用查询名称了。
非页面组件
通过钩子函数 useStaticQuery
进行手动查询。
在组件文件中调用 useStaticQuery
钩子函数,该函数接收 graphql
方法创建的查询命令作为参数,返回查询结果。
import { graphql, useStaticQuery } from 'gatsby'
const data = useStaticQuery(graphql`
query {
allSitePage {
totalCount
nodes {
path
}
}
}
`)
// data.allSitePage.totalCount
示例
Gatsby 允许将网站的元数据存储在 gatsby0config.js
配置文件中,然后 Gatsby 会将网站的元数据添加到数据层中。
配置元数据
// gatsby-config.js
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/gatsby-config/
*/
module.exports = {
// siteMetadata 对象用于配置网站元数据
siteMetadata: {
title: 'Hello Gatsby',
author: 'Jone'
},
/* Your site config here */
plugins: [],
}
构建查询命令
页面组件
// src\pages\index.js
import React from "react"
import { Link, graphql } from "gatsby"
export default function Home({ data }) {
return (
<div>
<Link to="/person/zhangsan">张三</Link>
<Link to="/person/lisi">李四</Link>
<p>{data.site.siteMetadata.title}</p>
<p>{data.site.siteMetadata.author}</p>
</div>
)
}
export const query = graphql`
query {
site {
siteMetadata {
author
title
}
}
}
`
非页面组件
// src\components\Header.js
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
export default function Header() {
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
author
title
}
}
}
`)
return (
<div>
<p>{data.site.siteMetadata.title}</p>
<p>{data.site.siteMetadata.author}</p>
</div>
)
}
// src\pages\list.js
import React from "react"
import Header from "../components/Header"
export default function List() {
return (
<div>
List Page
<Header />
</div>
)
}