CODEWITHSUNDEEP
reactjsgraphqlyamlgatsbygraphql-js
SPMSE
SPMSE

Reputation: 618

How to create list of strings in markdown frontmatter?

I am trying to retrieve data in form of a list from markdown frontmatter using gatsbyjs and graphql. Given the List in the markdown file, the goal would be to fetch the list items into my react component for further use.

This is for my work where I want to create a website using GatsbyJS and React (that's why I can't share real code). So far I've tried to simply fetch the data via GraphQL from frontmatter but either the field is undefined or just contains null values.

I have a frontmatter like this:

---
name: "someName"
expertise: "someExpertise"
...
technologies: 
- tech1
- tech2
- tech3
---

in my js code I try to fetch data using graphql like so: 

query($slug: String!) {
    profile: markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "DD MMMM, YYYY")
        author
        expertise
        name
        dev_type
        degree 
        technologies
      }
    }
}

I expected the output to match a form like this:

technologies = ["tech1", "tech2", "tech3"]

but I get the following error(s) when trying to compile and run the site in development environment:

Case 1.

Errors:
  Int cannot represent non-integer value: "tech1"

I don't know how to fix this problem. In my understanding this should work. Already tried to create new NodeField called technologies in gatsby-node.js but this did not work, too.

I also thought about another thing according this frontmatter, in my understanding frontmatter is a YAML, or rather the desired list of technologies in the markdown file is a YAML list, isn't it?
In this case I should adjust/extend the gatsby-transformer-yaml plugin in gatsby-config.js but I have no clue how to achieve this one the right/correct way.

Case 2.

Unfortunately I cannot reproduce my query anymore but I found a way where I didn't get the type error, but then technologies only contained null values (having same frontmatter content).

technologies = [ null, null, null, ...]

Upvotes: 2

Views: 2223

Answers (1)

SPMSE
SPMSE

Reputation: 618

Found out technologies: [ tech1, tech2, tech3 ] is the solution for this problem. Actual Problem with this was that there was inconsistent data provided in my markdown files.

Upvotes: 1

Related Questions