如何解决如何在Gatsby中使用createResovers将Markdown字段不是文件转换为HTML
在Gatsby中将MD转换为HTML的标准过程是在本地系统上获取完整文件。
我需要转换一个特定的字段,而不是文件。与最相关的问题是this one,但是您可以看到它正在使用Contentful,它现在提供了一个插件来解决它。
我正在使用的API(Airtable)返回一个包含Markdown的字段。
recommended solution要使用解析器进行转换...但是我不能完全理解盖茨比docs on the topic。
构建时看到的错误是这样的:
UNHANDLED REJECTION Airtable.FAQ provided incorrect OutputType:
'Object({ resolve: [function resolve],extensions: Object({ createdFrom: "createResolvers" }) })'
我想我很亲密,但是我不知道我是要创建一个新类型还是实际上解析器要返回...一个新字段?
有问题的字段为FAQ
,您可以在GraphQL资源管理器的查询示例中看到该字段:
query MyQuery {
allAirtableManufacturer(filter: {data: {Premium: {eq: true}}}) {
edges {
node {
data {
Premium
Manufacturer
Premium_Manufacturers {
recordId
data {
FAQ
Downloads_File_Name
Is_Supplier
}
internal {
type
}
}
}
recordId
queryName
}
}
}
}
我的理解是,解析器可以/应该添加一个新字段,并将markdown内容转换为html。
这是我的解析器代码,在这里您可以看到我正在尝试向Airtable节点添加一个名为“ FAQ_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-config是:
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`,queryName: 'Premium',
所以现在'allAirtable'变成'allAirtablePremium'。
我尝试更改解析器以使用它:
createResolvers({
allAirtablePremium: {
FAQ_html: {
resolve(source: any,}
})
但这会引发警告:
warn `createResolvers` passed resolvers for type `allAirtablePremium` that doesn't exist in the schema.
很明显,它不喜欢“全部”,因此我将其更改为删除“全部”,如下所示:
createResolvers({
AirtablePremium: {
FAQ_html: {
resolve(source: any,}
})
我又回到了最初的错误,它至少告诉我我尝试返回的内容有问题(因为错误清楚地表明“错误的OutputType”)。
那应该返回什么?
在此先感谢您的帮助!
更新1
代码现在可以编译,但是看不到我的自定义字段。
这是模式自定义(只需将FAQ_HTML创建为空字符串即可开始)
import { GatsbyNode,CreateSchemaCustomizationArgs } from 'gatsby'
export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = async ({
actions,}: CreateSchemaCustomizationArgs) => {
const { createFieldExtension,createTypes } = actions
createFieldExtension({
name: "FAQ_HTML",extend() {
return ''
},})
const typeDefs = `
type airtablePremium implements Node {
FAQ_HTML: String @FAQ_HTML
}
`
createTypes(typeDefs)
}
解析器现在是这样的:
createResolvers({
airtablePremium: {
FAQ_HTML: {
resolve(source: 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(`
type AirtablePremium implements Node @infer {
FAQ_HTML: String
}
`)
最大的问题是类型名称。在代码中,它应该是AirtablePremium
与airtablePremium
。您可以通过单击左列中的字段名称,或按住 cmd 并单击查询中的字段来在GraphiQL中找到类型名称。
您还将在createResolvers
中使用类型名:
createResolvers({
AirtablePremium: {
FAQ_HTML: {
resolve(source: any,args: any,context: any,info: any) {
...
},},})
从@rmcsharry更新
在@Derek Nguyen的非常有用的帮助之后,我找到了一个替代的更简单的解决方案。
如果要避免创建类型的麻烦,可以使用markdown-to-jsx插件提供更简单的解决方案。
然后,您只需包装传入的降价字段:
<Markdown>{field}</Markdown>
并动态创建一个React JSX组件。 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。