[1.0] Converting nested frontmatter to GraphQL

[elliotschultz]

Hi, I’ve been building a site based on the 1.0 branch of gatsby-starter-blog using v.1.0.0-alpha12. So far it’s been going great and I’m very thankful for all the hard work that’s been put into Gatsby.

I’m having some issues with the way nested frontmatter is being converted to GraphQL fields.

When including a single image, Gatsby successfully converts it into a File node (this is the desired behaviour).

# YAML
---
image: PicA.jpg  
---

# GraphiQL Output
"image": {
  "id": …
  "size": …
  "children": […]
  …etc…
}

However, when declaring a list of images, Gatsby doesn’t convert them to File nodes, and instead returns an array of strings, despite being correct YAML syntax.

# YAML
---
images:
  - PicB.jpg
  - PicC.jpg
  - PicD.jpg
---

# GraphiQL Output
"images": ["PicB.jpg", "PicC.jpg", "PicD.jpg"]

Is this something that hasn’t been implemented yet, or should I be approaching this in a different way? I see this as a really useful way of organising groups of images for page features like galleries.

While I was troubleshooting, I also came across some other issues with nesting using standard YAML:

# YAML
---
person:
  first_name: Dorothy
  family_name: Gale  
---

# Error 
UNHANDLED REJECTION Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "frontmatter___person.first_name" does not.  

# YAML  
---
people:  
  - first_name: Thomas
    family_name: Smith
  - first_name: Sally
     family_name: Cruise
---  

# Error  
UNHANDLED REJECTION Error: Can only create List of a GraphQLType but got: undefined.

Sorry if these are two seperate issues, but I grouped them because they seems to both centre around the way in which nested YAML is converted to GraphQL.

I’d love to see some or all of the above possibilities work in Gatsby 1.0 because of how flexible it’d make Markdown files as a data source.

[KyleAMathews]

Hey! Thanks for kicking the tires on Gatsby v1! So a bit of backstory of this. Much of the data => graphql code was put together in a very big hurry while working on some client sites over December/January. I'm now working on a big refactor of Gatsby's internals that'll clean things up and make things more testable. These issues might be fixed as part of that and if not, would love your help getting things rock solid e.g. adding some tests to cover these issues.

[KyleAMathews]

Also related #752

[elliotschultz]

Hey Kyle, thanks for the update. Good to hear it's something already on your radar. I don't have much experience writing tests but I'd be happy to help out where I can.

[dustinhorton]

Any way to achieve this yet? I'm on 1.9.45 & seem to still just get an array of strings.

[KyleAMathews]

@dustinhorton upgrade — you're like 30 versions behind :-D

[dustinhorton]

@KyleAMathews Sorry about that. Still having the issue—let me know if I should create a new issue.

Now on 1.9.80.

markdown list:

images:
  - ./images/01.jpg
  - ./images/02.jpg
  - ./images/03.jpg

query:

{
  markdownRemark {
    frontmatter {
      images
    }
  }
}

result:

{
  "data": {
    "markdownRemark": {
      "frontmatter": {
        "images": [
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg"
        ]
      }
    }
  }
}

and if trying to treat as files:

{
  markdownRemark {
    frontmatter {
      images {
        childImageSharp {
          responsiveSizes {
            src
          }
        }
      }
    }
  }
}

result:

{
  "errors": [
    {
      "message": "Field \"images\" must not have a selection since type \"[String]\" has no subfields.",
      "locations": [
        {
          "line": 4,
          "column": 14
        }
      ]
    }
  ]
}