Gatsby 学习 - 02 GraphQL 数据层

GraphQL 数据层

介绍

在 Gatsby 框架中提供了一个统一的存储数据的地方，叫做数据层。

Gatsby 在构建应用时，会先从外部源获取数据并将数据放入数据层，组件可以直接从数据层查询数据。

目的：由于外部数据源的多样性，造成了数据格式的多样性。将数据统一存储在数据层，有助于统一对数据格式进行转化，有助于对数据资源进行统一的规划处理。

Gatsby 数据层是使用 GraphQL 构建的。

GraphQL 调试页面：http://localhost:8000/___graphql

示例

构建查询命令

构建查询页面信息的命令。

点击展开左侧查询数据对象，勾选要查询的数据：

在组件中从数据层中查询数据

页面组件

1. 在组件文件中导出查询命令
   • 调用 gatsby 提供的 graphql 方法创建查询命令（实际返回一串数字字符串）
   • graphql 方法以模板字符串方式接受 GraphQL 调试页面中构建的查询命令
2. 框架执行查询并将结果传递到组件的 props 对象
   • 查询结果就是 GraphQL 调试页面右侧的查询结果的 data 的值
   • 查询结果会存储在 props.data 属性上

// 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>
  )
}