The interaction between Gatsby and material-ui involves exploring GraphQL in Chinese.

2 年 ago

文, 翔

1 minute

要做的事情 de

page query / non-page query で情報を取り出す

将网站信息进行注册。

作为前期准备，我们需要注册网站标题和作者姓名：

module.exports = {
  siteMetadata: {
    title: "Ataru Kodaka Site",
    author: "Ataru KODAKA",
    description: ''
  }
}

我们将从程序中了解如何提取这些信息。

尝试使用GraphQL

如果你用树形结构请求这个东西，它会以相同的树形结构回复给你。用REST的话，每个请求只能得到一个数据，但用GraphQL可以一次获取多种数据。实际操作会更加迅速。

输入http://localhost:8000/___graphql后，会出现一个显示树状结构的多个窗格。如果在探索器中依次点击站点-站点元数据-标题、作者，那么中间的窗格中会显示相关信息。

query MyQuery {
  site {
    siteMetadata {
      title
      author
    }
  }
}

会显示。点击播放按钮(？)，右侧窗格会显示。

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "Ataru Kodaka Site",
        "author": "Ataru KODAKA"
      }
    }
  },
  "extensions": {}
}

当我们获取这个数据后，可以在程序中使用 data.site.siteMetadata.title 进行引用。

查询处理

作为其中的一种方法，可以大致分为Page Query和Non-Page Query两种。

翻页查询

只能在处理页面时使用，并且不能在组件内使用。

import React from "react"
 import { graphql } from 'gatsby'

// page query を投げる
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        author
      }
    }
  }
`
const AboutPage = ({ data }) => {  // data に返ってくる
    return (<ul>
        <li key="title">{data.site.siteMetadata.title}</li>
        <li key="author">{data.site.siteMetadata.author}</li>
    </ul>)
}
export default AboutPage

使用`graphql()`函数，从“gatsby”中进行导入。
然后使用它来发出相应的查询，将返回的结果存储在const变量中并进行导出，
之后可以用另一个自定义的函数将结果作为参数data接收。虽然不太理解，但真的很厉害。

由于结果以 JSON 格式提供，您可以根据自己的需要自由使用。

非页面查询

这次不是从页面处理，而是从组件内部读取。
前面提到的方法不可用，取而代之的是使用 useStaticQuery()。

import React from "react"
import { graphql, useStaticQuery } from "gatsby"

const Hello = ( ) => {
    const data = useStaticQuery(graphql`
    {
        site {
            siteMetadata {
                author
            }
        }
    }        
    `)
    return (
        <big>HELLO {data.site.siteMetadata.author}!!!</big>
    )
}

export default Hello