Graphql 如何在Gatsby中使用createResovers将标记字段（不是文件）转换为HTML

在盖茨比中，将MD转换为HTML的标准过程是本地系统上的完整文件

我需要转换特定字段，而不是文件。最重要的相关问题是，但正如您所看到的，这是使用Contentful，它现在提供了一个插件来解决它

我正在使用的API（Airtable）返回一个包含降价的字段

最重要的是转换使用解析器…但我不能完全理解盖茨比

我在构建时看到的错误如下：

UNHANDLED REJECTION Airtable.FAQ provided incorrect OutputType:
 'Object({ resolve: [function resolve], extensions: Object({ createdFrom: "createResolvers" }) })'

我想我很接近了，但我不知道我是否要创建一个新类型，或者冲突解决程序实际上要返回什么…一个新字段

所涉及的字段是

FAQ

，您可以在GraphQL资源管理器中的查询示例中看到：

querymyquery{
allAirtableManufacturer（筛选器：{data:{Premium:{eq:true}}}）{
边缘{
节点{
资料{
保险费
制造商
高级制造商{
记录ID
资料{
常见问题
下载\u文件\u名称
是供应商吗
}
内部的{
类型
}
}
}
记录ID
queryName
}
}
}
}

我的理解是，解析器可以/应该添加一个新字段，将标记内容转换为html

这是我的解析器代码，您可以看到我正在尝试向Airtable节点添加一个名为“FAQ\U html”的字段：

  createResolvers({
    Airtable: {
      FAQ_html: {
        resolve(source: any, args: any, context: any, info: any) {
          return remark().use(html).processSync(source.data.FAQ).contents
        },
      },
    }
  })

我的airtable的gatsby配置为：

    resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,
        concurrency: 5,
        tables: [
          {
            baseId: `appP5vBdAitw6yyDH`,
            tableName: `Manufacturers`,
            queryName: `Manufacturer`,
            tableView: `AppView_Details_DONOTCHANGE`,
            tableLinks: [`Premium_Manufacturers`],
            separateNodeType: true,
            defaultValues: {
              Company_Description: '',
            },
          },
          {
            baseId: `appP5vBdAitw6yyDH`,
            tableName: 'Premium_Manufacturers',
            tableLinks: [`Manufacturers`],
          },

        ],

表“Premium_Manufacturers”显然是作为一个孩子与“Manufacturers”联系在一起的

然而，当我在GraphQL中探索时，我还看到它们显示为一个名为“Airtable”的顶级节点，这是我没有预料到的。你可以在这里看到：

allAirtable {
    edges {
      node {
        data {
          FAQ
          Downloads_File_Name
          Last_update
          Is_Supplier
          Section_Name
          Section_No
          Name
          Cell_Number
          Email
          Rep_Name
          Technical_Rep_Name
          Consolidated_Rep
        }
      }
    }
  }

这就是为什么我的解析器使用“Airtable”作为节点的名称，但显然它不起作用

我还尝试更改配置以提供单独的节点：

          {
            baseId: `appP5vBdAitw6yyDH`,
            tableName: 'Premium_Manufacturers',
            queryName: 'Premium',
            separateNodeType: true,
            tableLinks: [`Manufacturers`],
          },

所以现在“allAirtable”变成了“allAirtablePremium”

我尝试更改冲突解决程序以使用：

  createResolvers({
    allAirtablePremium: {
      FAQ_html: {
        resolve(source: any, args: any, context: any, info: any) {
          return remark().use(html).processSync(source.data.FAQ).contents
        },
      },
    }
  })

但这给了我们一个警告：

warn `createResolvers` passed resolvers for type `allAirtablePremium` that doesn't exist in the schema.

很明显，它不喜欢“全部”，因此我将其更改为删除“全部”，如下所示：

  createResolvers({
    AirtablePremium: {
      FAQ_html: {
        resolve(source: any, args: any, context: any, info: any) {
          return remark().use(html).processSync(source.data.FAQ).contents
        },
      },
    }
  })

我回到了最初的错误，它至少告诉我，我试图返回的内容有问题（因为错误清楚地表明“输出类型错误”）

那么，它应该返回什么呢

提前感谢您的帮助

更新1

代码现在可以编译了，但是我没有看到我的自定义字段

这是模式定制（只需将FAQ\U HTML创建为空字符串即可开始）：

分解程序现在如下所示：

  createResolvers({
    airtablePremium: {
      FAQ_HTML: {
        resolve(source: any, args: any, context: any, info: any) {
          console.log("SOURCE IS", source)
          const faqHtml = remark().use(html).processSync(source.FAQ).contents
          console.log("faqHtml IS", faqHtml)
          return faqHtml;
        },
      },
    },
  })

---

它可以编译，但该字段不会显示在GraphQL资源管理器中。也没有控制台输出。

在与@rmcsharry愉快地交谈之后，我们确认您需要首先创建类型

createTypes(`
类型AirtablePremium实现节点@infere{
常见问题解答：字符串
}
`)

最大的问题是类型名。在代码中，它应该是

AirtablePremium

vs

AirtablePremium

。通过单击左列中的字段名，或者按住cmd并单击查询中的字段，可以在GraphiQL中找到类型名称

您还可以在

createResolvers

中使用typename：

createResolvers({
空运保费：{
常见问题解答(HTML){
解析（源：任意、参数：任意、上下文：任意、信息：任意）{
...
},
},
},
})

从@rmcsharry更新

在@Derek Nguyen的帮助下，我找到了另一个更简单的解决方案

如果您想避免创建类型的麻烦，可以使用插件使用更简单的解决方案

然后，只需包装传入的降价字段：

<Markdown>{field}</Markdown>

{field}

---

并动态创建react JSX组件。：）

错误消息是针对

Airtable.FAQ

的，虽然列出的输出类型看起来像是属于您的

FAQ\u html

字段，因此可能盖茨比在这里感到困惑。首先尝试在onSchemaCustomization

createTypes

中声明您的

FAQ\u html

字段。在解析器中，它看起来应该是

source.FAQ

，而不是

source.data.FAQ

。您可以在resolve函数的主体中添加console.log，然后尝试在graphiQL中查询数据，以查看进程是否记录了任何内容。@DerekNguyen谢谢，这里有一些很棒的提示。越来越近…！：）

<Markdown>{field}</Markdown>