在 Gatsby 配置中，如何将元数据对象隔离到它自己的文件中，但仍然可以在 GraphQL 中使用它？

Question

Learning Gatsby我已经参考了文档并了解了siteMetadata对象。我不喜欢把文件弄得乱七八糟，我想看看我是否能把元数据隔离到单独的文件中，然后把它带进来，但我遇到了GraphQL错误。

我在根目录下创建了一个目录:

/config

menuLinks.js:

module.exports = [
{
name: `Home`,
link: `/`,
img: 'a.png',
},
{
name: `Articles`,
link: `/articles`,
img: 'b.png',
},
{
name: `About`,
link: `/about`,
img: 'c.png',
},
{
name: `Events`,
link: `/events`,
img: 'e.png',
},
]

siteMetadata.js:

const menuLinks = require('./menuLinks')
module.exports = [
{
title: `Project`,
titleTemplate: `%s · a starting point`,
author: {
name: `foo bar`,
summary: `Enter the foo`,
},
description: `Just fooling around`,
url: `https://something.io`,
logo: `/logo.png`,
twitter: `foobar`,
menuLinks,
},
]

将其导入gatsby-config.js:

const siteMetadata = require('./config/siteMetadata')
module.exports = {
siteMetadata,
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-postcss`,
`gatsby-plugin-css-customs`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/content/images/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `events`,
path: `${__dirname}/content/events/`,
},
},
{
resolve: `gatsby-transformer-yaml`,
options: {
typeName: `Event`, // a fixed string
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `articles`,
path: `${__dirname}/content/articles/`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 1080,
quality: 100,
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Project`,
short_name: `Project`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#ffffff`,
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: `standalone`,
icon: `static/icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-offline`,
],
}

错误

28:11  error  Cannot query field "menuLinks" on type "SiteSiteMetadata"  graphql/template-strings

和

76:9  error  Cannot query field "titleTemplate" on type "SiteSiteMetadata"  graphql/template-strings

• 在盖茨比配置文件中使用对象
• 无法在盖茨比配置文件中添加图标
盖茨比的图表显示"在键入"query"时无法查询字段"allMarkdownRemark"并且不显示Gatsby -transformer-remark
• 无法在类型"y"上查询字段"x">

问题我已经用npm run clean清理了.cache和公共目录。在gatsby-config.js我怎样才能把元数据对象隔离到它自己的文件中，也能够在GraphQL中引用它?

---

编辑

答案后建议执行扩展运算符:

错误

src/components/seo.js 76:9 error Cannot query field"titleTemplate"on type "SiteSiteMetadata"graphql/template-strings

/config/siteMetadata.js:

const links = require('./menuLinks')
module.exports = [
{
title: `Project`,
titleTemplate: `%s · a starting point`,
author: {
name: `foo bar`,
summary: `Enter the foo`,
},
description: `Just fooling around`,
url: `https://something.io`,
logo: `/logo.png`,
twitter: `foobar`,
menuLinks: {
...links,
},
},
]

/config/menuLinks.js:

module.exports = [
{
name: `Home`,
link: `/`,
img: 'a.png',
},
{
name: `Articles`,
link: `/articles`,
img: 'b.png',
},
{
name: `About`,
link: `/about`,
img: 'c.png',
},
{
name: `Events`,
link: `/events`,
img: 'e.png',
},
]

gatsby-config.js

const metadata = require('./config/siteMetadata')
module.exports = {
siteMetadata: {
...metadata,
},
plugins: [`gatsby-plugin-react-helmet`],
}

graphQL from seo.js:

const query = graphql`
query SEO {
site {
siteMetadata {
defaultTitle: title
titleTemplate
defaultDescription: description
siteUrl: url
defaultImage: logo
twitterUsername: twitter
}
}
}
`

Answer 1

我认为你有更好的方法来使用菜单导航，而不是把它们放在siteMetadata对象中，比如使用useStaticQuery钩子来使导航可重用。但是，如果您想合并两个对象，您可以轻松地执行如下操作:

// gatsby-config.js
const siteMetadata = require('./config/siteMetadata')
const menuLinks = require('./menuLinks')

module.exports = {
mergedObject,
plugins: [
...
],
}

或直接:

// gatsby-config.js
const siteMetadata = require('./config/siteMetadata')
const menuLinks = require('./menuLinks')
const mergedObject={...siteMetadata, ...menuLinks}
module.exports = {
siteMetadata{
...siteMetadata,
...menuLinks
},
plugins: [
...
],
}