Skip to content
Lonely Planet Docs

page.query.graphql

The page.query.graphql file contains the main GraphQL query for fetching page data. This query retrieves the “shell” (layout) and above-the-fold content needed for initial page render.

File Location

Section titled “File Location”
src/pages/{routeName}/_graphql/page.query.graphql
src/pages/{routeName}/_graphql/page.query.cms.graphql
src/pages/{routeName}/_graphql/page.query.api.graphql
src/pages/{routeName}/_graphql/page.query.shop.graphql

Page query files are located in the _graphql directory with optional codegen suffixes.

Examples:

src/pages/articles/_graphql/page.query.cms.graphql
src/pages/places/_graphql/page.query.cms.graphql
src/pages/articles/[slug]/_graphql/page.query.cms.graphql
src/pages/shop/products/_graphql/page.query.shop.graphql

File Naming Convention

Section titled “File Naming Convention”
page.query.{codegen?}.graphql

Where {codegen} indicates which GraphQL service:

  • .cms.graphql - Contentful (most pages)
  • .api.graphql - Rakiura GraphQL
  • .shop.graphql - Shopify
  • No suffix - Generic/multi-service

Operation Naming

Section titled “Operation Naming”

The operation name follows the pattern:

query {RouteName}Page {
  # fields
}

Examples:

query ArticlesPage { }        # /articles
query ArticlePage { }          # /articles/[slug] (singular)
query PlacesPage { }           # /places
query PlacePage { }            # /places/[slug]

Typical Structure

Section titled “Typical Structure”

Static Page Query

Section titled “Static Page Query”
src/pages/articles/_graphql/page.query.cms.graphql
query ArticlesPage {
  internalPageCollection(where: { slug: "articles" }, limit: 1) {
    items {
      title
      slug


      # Hero section
      hero {
        title
        subtitle
        image {
          ...ImageProperties
        }
      }


      # Page metadata
      metadata {
        metaTitle
        metaDescription
        ogImage {
          ...ImageProperties
        }
      }


      # Above-fold components
      componentsCollection(limit: 3) {
        items {
          __typename
          ... on ComponentHero {
            title
            content
          }
          ... on ComponentFeatured {
            articlesCollection {
              items {
                ...ArticleListItem
              }
            }
          }
        }
      }
    }
  }
}

Dynamic Page Query

Section titled “Dynamic Page Query”
src/pages/articles/[slug]/_graphql/page.query.cms.graphql
query ArticlePage($slug: String!) {
  articleCollection(where: { slug: $slug }, limit: 1) {
    items {
      title
      slug
      publishDate


      # Hero
      heroImage {
        ...ImageProperties
      }


      # Author
      author {
        name
        slug
        image {
          ...ImageProperties
        }
      }


      # Content (above fold only)
      contentCollection(limit: 2) {
        items {
          __typename
          ... on ContentText {
            text
          }
          ... on ContentImage {
            image {
              ...ImageProperties
            }
            caption
          }
        }
      }


      # Metadata
      metadata {
        metaTitle
        metaDescription
        tags
      }
    }
  }
}

Variables

Section titled “Variables”

Define variables with appropriate types:

# Static page - no variables
query ArticlesPage { }


# Dynamic page - required variables
query ArticlePage($slug: String!) { }


# Optional filters
query ArticlesPage(
  $category: String
  $tag: String
  $limit: Int = 20
) { }


# Multiple variables
query ArticlePage(
  $slug: String!
  $preview: Boolean = false
  $locale: String = "en-US"
) { }

Fragment Imports

Section titled “Fragment Imports”

Use path aliases for fragment imports:

#import "#graphql/fragments/image.fragment.graphql"
#import "#graphql/fragments/articleListItem.fragment.graphql"


query ArticlesPage {
  articleCollection {
    items {
      ...ArticleListItem
    }
  }
}
Section titled “Related”