Add custom Netlify CMS widget to Gatsby starter Yellowcake

Question

I am working with the Gatsby starter 'YellowCake' which is has Netlify CMS as part of it.

I am trying to add another custom widget to the starters Contact Page. I would like to add "Fax" under "Phone". I have added it to the config.yml file and added a fax number to my contact.md file and I have added it to my ContactPage.js template. But it is not showing up on the page.

I am not sure what I am missing or doing wrong. Would love any help.

Config.yml

collections: # A list of collections the CMS should be able to edit
  - name: 'pages'
    label: 'Page'
    delete: false # Prevent users from deleting documents in this collection
    editor:
      preview: true
    files:
      - file: 'content/pages/contact.md'
        label: 'Contact Page'
        name: 'contact-page'
        fields:
          - {
              label: Template,
              name: template,
              widget: hidden,
              default: ContactPage,
            }
          - { label: Slug, name: slug, widget: hidden, default: 'contact' }
          - { label: Title, name: title, widget: string }
          - {
              label: Featured Image,
              name: featuredImage,
              widget: image,
              options:
                { media_library: { config: { imageShrink: 2600x2600 } } },
            }
          - { label: Subtitle, name: subtitle, widget: markdown }
          - { label: Body, name: body, widget: markdown }
          - { label: Address, name: address, widget: text }
          - { label: Phone, name: phone, widget: string }
          - { label: Fax, name: fax, widget: string }
          - { label: Email Address, name: email, widget: string }

contact.md

template: ContactPage
slug: contact
title: Contact Page
featuredImage: https://ucarecdn.com/e22a858a-b420-47af-99f6-ed54b6860333/
subtitle: This is the contact page subtitle.
address: '404 James St, Burleigh Heads QLD 4220'
phone: 0987 123 456
fax: 333-333-3333
email: example@example.com

ContactPage.js (template)

import React from 'react'
import { MapPin, Smartphone, Mail, Printer } from 'react-feather'
import { graphql } from 'gatsby'

import PageHeader from '../components/PageHeader'
import FormSimpleAjax from '../components/FormSimpleAjax'
import Content from '../components/Content'
import GoogleMap from '../components/GoogleMap'
import Layout from '../components/Layout'
import './ContactPage.css'

// Export Template for use in CMS preview
export const ContactPageTemplate = ({
  body,
  title,
  subtitle,
  featuredImage,
  address,
  phone,
  fax,
  email,
  locations
}) => (
  <main className="Contact">
    <PageHeader
      title={title}
      subtitle={subtitle}
      backgroundImage={featuredImage}
    />
    <section className="section Contact--Section1">
      <div className="container Contact--Section1--Container">
        <div>
          <Content source={body} />
          <div className="Contact--Details">
            {address && (
              <a
                className="Contact--Details--Item"
                href={`https://www.google.com/maps/search/${encodeURI(
                  address
                )}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <MapPin /> {address}
              </a>
            )}
            {phone && (
              <a className="Contact--Details--Item" href={`tel:${phone}`}>
                <Smartphone /> {phone}
              </a>
            )}
            {fax && (
              <a className="Contact--Details--Item" href={`fax:${fax}`}>
                <Printer /> {fax}
              </a>
            )}
            {email && (
              <a className="Contact--Details--Item" href={`mailto:${email}`}>
                <Mail /> {email}
              </a>
            )}
          </div>
        </div>

        <div>
          <FormSimpleAjax name="Simple Form Ajax" />
        </div>
      </div>
    </section>

    <GoogleMap locations={locations} />
  </main>
)

const ContactPage = ({ data: { page } }) => (
  <Layout
    meta={page.frontmatter.meta || false}
    title={page.frontmatter.title || false}
  >
    <ContactPageTemplate {...page.frontmatter} body={page.html} />
  </Layout>
)

export default ContactPage

export const pageQuery = graphql`
  query ContactPage($id: String!) {
    page: markdownRemark(id: { eq: $id }) {
      ...Meta
      html
      frontmatter {
        title
        template
        subtitle
        featuredImage
        address
        phone
        email
        locations {
          mapLink
          lat
          lng
        }
      }
    }
  }
`

Ferran Buireu · Accepted Answer · 2021-06-02T16:46:15.097

1

You are not fetching the fax field in your GraphQL query:

export const pageQuery = graphql`
  query ContactPage($id: String!) {
    page: markdownRemark(id: { eq: $id }) {
      ...Meta
      html
      frontmatter {
        title
        template
        subtitle
        featuredImage
        address
        phone
        email
        fax # <-- here
        locations {
          mapLink
          lat
          lng
        }
      }
    }
  }
`

The rest of the code should work alone because of the destructure and the rendering of fax under phone in the JSX.

"Cannot query field 'fax' on type 'MarkdownRemarkFrontmatter'"

Among running gatsby clean and testing your query in the localhost:8000/___graphql playground. It's strange that you have a hidden field called slug (with contact value) but you are not using it. In your case I would use a page query such as:

export const contactData = graphql`
    query getContactData {
        page: allMarkdownRemark(
            filter: { frontmatter: { slug: { eq: "contact" }}}) {
            edges {
                node {
                 ...Meta
                 html
                 frontmatter {
                   title
                   template
                   subtitle
                   featuredImage
                   address
                   phone
                   fax
                   email
                   locations {
                      mapLink
                      lat
                      lng
                     }
                  }
               }
            }
        }
    }
`;

Then something like:

const ContactPage = ({ data: { page: {
      edges: [{
        node: {
          html,
          frontmatter
        }
      }]
    }}}) => (
  <Layout
    meta={frontmatter.meta || false}
    title={frontmatter.title || false}
  >
    <ContactPageTemplate {...frontmatter} body={html} />
  </Layout>
)

edited Jun 02 '21 at 16:46

answered Jun 02 '21 at 04:48

Ferran Buireu

28,630
6
39
67

I thought of this except that when I add fax there or anywhere in the query it breaks the page and I get a failed to compile message and I get "Cannot query field 'fax' on type 'MarkdownRemarkFrontmatter'" – krichey15 Jun 02 '21 at 16:28
Run `gatsby clean` – Ferran Buireu Jun 02 '21 at 16:34
That is the other issue I wasn't sure of but is now confirmed. Running 'gatsby clean' deletes the config.yml file and the my addition of the fax widget disappears. – krichey15 Jun 02 '21 at 19:41
That's not possible at all. `gatsby clean` removes the public and the cache folders. The `config.yml`is located (or it should be) in the static one. Can you share a repo to see what's going on? – Ferran Buireu Jun 02 '21 at 20:13
In this gatsby starter code they located the config.yml file in the Public/admin Which you will see in their README file The Below Link is to the starter code. The only thing different from mine is that I am trying to add that fax widget. https://github.com/thriveweb/yellowcake – krichey15 Jun 02 '21 at 20:23
1

Ok got it. The `README.md` is wrong. The file that you need to edit is https://www.github.com/thriveweb/yellowcake/tree/master/static%2Fadmin%2Fconfig.yml here, as soon as you compile the code (develop or build) the public folder is generated (like the rest of the code and pages does). The error that is appearing is because your `fax`field doesn't exist in the original source (`static/admin/config.yml`) so the node can't be generated. Please edit and add the `fax` field in the `config.yml` I provided (`static/admin/config.yml`) and try it again with the first query I posted – Ferran Buireu Jun 02 '21 at 20:31
Victory! Thank You – krichey15 Jun 02 '21 at 20:51

Add custom Netlify CMS widget to Gatsby starter Yellowcake

1 Answers1