Обоснование с _raw и обычными данными в Gatsby, GraphQL и Sanity

Question

Я только начал использовать Гэтсби с Sanity CMS без головы.

По большей части это довольно просто; но знание лучших практик для запроса данных через GraphQL все еще беспокоит меня. То, как я это делаю в настоящее время, это просто яростно щелкаю по моей структуре CMS на площадке GraphQL и нахожу то, что я хочу. Это работает, но отсутствие единообразия в этом подходе делает меня неловким.

Например, если я хочу, чтобы изображение героя находилось где-то в CMS, мне нужно будет сделать что-то вроде:

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

Но если мне нужен блок PortableText , мне нужно запросить соответствующее поле _raw любого типа. Итак, если мой тип был introText, Гэтсби также предоставляет _rawIntroText. Я могу получить полный PortableText только из этой _raw версии данных. Например:

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

Кажется, что для некоторых данных вы можете использовать [Type], а иногда вам нужно для использования _raw[Type].

Нет большой документации по , почему это так. И я не уверен, применяется ли это через Сэнити или Гэтсби.

Мой вопрос, я думаю, был бы, почему _raw[Anything] существует в мире Гэтсби и / или Сэнити, и как люди решают, какой использовать (кроме проб и ошибок на площадке GraphQL и во время выполнения)?

Answer 1

Это исходит от плагина gatsby-source-sanity, который 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 sanityClient from "@sanity/client"
import sanityImageUrl from "@sanity/image-url"

const client = sanityClient({
  dataset: process.env.GATSBY_SANITY_DATASET,
  projectId: process.env.GATSBY_SANITY_PROJECT_ID,
  useCdn: true,
})

const builder = sanityImageUrl(client)

builder.image({ _id: "..." }).width(400).dpr(2).url()