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

Question

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

页面由slug

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
 +    }
    }
  }
`

除了维基文章的附加部分和子部分，查询是相同的。为了保持DRY，我怎样才能将页面字段移动到一个单独的片段中，尽管它的类型不同，也可以传播到wiki文章查询中？ GraphQL可以提供如下内容：

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

Answer 1

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

如果用户可以控制架构，那么使用graphql总是可行的，但是由于最近的Gatsby更新，用户最终可以自己实现。

Setup

要设置一个简单的例子，我将在一个像这样的简单文件夹上使用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
    }
  }
`

我们来解决这个问题。

Setting up types

我将使用一个名为createTypes的新API来注册一个新的接口和每个json的两种类型。请注意，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（Gatsby的界面）。

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

---

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