I'm using Gatsby with gatsby-plugin-netlify-cms to add Netlify CMS to the website, netlify-cms-backend-fs to allow Netlify CMS to work in development mode using the file system instead of a remote repo, and gatsby-transformer-yaml to transform the yaml file so it can be accessed via GraphQL queries.
Here's the relevant code:
// src/cms/cms.js
import CMS from "netlify-cms-app";
/** Netlify CMS config */
const config = {
load_config_file: false,
media_folder: "static/img",
public_folder: "img",
collections: [
{
label: "Business Details",
name: "business",
files: [
{
label: "Contact Information",
name: "contactInfo",
file: "data/business.yaml",
fields: [
{ label: "Title", name: "title" },
{ label: "Business Name", name: "name" },
{ label: "Phone Number", name: "phone" },
{ label: "Email", name: "email" }
]
}
]
}
]
};
/** Change to file system backend for development */
if (process.env.NODE_ENV === "development") {
const FileSystemBackend = require("netlify-cms-backend-fs");
config.backend = {
name: "file-system",
api_root: "/api"
};
config.display_url = "http://localhost:8000";
CMS.registerBackend("file-system", FileSystemBackend);
} else {
config.backend = {
backend: {
name: "test-repo" // To be changed to repo when ready for deployment
}
};
}
CMS.init({ config });
I'm able to access the Netlify CMS dashboard, create a new entry, and publish it. However when it's published, the content of data/business.yaml is:
title: Business Details
name: My Business Name
phone: 555-5555
email: me@example.com
This should instead be formatted as (note the hyphen and indentation):
- title: Business Details
name: My Business Name
phone: 555-5555
email: me@example.com
The result of this is that I'm unable to query this data using:
query MyQuery {
allBusinessYaml {
edges {
node {
email
name
phone
}
}
}
}
as allBusinessYaml doesn't exist.
This error is resolved if I manually change the data/business.yaml file to the correct format with hyphens and indentation.
I've tried setting the widget as object or list, and have tried explicitly setting format and extension to yaml however that doesn't solve the issue either. e.g.
const config = {
load_config_file: false,
media_folder: "static/img",
public_folder: "img",
collections: [
{
label: "Business Details",
name: "business",
files: [
{
label: "Contact Information",
name: "contactInfo",
file: "data/business.yaml",
format: "yaml",
extension: "yaml",
widget: "list", // NOTE: I've also tried using "object" here
fields: [
{ label: "Title", name: "title" },
{ label: "Business Name", name: "name" },
{ label: "Phone Number", name: "phone" },
{ label: "Email", name: "email" }
]
}
]
}
]
};
What am I doing wrong here?
