Add Static Data to a Gatsby Theme

InstructorJason Lengstorf

Gatsby>=2.13.1

Share this video with your friends

Send Tweet

Learn how to load data from MDX (or any data source) and ensure the necessary folders exist.

To do this, we'll need to add the data in a folder in the project and install two plugins: gatsby-source-filesystem and gatsby-transformer-yaml

In gatsby-config.js, both of those plugins will be defined in the plugin array and the data will be exposed through out our application through GraphQL.

For a written version of this course, check out the Gatsby docs.

Md. Anam Hossain

~ 5 years ago

My data is coming inside graphql playground . I follow all the steps one more time. But bad luck

Md. Anam Hossain

~ 5 years ago

https://github.com/anamwp/gatsby-theme-with-json this is my repo. I don't know why data is not coming inside graphql playground

Md. Anam Hossain

~ 5 years ago

The problem is fixed. The only reason is the file relative path issue. :)

techtrainingAtshaadi

~ 5 years ago

This works:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-yaml`,
      options: {
        typeName: `Event`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/data/`
      }
    }
  ]
};

Md. Anam Hossain

~ 5 years ago

Thanks

Ahmed AlQahtani

~ 5 years ago

Here is the data in events.yml:

- name: React Rally
  location: Salt Lake City, UT
  start_date: 2019-08-22
  end_date: 2019-08-23
  url: https://www.reactrally.com/

- name: DinosaurJS
  location: Denver, CO
  start_date: 2019-06-20
  end_date: 2019-06-21
  url: https://dinosaurjs.org/

- name: JSHeroes
  location: Cluj-Napoca, Romania
  start_date: 2020-04-23
  end_date: 2020-04-24
  url: https://jsheroes.io/

- name: The Lead Developer
  location: Austin, TX
  start_date: 2019-11-08
  end_date: 2019-11-08
  url: https://austin2019.theleaddeveloper.com/