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 source
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();
})
});
}
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 file
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();
})
});
}
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 Error
error 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: - templateBuilder
I 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.
EDIT
I 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.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
}
}
}
}
`;
blog-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
}
}
}
}
`;
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.
See above edit for more details and code examples.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With