how to import data to gatbsy-config.js

I would like to add data to gatbsy-config in order to use GraphQL to manage the data.

so I copied the gatbsy-config.js :

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
}

and I replaced the siteMetadata with my data, and all work fine.

But I would like to use an json, or any file to store the data, and not put in the config directly, so I tried :

import data fron ‘src/data/myData.json’

module.exports = {
  siteMetadata: {
    data: data
  },
}

but I get an error on the first like

import projects from 'src/data/myData.json';
                                                                       ^^^^^^^^
  SyntaxError: Unexpected identifier

So it looks like I can’t use import. Is there a way to achieve this ?

39 thoughts on “how to import data to gatbsy-config.js”

  1. Suppose your data file’s directory is src/data/.

    Let’s say your data file is config.js and it includes

    const config = {
        title: `Gatsby Default Starter`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`
    }
    
    module.exports = config;
    

    Then in your gatsby-config.js file you can import this file like below:

    const config = require('./src/data/config');
    
    module.exports = {
      siteMetadata: {
        title: config.title,
        description: config.description,
        author: config.author
      },
    
    }
    
    Reply

Leave a Comment