Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

graphql duplicated documents error when retreiving multiple data types in Gatsby-node.js

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
        }
      }
    }
  }
`;
like image 921
onTheInternet Avatar asked Feb 25 '19 15:02

onTheInternet


1 Answers

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.

like image 64
onTheInternet Avatar answered Dec 09 '22 21:12

onTheInternet