I have a simple Gatsby prototype that utilizes Kentico Cloud as a data source. Luckily for me, they have already built a source plugin that I'm utilizing to fetch a single data type called 'BlogPost'. This works as expected.gatsby-node.js sourceconst 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();
})
});
}
This works great, but I really want to add a second data type called 'Articles'Following the Gatsby Kentico Starter Template Example, I've modified my gatsby-node.js fileconst 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();
})
});
}
As you can see, I logged the results so I could see what they look like. console.log(JSON.stringify(result));
Produces {
"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" }
}
}
]
}
}
}
So far, so good. I see what I expect to see. And when I run gatsby develop it actually compiles successfully, but with a graphQL Errorerror GraphQL Error There was an error while compiling your site's
GraphQL queries. Error: RelayParser: Encountered duplicate
defintitions for one or more documents: each document must have a
unique name. Duplicated documents:
- templateBuilderI attempted to solve this by putting a comma after my first BlogPost query.graphql(`
{
allKenticoCloudItemBlogPost {
edges {
node {
elements {
url_slug{
value
}
}
}
}
},
allKenticoCloudItemArticle{
edges{
node{
elements{
url_slug{
value
}
}
internal{
type
}
}
}
}
}
I attempted to put a new query in as a new promise but got a notification from my editor that it was unreachable code so I know that won't work. It has to be something small as I've modeled my code after the Gatsby Kentico Source Plugin starter which uses the same technologies I am. I can download and run that project with no problem. So I'm not sure what I'm doing wrong. EDITI solved this. The problem was in templates for each data type. I was naming both queries as templateBuilder. I changed the blog template to blogBuilder and the article template to articleBuilder. Works like a charm now. article.jsexport 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
}
}
}
}
`;
blog-post.jsexport 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
}
}
}
}
`;
↧