Mapping multiple yaml files to frontmatter in Gatsby

[ljpernic]

The problem:

I am having trouble mapping a second .yaml file to a second markdown frontmatter field in Gatsby. The project is for a magazine, with the first yaml file storing details about each author and the second file storing details about each issue.

The author.yaml file worked like it was supposed to, and I can query it across every template and page, but the issue.yaml file only works in two places: templates where I specifically passed its data as page context in gatsby-node, and (inexplicably) for markdown files with the frontmatter "featured" field === true. For mapped arrays in which "featured" is not present, or when it's false, every query that should pull data from the issue.yaml gives "TypeError: Cannot read property 'id' of null."

My suspicion is that it's because the issue field on my markdown files isn't the first field (which is author, and already mapped to the author.yaml file). As far as I can tell, I've implemented both yaml files exactly the same.

---

The starter I used was the gatsby serif theme.
My repository is at https://github.com/ljpernic/HQ3.1/tree/HQhelp.

I'm sure there is a better way to do all of this, but I don't have a background in coding at all (it's just for fun), so the solution is probably something easy I've overlooked. I also posted this question on stack overflow. The code I posted there has been updated some, but nothing has fundamentally changed.

Sorry if this is the wrong place to post this, and thanks to anyone who might have some input.

[LekoArts]

Thank you for opening this!

I cloned your repository and it's working (as intended):

You'll get results for issue on the posts that have a valid issue ID. Since you only defined Issue One Summer 2020 and Isuse Two Fall 2020 you'll get null for all other posts that e.g. have Issue Four, Spring 2021 in their frontmatter. That Issue Four doesn't exist in your issue.yaml file and hence you can't get any data back. That's also why you get the error TypeError: Cannot read property 'id' of null

You really have two (easy) options to solve this:

1. Define all issue IDs in issue.yaml so that you get at least the id back
2. Define an alternative issueTitle in your frontmatter of the posts and check whether issue returns null. If yes, hide your components and use issueTitle instead

The mapping you applied in gatsby-config.js is correct. It's not about the order of things but the mapping of issue => id field.

You can't really apply this logic of getting more details to only a couple of posts, with the mapping you'll need to define everything or check for its existence. GraphQL expects you to do that.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[ljpernic]

This was an enormous help. Thank you for taking the time to look at this. The solution was easy, and I'm embarrassed to say how long I spent trying to fix it myself.

Aber danke!