GraphQL内联片段检查是否存在，然后在.map中输出 [英] GraphQL Inline fragments check if exist and then output in a .map

问题描述

我在gatsbyJS中有一个react组件，该组件通过graphQL查询进行映射，到目前为止，它仍然有效，但是我实际上在graphQL查询中引入了一个内联片段，其中两个实际上要插入，我想检查片段是否存在，然后输出代码；否则输出实际内容后，我所有的地图都输出空div.为了简洁起见，我没有包括整个查询或所有代码.

I have a react component in gatsbyJS that is mapping through a graphQL query, so far it works however I have introduced a inline fragment in the graphQL query two of them actually and I want to check if fragment exists then output the code otherwise all my maps are outputting empty div's after real content is outputted. I didn't include the whole query or all the code for brevity.

希望有人可以提供帮助，谢谢！

Hopefully someone can help, Thanks!

这是我的地图和jsx

Here is my map and jsx

{data.datoCmsProject.projectBlock.map(projectEntry => { 

        return (  

          <>

          // I want to check here if    DatoCmsProjectBlockGrid fragment exists then render below       

          <BlockGridWrapper>
            <BlockGrid key={projectEntry.id}>

                <div>{projectEntry.titleOfGridSection}</div>
            </BlockGrid>
          </BlockGridWrapper>

        // end check for DatoCmsProjectBlockGrid

        // I want to check here if DatoCmsSingleProjectBlockContent fragment exists, then render below

         <NewBlock key={projectEntry.id}> 

          <img key={imageEntry.originalId} src={imageEntry.url}/>

         </NewBlock>

        //end check for DatoCmsSingleProjectBlockContent

...

这是我的查询

projectBlock{
        ... on DatoCmsSingleProjectBlockContent {
            id
            titleOfSection
            descriptionOfImage
            descriptionToggle
            wideView
            imageTextSide
            imageAssetHideShow
            imageAsset{
              url
              originalId
            }
          }
        ... on DatoCmsProjectBlockGrid {
          id
          titleOfGridSection
        }
      }   

推荐答案

您可以利用__typename字段确定返回对象的类型，然后呈现适当的组件.

You can utilize the __typename field to determine the type of the returned object and then render the appropriate component.

projectBlock {
  __typename
  ... on DatoCmsSingleProjectBlockContent {
    id
    # other fields
  }
  ... on DatoCmsProjectBlockGrid {
    id
    # other fields
  }
}   

在这种情况下，__typename将解析为DatoCmsSingleProjectBlockContent，DatoCmsProjectBlockGrid或projectBlock字段的任何其他可能的类型.如果您不想渲染其他可能的类型，则应该先过滤数组，或者使用reduce而不是map来达到相同的效果:

In this case, __typename will resolve to DatoCmsSingleProjectBlockContent, DatoCmsProjectBlockGrid or whatever other possible types for the projectBlock field. If there are other possible types that you don't want to render, you should either filter the array first or utilize reduce instead of map to the same effect:

data.datoCmsProject.projectBlock
  .filter(({ __typename }) => __typename === 'DatoCmsSingleProjectBlockContent' || __typename === 'DatoCmsProjectBlockGrid')
  .map(projectEntry => {
  if (projectEntry.__typename === 'DatoCmsSingleProjectBlockContent') {
    return <BlockGridWrapper/>
  }
  return <NewBlock/>
})

这篇关于GraphQL内联片段检查是否存在，然后在.map中输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！