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>
  )
}

但是我不知道如何在不使用文档中使用的ApolloClient的情况下在切片字段（即client_name）上进行映射？

我的第一次幼稚尝试失败，并返回TypeError: Cannot read property 'data' of undefined：

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

Answer 1

首先，我强烈建议将您使用的插件更改为： gatsby-source-prismic-graphql 。但是，如果您现在想坚持使用这个，请尝试以下操作：

//First add 'slice_type' to your slice query
...

... on PrismicHomeBodyProjects {
        slice_type
        __typename
        primary {
          client_name {
            text
          }
        }
      }
 ...


// Sort and display the different slice options

const PostSlices = ({ slices }) => {

  return slices.map((slice, index) => {

    const res = (() => {

      switch (slice.slice_type) {

        case "projects":
          return (
            <div className="slice" key={index}>
              {slice content...}
            </div>
          )
        default:
          return
      }
    })()

    return res
  })
}

  // Define the Post content returned from Prismic
  export default (props) => {

  const doc = props.data.prismicHome.edges.slice(0, 1).pop();
  const slices = doc.node.data.body;

  return (
    <div>
      <PostSlices slices={slices} />
    </div>
  )
}

Answer 2

要提供对@master的评论的答案，我将我的代码放在这里：

class ComponentName extends Component {

render() {
  const slices = this.props.data.QUERYNAME.body.map(slice => {
    switch (slice.slice_type) {
      case "slice_name":
        return (
          <Component
        prop={slice.primary.FIELDNAME.TYPE}
          />
        )
      default:
        return null // or whatever you want to return in case it breaks
    }
  })
}

return (
 {slices}
)

}

在Gatsby App中映射原始切片数据

2 个答案: