对类型的健全参考作为“参考”

Question

在理智中，我有这个字段：

{
  name: 'reference',
  type: 'reference',
  title: 'Link Reference',
  to: [
    { type: 'post' }, { type: 'questionPost' }, { type: 'linkCategory' }, { type: 'information' }
    // other types you may want to link to
  ]
},

在 CMS 中它提示为链接选择器，我选择了一个链接。然后在graphql中是：

"reference": 
{
          "_ref": "1a558cde-16fb-4362-8082-634468a1cc20",
          "_type": "reference"
},

问题是，在我的前端组件中，当我参考时。_type 通常是“post”、“questionPost”、“linkCategory”或“信息”，但在另一个页面上，reference._type 是“参考”。 你知道为什么有时 reference._type 是 'reference' 而不是 'post'、'questionPost' ...？

编辑：

所以我有一个 ctaWidget：

export default {
  name: "ctaWidget",
  type: "object",
  title: "CTA Widget",
  fields: [
    {
      name: "LeftSideText",
      type: "portableText",
      title: "Left side text"
    },
    {
      name: "text",
      type: "string",
      title: "Link text",
    },
    {
      name: 'reference',
      type: 'reference',
      title: 'Link Reference',
      to: [
        { type: 'post' }, { type: 'questionPost' }, { type: 'linkCategory' }, { type: 'information' }
        // other types you may want to link to
      ]
    },
  ],
  preview: {
  },
};

ctaWidget 是 Sanity 可移植文本 bioPortableText 的一部分：

 export default { name: "bioPortableText",
  type: "array",
  title: "Excerpt",
  of: [
    {
      type: "block",
      title: "Block",
      styles: [{ title: "Normal", value: "normal" }],
      lists: [],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
          { title: "Code", value: "code" },
        ],
      },
    },
    {
      type: "mainImage",
      options: { hotspot: true },
    },
    {
      type: "mainVideo",
    },
    {
      type: "ctaWidget",
    },
    {
      type: "prosConsWidget",
    },
  ],
};

（在 CMS 中看起来像： ctaWidget in bioPortable text) （当我点击 ctaWidget 时，链接参考如下：link reference） 获取 bioPortableText 的查询是：

export const query = graphql` query peopleTemplateQuery($id: String!) {
post: sanityPeople(id: { eq: $id }) {
  id
  publishedAt
  email
  slug {
    current
  }
  name
  jobTitle
  image {
    ...SanityImage
    alt
  }
  location {
    location
  }
  _rawBio
  feeStructure
  qualification {
    qualification
  }
  specialisations {
    specialisation
  }
}
dictionary: allSanityDictionary {
  nodes {
    key
    value
  }
}

} `;

_rawBio 我这样传递给组件：

 {_rawBio && <PortableText blocks={_rawBio} />}

然后在序列化器中：

ctaWidget: ({ node }) => {
  if (node.LeftSideText === undefined) {
    return null;
  }
  else {
    return (<CtaWidget leftSideText={node.LeftSideText} linkTitle={node.text} reference={node.reference} />)
  }
},

然后在 CtaWidget 组件中 node.reference._type 应该是 'post' 或 'questionPost' 或 'linkCategory' 或 'information' 这样我就可以使用 node.reference.slug.current 来获取 url。但相反，node.reference._type 是“参考”，并且 node.reference 上没有 slug 属性...。

Answer 1

我想我现在明白这个问题了。

您面临的问题是_rawX 字段不会自动解析引用。也就是说，Sanity 为您提供了一种方法来判断您希望解析参考的深度。

export const query = graphql`
  query peopleTemplateQuery($id: String!) {
    post: sanityPeople(id: { eq: $id }) {
      id
      publishedAt
      email
      slug {
        current
      }
      name
      jobTitle
      image {
        ...SanityImage
        alt
      }
      location {
        location
      }
      _rawBio(resolveReferences: { maxDepth: 5 })
      feeStructure
      qualification {
        qualification
      }
      specialisations {
        specialisation
      }
    }
    dictionary: allSanityDictionary {
      nodes {
        key
        value
      }
    }

您需要指定适合您的数据结构的深度。

文档：https://www.sanity.io/docs/gatsby-source-plugin#raw-fields。