使用Gatsby时在哪里记录数据的最佳实践，以及如何将数据导入Gatsby.config.js或graphql

Question

我跟随盖茨比文档了解盖茨比中的数据，他们向我展示了如何在中的siteMetadata块中创建graphql变量

gatsby.config.js

module.exports = {
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}

然后可以使用graphql查询访问它

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
}
}
}
`

---

我想把我的网络应用程序中的所有数据与代码的其余部分分开，并且所有数据都包含在一个地方，例如，我可能有一个看起来像的文件

navLinks = ["Home", "About", "Contact"]
homePageIntro = "Hello! Thank you for visiting my website"
logo = 'https://aws.amazon.com/mys3.logo'
contactPhoto = 'https://aws.amazon.com/mys3.logo'
aboutPageFirstPar = 'This is the first paragraph on the about page'
aboutPageSecondPar = 'This is the Second paragraph on the about page'

或者，将我的文本和链接分离成单独的文件可能是更好的做法？

我只是觉得，将所有数据变量插入siteMetadata可能不是最好的方法，但也许我错了？

Answer 1

您可以在一个JSON文件中移动数据，然后使用gatsby-transformer-json将其放入graphql。这样，您就可以使用graphql查询来访问数据。

PS。您也可以使用useStaticQuery挂钩。

点击此处了解更多信息：https://www.gatsbyjs.org/packages/gatsby-transformer-json/