Question

我正在尝试为gatsby graphql查询定义正确的架构，以便它可以返回null（以使内容可选）。据我了解，我需要在gatsby-node.js文件中预定义架构，以便gatsby不必通过数据来推断类型。但是，由于我们使用gatsby片段查询数据，因此我不确定模式定义需要是什么。这是查询的一部分：

... on ContentfulWorkPage {
  comingSoon {
   id
   title
   image {
     fluid(quality: 92, maxWidth: 1280) {
       ...GatsbyContentfulFluid_withWebp_noBase64
     }
   }
   comingSoonText
  }
}

问题是我不确定如何定义GatsbyContentfulFluid_withWebp_noBase64

我正在尝试什么：

const types = `
    type ContentfulWorkPage implements Node {
      comingSoon: ComingSoon
    }

    type ComingSoon {
      id: String
      title: String
      comingSoonText: String
      image: Image
    }

    type Image {
      fluid: Fluid
    }

   type Fluid {
    quality: Int
    maxWidth: Int
    title: String
   }
  `
  createTypes(types)

即使我认为自己走在正确的轨道上，我仍然遇到以下错误：

There was an error in your GraphQL query:

Unknown argument "quality" on field "fluid" of type "Image".

GraphQL request:70:21
69 |             image {
70 |               fluid(quality: 92, maxWidth: 1280) {
   |                     ^
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64

File: src/templates/mainPages/work.js:105:21


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown argument "maxWidth" on field "fluid" of type "Image".

GraphQL request:70:34
69 |             image {
70 |               fluid(quality: 92, maxWidth: 1280) {
   |                                  ^
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64

File: src/templates/mainPages/work.js:105:34


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Fragment "GatsbyContentfulFluid_withWebp_noBase64" cannot be spread here as objects of type "Fluid" can never be of type "ContentfulFluid".

GraphQL request:71:17
70 |               fluid(quality: 92, maxWidth: 1280) {
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64
   |                 ^
72 |               }

Answer 1

因此，在深入研究gatsby文档（https://www.gatsbyjs.com/docs/actions/#printTypeDefinitions）之后，我设法解决了这个问题。我发现在gatsby-node.js文件中，您可以使用printTypeDefinitions函数来打印数据类型，然后可以使用它来预定义可选属性：

exports.createSchemaCustomization= ({ actions }) => {
  actions.printTypeDefinitions({path: './typeDefs.txt'})
}

这将在描述所有推断类型的根文件夹中创建一个typeDefs.txt文件。因此，如果您正在寻找像我一样的更复杂的类型def，以便可以在有条件的情况下将它们设置为可选，则可以：

向内容中的可选字段（或您正在使用的任何后端/服务器）中添加一些数据
使用该函数从数据中获取类型定义
从typeDefs文件中复制所需的任何部分，然后
在createSchemaCustomization的createTypes函数中使用它

示例（{comingSoon定义是从typeDevs文件复制的）：

exports.createSchemaCustomization = ({ actions }) => {
  const contentfulSomePage = `
      type ContentfulSomePage implements Node {
        comingSoon: [ContentfulCaseComingSoon] @link(by: "id", from: "comingSoon___NODE")
      }

      type ContentfulCaseComingSoon implements Node @derivedTypes @dontInfer {
        title: String
        comingSoonText: String
        image: ContentfulAsset @link(by: "id", from: "image___NODE")
      }
  `
  actions.createTypes(contentfulWorkPage)
}

额外提示：如果只需要指定一个属性为可选属性，则可以推断出其余属性。删除@dontInfer批注，仅复制可为空的属性，而不是从文件中复制整个类型。

如何结合gatsby片段创建gatsby模式

1 个答案: