Question

我有一个Gatsby项目，它具有非常相似的GraphQL查询，可以查询两种不同类型的内容：常规页面和Wiki文章。

按页浏览

export const query = graphql`
  query($slug: String!) {
    page: contentfulPage(slug: {eq: $slug}) {
      title
      slug
      body {
        remark: childMarkdownRemark {
          excerpt
          html
          headings {
            value
            depth
          }
        }
      }
      updatedAt(formatString: "D. MMM YYYY")
      authors {
        name
        email
      }
    }
  }
`

slug的Wiki文章

export const query = graphql`
  query($slug: String!) {
    article: contentfulWikiArticle(slug: {eq: $slug}) {
      title
      slug
      body {
        remark: childMarkdownRemark {
          excerpt
          html
          headings {
            value
            depth
          }
        }
      }
      updatedAt(formatString: "D. MMM YYYY")
      authors {
        name
        email
      }
 +    section {
 +      title
 +      slug
 +    }
 +    subsection {
 +      title
 +      slug
 +    }
    }
  }
`

除了Wiki文章的其他部分和子部分外，查询是相同的。为了使事情保持干燥，我如何将页面字段移动到一个单独的片段中，即使其类型不同，该片段也可以散布到Wiki文章查询中？ GraphQL是否可以提供类似的内容：

fragment pageFields on [ContenfulPage, ContenfulWikiArticle] {
  ...
}

Answer 1

Gatsby recent release允许用户为自己的graphql模式设置类型，最终使这个问题成为可能。

如果用户可以控制模式，使用graphql总是可能的，但是由于最近的盖茨比更新，用户终于可以自己实现此功能。

设置

要建立一个简单的示例，我将在像这样的简单文件夹上使用gatsby-transformer-json

jsonFolder
  |--one.json { "type": "One", "name": "a", "food": "pizza" }
  `--two.json { "type": "Two", "name": "b", "game": "chess" }

并使用该选项声明我的类型名称：

{
  resolve: `gatsby-transformer-json`,
  options: { 
    typeName: ({ object }) => object.type,
  },
},

现在我有两种为我创建的类型。我可以在其中一个上创建一个片段，但不能同时创建两个片段：

export const name = graphql`
  fragment name on One {
    name
  }
`

export const pageQuery = graphql`
  query {
    one {
      ...name
    }
    two {
      ...name <-- ⚠️ throw type error
    }
  }
`

让我们解决这个问题。

设置类型

我将使用一个名为createTypes的新API为每个json注册一个新接口和2种类型。请注意，JsonNode包含One和Two的公共字段：

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    interface JsonNode {
      name: String
      type: String!
    }

    type One implements Node & JsonNode {
      name: String
      type: String!
      food: String
    }

    type Two implements Node & JsonNode {
      name: String
      type: String!
      game: String
    }
  `
  createTypes(typeDefs)
}

神奇之处就在于此行，其中One和Two实现JsonNode（自定义界面）和Node（盖茨比的界面）。

type One implements Node & JsonNode { ... }

现在，我可以编写一个实现JsonNode的片段，并且对两种类型都适用。

// blogPostTemplate.js
import React from "react"
import { graphql } from "gatsby"

export default ({ data }) => <div>{JSON.Stringify(data)}</div>

export const name = graphql`
  fragment name on JsonNode {
    name
    level
  }
`

export const pageQuery = graphql`
  query {
    one {
      ...name <-  works
    }
    two {
      ...name <-  works
    }
  }
`

这需要一些设置，但是如果您事先知道数据类型并且需要大量重用片段，则可能值得这么做。

如何在多种类型上使用GraphQL片段

1 个答案:

设置

设置类型