How to map inline fragments?

[sparklesam]

Summary

Is it possible to map inline fragments?

Relevant information

I have read the part 4 of the new tutorial on GraphQL. It would be great if there are tutorial on mapping inline fragments. I have a working GraphQL query already but I failed to map it in my page. I use Prismic.io as backend, resulting in this query using gatsby-source-prismic.

query DojoPage {
  allPrismicData {
    edges {
      node {
        uid
        id
        data {
          headline {
            html
            text
          }
          description {
            html
            text
          }
          link {
            url
          }
          primary_tag {
            document {
              ... on PrismicTag {
                id
                data {
                  text
                }
              }
            } 
          }
          image {
            localFile {
              childImageSharp {
                sizes(maxWidth: 1280) {
                  src
                  srcSet
                  srcWebp
                  srcSetWebp
                  base64
                  aspectRatio
                  sizes
                }
              }
            }
          }
        }
      }
    }
  }
} 

My Gatsby code goes like this:

{data.allPrismicData.edges.map(post => (
        <div key={post.node.data.id}>
            <Img sizes={post.node.data.image.localFile.childImageSharp.sizes} />

            <a target="_blank" href={post.node.data.link.url}>
                <h1>{post.node.data.headline.text}</h1>
            </a>
            <p>{post.node.data.description.text}</p>
            <h1>{post.node.data.primary_tag.document.data.text}</h1>
        </div>
    ))}

The line with h1 are supposed to show text but I received an error. Trying to figure our all day, what is missing?

Here's the error message

Uncaught TypeError: Cannot read property 'text' of undefined
    at eval (VM402 index.js:110)
    at Array.map (<anonymous>)

Environment (if relevant)

System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.8.0 - /usr/local/bin/node npm: 6.2.0 - /usr/local/bin/npm Browsers: Chrome: 69.0.3497.100 Firefox: 63.0 Safari: 12.0 npmPackages: gatsby: ^2.0.0-beta.55 => 2.0.0-rc.25 gatsby-image: ^1.0.55 => 1.0.55 gatsby-link: ^1.6.46 => 1.6.46 gatsby-plugin-catch-links: ^2.0.2-beta.4 => 2.0.2-rc.1 gatsby-plugin-lodash: ^3.0.1-beta.3 => 3.0.1-rc.1 gatsby-plugin-manifest: ^2.0.2-beta.3 => 2.0.2-rc.1 gatsby-plugin-netlify: ^2.0.0-beta.5 => 2.0.0-rc.6 gatsby-plugin-offline: ^2.0.0-beta.4 => 2.0.0-rc.8 gatsby-plugin-react-helmet: ^3.0.0-beta.4 => 3.0.0-rc.1 gatsby-plugin-sharp: ^1.6.48 => 1.6.48 gatsby-plugin-sitemap: ^2.0.0-beta.3 => 2.0.0-rc.2 gatsby-plugin-styled-components: ^3.0.0-beta.3 => 3.0.0-rc.5 gatsby-plugin-typography: ^2.2.0-beta.3 => 2.2.0-rc.3 gatsby-remark-autolink-headers: ^2.0.0-beta.4 => 2.0.0-rc.2 gatsby-remark-external-links: 0.0.4 => 0.0.4 gatsby-remark-images: ^1.5.67 => 1.5.67 gatsby-remark-prismjs: ^3.0.0-beta.4 => 3.0.0-rc.2 gatsby-source-airtable: 0.0.6 => 0.0.6 gatsby-source-filesystem: ^2.0.1-beta.9 => 2.0.1-rc.6 gatsby-source-prismic: ^1.2.0 => 1.2.0 gatsby-transformer-remark: ^2.1.1-beta.4 => 2.1.1-rc.5 gatsby-transformer-sharp: ^1.6.27 => 1.6.27 npmGlobalPackages: gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[kakadiadarpan]

@sparklesam can you once check the data that you are trying to access? By reading the error, I assume that the data that you are trying to access is not available there.

post.node.data.primary_tag.document.data.text

[sparklesam]

@kakadiadarpan actually I can view it in log but just failed to map it. Uploaded screenshot for reference

https://imgur.com/a/uMs2Xky

[kakadiadarpan]

@sparklesam As per the screenshot, document is an array:

You need to access it the following way:

<h1>{post.node.data.primary_tag.document[0].data.text}</h1>

[sparklesam]

It works! Thanks a lot for your help!

[psnaik]

My laptop is windows 10,how to add this project

[kakadiadarpan]

@psnaik if you are talking about how to start with Gatsby, please head over to Get started section.