Add a List of Posts to a Gatsby Blog with a GraphQL Page Query

Share this video with your friends

Send Tweet

In this lesson, you’ll use GraphQL to query for transformed Markdown blog posts and display links to each of them on the blog’s homepage.

Peter
Peter
~ 6 years ago

Is anybody else getting a strange error from GrahpQl?

  Invariant Violation: GraphQLCompilerContext: Duplicate document named `HomepageQuery`. GraphQL fragments and roots must have unique names.
    t: Duplicate document named `HomepageQuery`. GraphQL fragments and roots must have unique names.```
James Maclean
James Maclean
~ 5 years ago
  1. Why use a 'Page query' instead of a 'Static' one?
  2. It looks like a query exported in my index.js is available on other pages. Why does this happen?
Lauro Silva
Lauro Silva
~ 5 years ago

Hey James, good question. It seems that StaticQuery can do most of the things that page query can, including fragments. The main differences are:

  • page queries can accept variables (via pageContext) but can only be added to page components.
  • StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages.

As of Gatsby v2, StaticQuery seems to be the default choice. So I would suggest just using StaticQuery. Link to the documentation.