What is the best way to get related data?

[deemaagog]

Hi all . I use gatsby and netlify cms.

My schema:

collections:
  - name: "tags"
    label: "Tags"
    folder: "src/data/tags"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "text"}    
  - name: "posts"
    label: "Posts"
    folder: "src/data/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Id", name: "title", widget: "string"}
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "post"}
      - {label: "Publish Date", name: "publishDate", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - label: "Tags"
        name: "tags"
        widget: "list"
        fields:
          - label: "Tag"
            name: "tag"
            widget: "relation"
            collection: "tags"
            searchFields: [ "description"]
            valueField: "title"
            displayFields: ["description"]

here is my gatsby-node.js

exports.createPages = ({ boundActionCreators, graphql }) => {
 const { createPage } = boundActionCreators

return graphql(`
  {
     allMarkdownRemark(filter: { frontmatter:  { templateKey: { glob: "interview*" } } }) {
        edges {
         node {
           id
            fields {
              slug
            }
            frontmatter {
              templateKey
              description
              title
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      result.errors.forEach(e => console.error(e.toString()))
      return Promise.reject(result.errors)
    }

    const posts = result.data.allMarkdownRemark.edges

    posts.forEach(edge => {
      const id = edge.node.id
      createPage({
        path: `posts/${edge.node.frontmatter.title}`,
        component: path.resolve(
          `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
        ),
        context: {
          id,
        },
      })
    })    
  })
}

my graphql query in post template component:

export const query = graphql`
  query Interview($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        id: title
        title: name
        publishDate(formatString: "MMMM DD, YYYY")
        description
        tags {
          tag
        }
      }
    }
  }
`

How do i get all tag's fields (description etc) in Post component?

[pieh]

I'm not familiar with netlify CMS so I'll show 2 options here:

1. If you could remodel your data so tags fields would be array of tag titles (instead of array of objects that contains tag field), then you could use mapping:

mapping: {
  "MarkdownRemark.frontmatter.tags": "MarkdownRemark.frontmatter.title"
}

2. If you can't, then please check Is there a way to query/gain access to other markdown files/nodes when resolving a Graphql query? #3129 - there was similiar issue and have examples how to manually add link between nodes

[deemaagog]

thanks a lot , it worked
I used the approach from #3129