how to fetch only specific data from graphql query

Question

I am trying to fetch some data from my CMS but I am facinf an error when fetching a specific data. It's an array that I want to fetch with the graphql query :

{
allPrismicLastPosts {
    nodes {
      data {
        links {
          blog {
            document {
              ... on PrismicBlog {
                data {
                  post_img {
                    url
                  }
                  post_title {
                    text
                  }
                  post_paragraph {
                    text
                  }
                  tag
                }
              }
              ... on PrismicCulture {
                data {
                  tag
                  culture_image {
                    url
                  }
                  culture_paragraph {
                    text
                  }
                  culture_title {
                    text
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

This is it JSON Format :

            "links": [
              {
                "blog": {
                  "document": {
                    "data": {
                      "post_img": {
                        "url": "https://images.prismic.io/zinee/67254822-5c44-42fe-8d5b-7f500141c3a7_Mask%20Group%20(1).png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max"
                      },
                      "post_title": {
                        "text": "Make more time for the work that matters most using our services"
                      },
                      "post_paragraph": {
                        "text": "A lot of different components that will help you create the perfect look"
                      },
                      "tag": "Fiction"
                    }
                  }
                }
              },
              {
                "blog": {
                  "document": {
                    "data": {
                      "post_img": {
                        "url": "https://images.prismic.io/zinee/4898e2a8-ebfb-41d4-b843-550e9d9c84da_Mask%20Group.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max"
                      },
                      "post_title": {
                        "text": "Make myspace your best designed space"
                      },
                      "post_paragraph": {
                        "text": "A lot of different components that will help you create the perfect look"
                      },
                      "tag": "Fiction"
                    }
                  }
                }
              },
              {
                "blog": {
                  "document": {
                    "data": {
                      "post_img": {
                        "url": "https://images.prismic.io/zinee/67254822-5c44-42fe-8d5b-7f500141c3a7_Mask%20Group%20(1).png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max"
                      },
                      "post_title": {
                        "text": "Make more time for the work that matters most using our services"
                      },
                      "post_paragraph": {
                        "text": "A lot of different components that will help you create the perfect look"
                      },
                      "tag": "Fiction"
                    }
                  }
                }
              },
              {
                "blog": {
                  "document": {
                    "data": {
                      "post_img": {
                        "url": "https://images.prismic.io/zinee/4898e2a8-ebfb-41d4-b843-550e9d9c84da_Mask%20Group.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max"
                      },
                      "post_title": {
                        "text": "Make myspace your best designed space"
                      },
                      "post_paragraph": {
                        "text": "A lot of different components that will help you create the perfect look"
                      },
                      "tag": "Fiction"
                    }
                  }
                }
              }
            ]

I get a Cannot read properties of undefined (reading 'text') error when I fetch it like this :

{post.data.links.map((test)=>
      (
        <>
          <h1>{test.blog.document.data.post_paragraph.text}</h1>
        </>
      ))}

But when I try to fetch like this it works:

{post.data.links.map((test)=>
      (
        <>
          <h1>{test.blog.document.data.tag}</h1>
        </>
      ))}

Any idea how to fix this please ? the tag field works and get fetched perfectly but with data like : post_paragraph.text or title.text doesn't work !!

PrismicBlog has post_paragraph, but PrismicCulture has culture_paragraph that's why it is undefined. — Krzysztof Krzeszewski, Jun 11 '22 at 13:29
yes indeed , but I mapped these link like this : `{post.data.links.map((test)` so it should show `post_paragraph` for PrismicBlog and PrismicCulture accordingly right ? — Jaacoubi, Jun 11 '22 at 13:39

score 0 · Accepted Answer · answered Jun 11 '22 at 14:23

Your GraphQL fragment PrismicBlog has post_paragraph which has text (so your loop works) however, when it's mapping PrismicCulture fragment, where the structure differs, your map breaks because there's no such property, in PrismicCulture it's called culture_paragraph with a text property in it.

If you are trying to map both fragments in one loop I'd suggest using the same data structure in the CMS, changing culture_paragraph for post_paragraph so your loop will be valid.

If that's not an option, you can use GraphQL alias to map your culture_paragraph into post_paragraph such as:

{
allPrismicLastPosts {
    nodes {
      data {
        links {
          blog {
            document {
              ... on PrismicBlog {
                data {
                  post_img {
                    url
                  }
                  post_title {
                    text
                  }
                  post_paragraph {
                    text
                  }
                  tag
                }
              }
              ... on PrismicCulture {
                data {
                  tag
                  culture_image {
                    url
                  }
                  post_paragraph: culture_paragraph {
                    text
                  }
                  culture_title {
                    text
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Note the post_paragraph: culture_paragraph alias.

Another alternative is using the optional chaining to only print the text if the structure matches the loop:

{post.data.links.map((test)=>
      (
        <>
          <h1>{test.blog.document?.data?.post_paragraph?.text}</h1>
        </>
      ))}

I need 15 reputation to upvote this ! I will remember to do it later ! — Jaacoubi, Jun 11 '22 at 14:53

how to fetch only specific data from graphql query

1 Answers1

Linked