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

Question

学习盖茨比，我参考了文档，了解了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

研究

• 在Gatsby Config文件中使用对象
• 无法在gatsby配置文件中添加
• gatsby的Graphql在“查询”类型上说“不能查询字段”“allMarkdownRemark”，并且不显示gatsby-转换器备注
• 不能查询“y”类型上的字段“x”

问题

我已经用.cache清理了npm run clean和公共目录。在gatsby-config.js中，我如何将元数据对象隔离到它自己的文件中，并能够在GraphQL中引用它呢？

编辑

在回答建议实现扩展操作符之后：

错误

src/components/seo.js 76:9错误不能查询"titleTemplate“类型的"SiteSiteMetadata”graphql/template-字符串

代码

./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来自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: [
    ...
  ],
}