Как получить справочные поля во встроенных блоках, используя поля Rich Text в Gatsby и Contentful - PullRequest
Новая
       19

Как получить справочные поля во встроенных блоках, используя поля Rich Text в Gatsby и Contentful

0 голосов
/ 01 мая 2019

У меня есть поле текстового редактора, которое принимает встроенный блок, в котором тип содержимого содержит ссылку на другой тип содержимого.

Как это: 

content (rich text field)
  - group (embedded block)
    - group-items (reference field)
      - item 1 (referenced content)
      - item 2 (referenced content)

Как я могу получить referenced content предметов, используя @contentful/rich-text-react-renderer?

У меня сейчас есть это: 

import { MARKS, BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      console.log(node);
      return true;
    }
  },
  renderText: text => text.replace('!', '?'),
};

Что дает мне кучу идентификаторов, а не полевых данных для записей, что я действительно хочу. 

content: []
data:
target: {sys: {…}}
__proto__: Object
nodeType: "embedded-entry-block"

content: []
data:
target:
sys: {id: "c13cBu2W6nOkQMx6bsvqCE5", type: "Link", linkType: "Entry"}
__proto__: Object
__proto__: Object
nodeType: "embedded-entry-block"
__proto__: Object

1 Ответ

0 голосов
/ 06 мая 2019

Там, где я столкнулся с двумя проблемами.

Во-первых, из-за кеша в кэше Гэтсби возникнут проблемы с извлечением новых данных из контента, и поэтому вы можете получить только sys, а не fields.Что и происходит со мной.

Просто удалите .cache и повторите yarn run dev, и это должно быть хорошо.

Во-вторых, чтобы получить несколько типов контента с блоками ввода, этого можно добиться, посмотревдля входных блоков sys.id.Таким образом, вы можете создавать различные компоненты для обработки различных типов контента. 

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const fields = node.data.target.fields;

      switch (node.data.target.sys.contentType.sys.id) {
        case 'group-item':
          return <div>
            <GroupItem name={fields.name['en-US']} />
          </div>
        default:
           return <div>Fallback Element</div>
}
...