In Gatsby config how can I isolate the metadata object to it's own file but still be able to use it in GraphQL?

Question

Learning Gatsby I've referenced the docs and learned about the siteMetadata object. Not being a fan of cluttering up a file I wanted to see if I could isolate the metadata into individual files and bring it in but I'm experiencing a GraphQL error.

structure

In root I created a directory:

/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,
  },
]

bringing it into 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`,
  ],
}

error

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

and

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

research

• 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”

question

I've cleaned the .cache and public directories with npm run clean. In gatsby-config.js how I can I isolate the metadata object into it's own files and also be able to reference it in GraphQL?

---

Edit

After answer suggesting implementation of the spread operator:

error

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

code

./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

I think you have better approaches to using menu navigation rather than putting them in the siteMetadata object like using useStaticQuery hook to make the navigation reusable. However, if you want to merge two objects you can easily do something like:

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


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

Or directly:

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

const mergedObject={...siteMetadata, ...menuLinks}

module.exports = {
  siteMetadata{
   ...siteMetadata,
   ...menuLinks
  },
  plugins: [
    ...
  ],
}