在 Gatsby、GraphQL 和 Sanity 中使用 _raw 和普通数据进行推理

Question

我刚刚开始将Gatsby与Sanity Headless CMS 一起使用。

在大多数情况下，它非常简单；但是了解通过 GraphQL 查询数据的最佳实践仍然困扰着我。我目前的做法就是在 GraphQL 游乐场中疯狂地点击我的 CMS 结构并找到我想要的。这有效，但这种方法缺乏统一性让我感到不安。

例如，如果我想要一个位于 CMS 某处的英雄图像，我需要执行以下操作：

query SomePageQuery($id: String) {
  sanitySomePage(id: { eq: $id }) {
    id
    heroImage {
      asset {
        fluid(maxWidth: 1500) {
          ...GatsbySanityImageFluid
        }
      }
    }
  }
}

但是如果我想要一些PortableText块，那么我需要查询_raw任何类型的相应字段。所以，如果我的类型是introText，Gatsby 还提供了一个_rawIntroText. 我只能从这个_raw版本的数据中获得完整的 PortableText 。像这样：

query SomePageQuery($id: String) {
  sanitySomePage(id: { eq: $id }) {
    id
    _rawIntroText
  }
}

似乎，对于某些数据，您可以使用[Type]，有时您必须使用_raw[Type].

关于为什么会这样，没有大量的文档。而且我不确定这是通过 Sanity 还是 Gatsby 强制执行的。

我想我的问题是，为什么_raw[Anything]Gatsby 和/或 Sanity 世界中存在，以及人们如何决定使用哪个（除了 GraphQL 操场和运行时的试错）？

Answer 1

这来自 Sanity 构建和维护的 gatsby-source-sanity 插件。希望来自 Sanity 的人可以提供更多上下文，但实际上这些_raw[FieldName]条目会返回该字段的原始 JSON 数据。不带前缀的字段（例如fieldName）可能不是您想要的——它只包含有关数据的元数据位。

我倾向于提取_raw[FieldName]数据，然后将其直接传递到@sanity/block-content-to-react组件中，如下所示：

import React from "react"
import { graphql } from "gatsby"
import SanityBlockContent from "@sanity/block-content-to-react"

export default ({ data: { page } }) => (
  <SanityBlockContent
    blocks={page.textContent}
    projectId={process.env.GATSBY_SANITY_PROJECT_ID}
    dataset={process.env.GATSBY_SANITY_DATASET}
  />
)

export const query = graphql`
  query SomePageQuery($id: String) {
    page: sanitySomePage(id: { eq: $id }) {
      textContent: _rawTextContent
    }
  }
`

请注意，我正在使用 GraphQL 别名来继续引用textContent我的组件中的字段，而不是将组件耦合到此 GraphQL 架构的细节。

您不需要将 Gatsby Image 用于 Sanity 图像，因为它们无论如何都有自己的图像转换管道。相反，您可以只获取asset { _id }然后@sanity/client像这样使用来生成图像 url：

import React from "react"
import { graphql } from "gatsby"
import SanityBlockContent from "@sanity/block-content-to-react"

export default ({ data: { page } }) => (
  <SanityBlockContent
    blocks={page.textContent}
    projectId={process.env.GATSBY_SANITY_PROJECT_ID}
    dataset={process.env.GATSBY_SANITY_DATASET}
  />
)

export const query = graphql`
  query SomePageQuery($id: String) {
    page: sanitySomePage(id: { eq: $id }) {
      textContent: _rawTextContent
    }
  }
`