All Technologies / Gatsby / Tutorial / Add Dynamic Pages

Add Dynamic Pages

Welcome to the fourth article in the getting started with Prismic and Gatsby tutorial series. We'll be walking through the steps required to convert the content from the repeatable pages from hard-coded to use content from Prismic.

🕙  Before reading

If you haven't already gone through the first step, we recommend you start there to download the project, launch a Prismic repository, and install the required plugin and dependencies.

Content modeling

Run npm start to re-launch your site and look at: /about and /more-info. These pages use the same Slices that the homepage, so we will re-use the same Slice Zone, code components, and Slice fragment queries.

The models for this Page already exist in your Prismic repository. Click on Custom Types, and select the Page type to see the content modeling of the Slice Zone. Then, click the Documents button and choose one Page to view the live version of the page.

The only difference between the Page vs. the Homepage model is that we exclude the banner and add a UID field, a URL-friendly unique ID that we will use to determine our pages' URLs.

⚠️ No need to modify the Custom Types

You do not need to change anything in the Custom Types of your repository. However, if you wish to change anything, we highly recommend you wait until the end of this step-by-step tutorial and read the dedicated plugin configuration article.

1. Test the page query

Run the project with npm start. Open the GraphQL Playground at http://localhost:8000/__graphql and paste the following GraphQL query in the top section, and the example id value of a document in the Query variables section,

See how we're using the Union type to help us specify the fields we need from a Slice. In this example, we're going to retrieve the Quote Slice in our Custom Type to check that everything is working:

  • Query variable
  • GraphQL query
Copy
{
  "id": "f155697f-382a-527c-9af7-d030178be1e4"
}
Copy
query PageQuery($id: String) {
  prismicPage(id: {eq: $id}) {
    data {
      body {
        ... on PrismicPageDataBodyQuote {
          slice_type
          primary {
            quote {
              text
            }
          }
        }
      }
    }
  }
}

Run the query by pressing the "play" button ▷ at the top; it'll show you the query results on the right.

There are some important things to note here:

  • The Page's Custom Type is repeatable, so we need to query the documents based on the URL visited. That's why we need the $id variable in the query. Read more: Query basics.
  • In the GraphiQL explorer, you need to specify the id variable value. This is generated automatically during the site build in your project.

2. Render the results

Let's now programmatically create pages from data.

1. Delete the hard-coded pages

Before creating the page template, delete the 〜/src/pages/about.js and 〜/src/pages/more-info.js files.

⚠️ Don't skip this step

If you skip this step, you'll end up with errors in the next step.

2. Create dynamic pages

We will use the File System Route API to generate pages for the Page type. First, create a new in the {PrismicPage.url}.js file inside the 〜/src/pages folder and paste the following code. This filename uses the nodes from the page query to create dynamic routes using the URLs defined in your Link Resolver.

Copy
// {PrismicPage.url}.js file

import * as React from 'react'
import { graphql } from 'gatsby'
import { SliceZone } from '@prismicio/react'

import { Layout } from '../components/Layout'
import { Seo } from '../components/Seo'

import { components } from '../slices'

const PageTemplate = ({ data }) => {
  if (!data) return null
  const doc = data.prismicPage.data

  return (
    <Layout>
      <Seo title={doc.document_display_name.text} />
      <SliceZone slices={doc.body} components={components} />
    </Layout>
  )
}

export const query = graphql`
  query PageQuery($id: String) {
    prismicPage(id: { eq: $id }) {
      data {
        document_display_name {
          text
        }
        body {
          ... on PrismicSliceType {
            slice_type
          }
          ...PageDataBodyText
          ...PageDataBodyQuote
          ...PageDataBodyFullWidthImage
          ...PageDataBodyImageGallery
          ...PageDataBodyImageHighlight
        }
      }
    }
  }
`

export default PageTemplate

Now, stop the current Gatsby server by pressing Ctrl + C. Relaunch your server by running npm start. When the build is complete, you'll see that the /about and /more-Info pages now pull their content entirely from Prismic!

Next steps

Next up, we will be updating the project to have the ability to control the top navigation from Prismic.

Add the navigation →
Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.