Как получить ссылочные данные поля внутри inputComponent в Sanity.io?

Question

В Sanity Studio я пытался получить все свойства документа внутри входного компонента. Следуйте этой статье . Официально поддерживаемый способ получить содержимое документа, которое я смог использовать с Document HOC для получения данных документа, но некоторые из них имеют тип "ссылки", поэтому я могу получить только _ref и _type вместо всего объекта. Как я могу это сделать?

Обновление: я понял это с помощью клиента Sanity.

Импортируйте клиента в ваш компонент:

import client from 'part:@sanity/base/client';

Начните запрашивать, используя _ref в качестве _id в вашем запросе GROQ

...
componentDidMount = () => {
    client.fetch(`*[_type == "template" && _id == "<put _ref value here>"]{
      title,
      body
    }`).then(response => {
      console.info('RESPONSE', response);
    })
  }

Answer 1

Вы можете разыменовать значения с помощью оператора разыменования ->. Итак, допустим, у вас есть документ под названием book со свойством авторы, представляющим собой массив ссылочных типов.

Вы можете получить значения для массива авторов следующим образом:

const books = await client.fetch(
`*[_type == "book"] {
   ...,
   authors[]->
 }`
)

Вы можете проверить документацию Sanity по запросам GROQ для получения дополнительной и лучшей информации.

Answer 2

Итак, столкнулся с подобной проблемой, вот как я ее решил.

Во-первых: получить весь документ: давайте, вызовите документ, продукт.

      client.fetch(`*[_type == "product"]`) 

Во-вторых: получить определенное свойство от каждого продукта. В здравом уме есть нечто, называемое проекциями, оно используется для возврата определенного свойства от объекта.

Допустим, каждый наш элемент в массиве объектов наших продуктов имеет свойство имени, категории, цены и т. Д.

      products=[
{
    id:""
    name:"",
    price:"",
    productCategory:"",
},
{
    id:""
    name:"",
    price:"",
    productCategory:"",
},
]

Таким образом, чтобы вернуть только название и цену каждого продукта из нашего запроса, мы должны написать:

      client.fetch(`*[_type == "product"]{name, price}`) 

где {} отмечает проекцию.

Однако наше поле productCategory является ссылкой на тип в нашей схеме продукта, так что:

      {
  name: "productCategory ",
  title: "productCategory ",
  type: "reference",
  to: [{ type: "category" }],
},

категория, являющаяся другим документом со своей собственной схемой,category.js

В-третьих: запрос на выборку в первом выше вернет массив объектов продукта с productCategory в форме

      {type: "ref", ref:"random numbers"}

Что мы хотим сделать, так это получить имя этой категории, на которую ссылается :

Таким образом, мы добавим productCategory в нашу проекцию.

      client.fetch(`*[_type == "product"]{name, price,productCategory }`) 

Четвертое: теперь мы направляем ссылку на ее исходный документ и получаем доступ к свойству, соответствующему этому номеру ссылки:

      client.fetch(`*[_type == "product"]{name, price,productCategory-> }`) 

Это вернет объект для этого документа, поскольку он находится в схеме category.js:

      {
    id:"",
    name:"HeadPhones",
    type:"string",
}

Шестое: Чтобы получить имя, мы можем сделать следующее:

      client.fetch(`*[_type == "product"]{name, price,productCategory->{name} }`)

который вернется

      {
    name:"",
    price:""
    productCategory:{name:"HeadPhone"}
}

или сделать

      client.fetch(`*[_type == "product"]{name, price, "category": productCategory->name }`) 

{
    name:"",
    price:""    
    category:"HeadPhones"
}   

Мы наконец нанесли на картуrefв соответствующий документ и извлек имя.

Источник Sanity https://www.sanity.io/docs/how-queries-work

Answer 3

Я понял это с помощью Sanity Client.

Импортируйте клиента в свой компонент:

import client from 'part:@sanity/base/client';

Начните делать запросы, используя _ref в качестве _id в вашем запросе GROQ

...
componentDidMount = () => {
    client.fetch(`*[_type == "template" && _id == "<put _ref value here>"]{
      title,
      body
    }`).then(response => {
      console.info('RESPONSE', response);
    })
  }