对类型的健全引用作为“引用”

如何解决对类型的健全引用作为“引用”

在 Sanity 中，我有这个字段：

{
  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”或“信息”，但在另一个页面引用中。_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',to: [
        { type: 'post' },{ 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 是“reference”，并且在 node.reference... 上没有 slug 属性。

解决方法

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

您面临的问题是 _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。