我有一个简单的Gatsby原型,它利用Kentico Cloud作为数据源。幸运的是,他们已经构建了一个source plugin,我正在利用它来获取一个名为“BlogPost”的数据类型。这按预期工作。
gatsby-node.js源码
const path = require(`path`);
exports.createPages = ({graphql, actions}) => {
const { createPage } = actions;
return new Promise((resolve, reject) => {
graphql(`
{
allKenticoCloudItemBlogPost {
edges {
node {
elements {
url_slug{
value
}
}
}
}
}
}
`).then(result => {
console.log(result);
result.data.allKenticoCloudItemBlogPost.edges.map(({node}) => {
createPage({
path: `${node.elements.url_slug.value}`,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.elements.url_slug.value,
},
})
})
resolve();
})
});
}
这很好用,但我真的想添加一个名为'Articles'的第二种数据类型
在Gatsby Kentico Starter Template Example之后,我修改了我的gatsby-node.js文件
const path = require(`path`);
exports.createPages = ({graphql, actions}) => {
const { createPage } = actions;
return new Promise((resolve, reject) => {
graphql(`
{
allKenticoCloudItemBlogPost {
edges {
node {
elements {
url_slug{
value
}
}
}
}
}
allKenticoCloudItemArticle{
edges{
node{
elements{
url_slug{
value
}
}
internal{
type
}
}
}
}
}
`).then(result => {
console.log('START HERE');
console.log(JSON.stringify(result));
result.data.allKenticoCloudItemBlogPost.edges.map(({node}) => {
createPage({
path: `${node.elements.url_slug.value}`,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.elements.url_slug.value,
},
})
});
result.data.allKenticoCloudItemArticle.edges.map(({node}) => {
createPage({
path: `${node.elements.url_slug.value}`,
component: path.resolve(`./src/templates/article.js`),
context: {
slug: node.elements.url_slug.value,
},
})
})
resolve();
})
});
}
如您所见,我记录了结果,因此我可以看到它们的样子。
console.log(JSON.stringify(result));
产生
{
"data": {
"allKenticoCloudItemBlogPost": {
"edges": [
{
"node": { "elements": { "url_slug": { "value": "my-first-post" } } }
},
{
"node": {
"elements": { "url_slug": { "value": "my-second-blog-post" } }
}
},
{ "node": { "elements": { "url_slug": { "value": "3rd-blog-post" } } } }
]
},
"allKenticoCloudItemArticle": {
"edges": [
{
"node": {
"elements": { "url_slug": { "value": "article-1-example" } },
"internal": { "type": "KenticoCloudItemArticle" }
}
},
{
"node": {
"elements": { "url_slug": { "value": "article-2" } },
"internal": { "type": "KenticoCloudItemArticle" }
}
}
]
}
}
}
到现在为止还挺好。我看到了我期待看到的东西。
当我运行gatsby develop
时,它实际上编译成功,但有一个graphQL错误
错误GraphQL错误编译站点的GraphQL查询时出错。错误:RelayParser:遇到一个或多个文档的重复定义:每个文档必须具有唯一的名称。重复文件: - templateBuilder
我试图通过在我的第一个Blog Post查询后放一个逗号来解决这个问题。
graphql(`
{
allKenticoCloudItemBlogPost {
edges {
node {
elements {
url_slug{
value
}
}
}
}
},
allKenticoCloudItemArticle{
edges{
node{
elements{
url_slug{
value
}
}
internal{
type
}
}
}
}
}
我试图将一个新的查询作为一个新的承诺,但从我的编辑得到一个通知,它是无法访问的代码,所以我知道这将无法正常工作。
它必须是小的,因为我在使用与我相同的技术的Gatsby Kentico Source Plugin starter之后对我的代码进行了建模。我可以毫无问题地下载并运行该项目。所以我不确定我做错了什么。
编辑
我解决了这个问题问题出在每种数据类型的模板中。我将两个查询命名为templateBuilder。我将博客模板更改为blogBuilder,将文章模板更改为articleBuilder。现在就像一个魅力。
article.js
export const query = graphql`
query articleBuilder($slug: String!) {
kenticoCloudItemArticle(elements: { url_slug: { value: { eq: $slug } } }) {
elements {
article_title {
value
}
article_content {
value
}
article_date {
value
}
url_slug {
value
}
}
}
}
`;
博客,post.js
export const query = graphql`
query blogBuilder($slug: String!) {
kenticoCloudItemBlogPost(elements: { url_slug: { value: { eq: $slug } } }) {
elements {
blog_title {
value
}
blog_content {
value
}
blog_date {
value
}
url_slug {
value
}
}
}
}
`;
问题出在每种数据类型的模板中。我将两个查询命名为templateBuilder。我将博客模板更改为blogBuilder,将文章模板更改为articleBuilder。
有关详细信息和代码示例,请参见上面的编辑