gatsby - 如何对嵌套数据使用 Gatsby createResolver

Question

我正在使用 Gatsby 的 createResolver API 将 markdown 转换为 html。它在顶层数据上运行良好。但是，我无法让它在嵌套更深的数组上工作。

这是有效的:

function markdownToHTMLResolver(nodeType, node, type) {
  return {
    [nodeType]: {
      [`${node}_html`]: {
        type: type,
        resolve: (source, args, context, info) => {
          return remark().use(html).processSync(source[node]).contents;
        },
      },
    },
  };
}

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    ...markdownToHTMLResolver(BLOG_NODE_TYPE, 'body', 'String'),
    ...markdownToHTMLResolver(FRONT_NODE_TYPE, 'body', 'String'),
    ...markdownToHTMLResolver(EVENT_NODE_TYPE, 'body', 'String'),
    ...markdownToHTMLPageResolver(PAGE_NODE_TYPE, 'body', 'String'),
  };
  createResolvers(resolvers);
};

这适用于来 self 的 REST API 的数据，其结构如下:

{
    title: 'Title',
    body: '## Heading 2 \n\nParagraph Text.'
}

但是，我不太明白如何将它用于这样的嵌套数据:

{ 
    title: 'Title',
    body: '## Heading 2 \n\nParagraph Text.'
    list: {
       data: [
          { title: 'Nested Title 1', body: 'Nested body markdown text 1.'},
          { title: 'Nested Title 2', body: 'Nested body markdown text 2.'},
          { title: 'Nested Title 3', body: 'Nested body markdown text 3.'},
       [
    }
}

我不确定这个嵌套数据的类型应该是什么。我试过这样的东西，但它有明显的缺陷:

function markdownToHTMLPageResolver(nodeType, node, type) {
  return {
    [nodeType]: {
      [`${node}_html`]: {
        type: type,
        resolve: (source, args, context, info) => {
          return remark().use(html).processSync(source[node]).contents;
        },
      },
      list_html: {
        type: ['String'],
        resolve: (source, args, context, info) => {
          return source.list.data.forEach((item) => ({
            title: item.title,
            body: remark().use(html).processSync(source[node]).contents,
          }));
        },
      },
    },
  };
}

如有任何指导或帮助，我们将不胜感激。

Answer 1

所以我想我明白了。我能够使用 __typename 在 GraphiQL 界面中发现推断类型。然后我能够像这样迭代数据并处理 Markdown :

list_html: {
        type: 'PageList',
        resolve: (source, args, context, info) => {
          const dataArray = source.list.data.map((item) => {
            return {
              title: item.title,
              body: remark().use(html).processSync(item.body).contents,
            };
          });
          return {
            data: dataArray,
          };
        },
      },

看起来保持对象结构与原始结构相同很重要。