How do i use data collection with gatsby and Netlify CMS

Question

So ive just setup the one-click installer of Gatsby with Netlify CMS.

Im trying to figure out how to implement a way to add staff members to the default contact page.

in jekyllrb there was a simple collection content defined in the _config.yml that you could fetch data from.

is there a similar way to use "custom" data collections with Gatsby? i dont want a separate page for each staff-member, just a way to loop all members to display on page and integrate with Netlify-CMS so i can ADD/UPDATE/DELETE staff-member. (i guess i want to do it in a react component called <Staff /> or something similar

ive tried to add a data folder that i thought could hold a md file to fetch collections from. but im getting an error that the src/data/collection.md file needs a template (e.g templateKey: product-page)

{
 resolve: `gatsby-source-filesystem`,
 options: {
   name: `data`,
   path: `${__dirname}/src/data/`,
   ignore: [`**/\.*`], // ignore files starting with a dot
   },
 },

i understand this is a vague question, but maybe someone can point me in the right direction?

Answer 1

there a similar way to use "custom" data collections with Gatsby?

Sure there is. Create a /static folder at the root of your project (if you don't haven't it created yet). There create another /admin folder and place a config.yml there. The final structure is: /static/admin/config.yml.

Basically, the config.yml file is where your collections and the CMS will be configured based on the broad documentation from Netlify. It also exposes a localhost:8000/admin (or yourDomain.com/admin on production) URL to log into your private CMS and perform the CRUD actions to your collections.

The case you are describing may look something like:

collections:
  - label: "Pages"
    name: "pages"
    files:
      - label: "Contact"
        name: "contact"
        file: "site/content/about.yml"
        fields:
          - {name: templateKey, label: Template Key, required: true, widget: hidden, default: contact}
          - {label: Title, name: title, widget: string}
          - label: Team
            name: team
            widget: list
            fields:
              - {label: Name, name: name, widget: string}
              - {label: Position, name: position, widget: string}
              - {label: Photo, name: photo, widget: image}

Note: you'll need to set up a few mandatory parameters before starting with the collections. Since they are private I've omitted them.

With this snippet, you are creating a folder collection of pages, with a contact page inside, the rest of the fields are quite self-explanatory, use the documentation as a support to understand the fields and the default/optional parameters of each entity.

In your Contact page, you just need to use a page query filtered by the templateKey field:

import { graphql } from 'gatsby';
import React, { useState } from 'react';
import Layout from '../components/templates/Layout/Layout';

const Contact = ({ data }) => {
   console.log("your staff data is", data)

  return <Layout>
          <Staff staff={data.team}/>
  </Layout>;
};

export const contactData = graphql`
    query getContactData {
        contact: allMarkdownRemark (
            filter: { frontmatter: { templateKey: { eq: "contact" }}}) {
            edges {
                node {
                    html
                    frontmatter {
                        team {
                          name
                          position
                          photo
                        }
                    }
                }
            }
        }
`;