reactjs - Gatsby アプリでのプリズミック スライス データのマッピング

Question

Prismic に「シングル タイプ」ページがあり、 や などの通常のコンテンツ フィールドがいくつかありuidますheadline。また、繰り返し不可能なフィールドを持つスライス コンテンツもあります。

これは私のクエリがどのように見えるかです:

export const homeQuery = graphql`
  query Home {
    prismicHome {
      data {
        page_title {
          text
        }
        introline {
          text
        }
        hero_headline {
          text
        }
        body {
          ... on PrismicHomeBodyProjects {
            __typename
            primary {
              client_name {
                text
              }
            }
          }
        }
      }
    }
  }
`

そして、私のページでは、次のように返しています。

const IndexPage = ({ data: { prismicHome } }) => {

  return(
    <LayoutHome>
      <Hero
        introline={prismicHome.data.introline.text}
        headline={prismicHome.data.hero_headline.text}
      />
    </LayoutHome>
  )
}

client_nameしかし、私が見つけられないのは、ドキュメントで使用している ApolloClient を使用せずにスライス フィールド (つまり) をマップする方法です。

私の最初の素朴な試みは失敗し、次を返しますTypeError: Cannot read property 'data' of undefined：

const projects = homeQuery.prismicHome.data.body.primary.map(({ client_name }) =>
  <div>
    <h2>{client_name}</h2>
  </div>
)