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

Posted 2023-03-08

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

【英文标题】：In Gatsby config how can I isolate the metadata object to it's own file but still be able to use it in GraphQL?

【发布时间】：2021-05-02 17:19:53

【问题描述】：

学习 Gatsby 我参考了文档并了解了 siteMetadata object。不喜欢把文件弄得乱七八糟，我想看看是否可以将元数据隔离到单个文件中并将其引入，但我遇到了 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

研究

Using an Object in Gatsby Config File Not able to add favicon in gatsby config file Gatsby's Graphql say “Cannot query field ”allMarkdownRemark“ on type ”Query“” and don't appear gatsby-transformer-remark Cannot query field “x” on type “y”

问题

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

---

编辑

answer 建议实现扩展运算符之后：

错误

src/components/seo.js 76:9 错误无法查询字段 类型“SiteSiteMetadata”上的“titleTemplate” 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`],

来自 seo.js 的 graphQL：

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

【参考方案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: [
    ...
  ],

【讨论】：

出于某种原因，即使我实现了这种方法，GraphQL 仍然在siteMetadata 上竖起大拇指。我会进行编辑。