CODEWITHSUNDEEP
reactjsgatsbyprismic.io
PaddyStacks
PaddyStacks

Reputation: 31

(Gatsby + Prismic): Content Relationship URLs

I have a Gatsby Prismic blog with two custom content types - guide, and review.

I want the URL structure to be www.mysite.com/guide_url/review_url.

What I've done so far:

I've added a content relationship field in Prismic to the parent custom type guide and linked the children (review) to it.

In my gatsby-node.js file the code looks like this:

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allPrismicGuide {
          edges {
            node {
              id
              uid
            }
          }
        }
        allPrismicReview {
          edges {
            node {
              id
              uid
            }
          }
        }
    `).then(result => {
      const categoriesSet = new Set();
      result.data.allPrismicGuide.edges.forEach(({ node }) => {
        createPage({
          path: node.uid,
          component: path.resolve(`./src/templates/GuideTemplate.js`),
          context: {
            // Data passed to context is available in page queries as GraphQL variables.
            slug: node.uid
          }
        });
      });
      result.data.allPrismicReview.edges.forEach(({ node }) => {
        createPage({
          path: node.uid,
          component: path.resolve(`./src/templates/ReviewTemplate.js`),
          context: {
            // Data passed to context is available in page queries as GraphQL variables.
            slug: node.uid,
            tags: node.tags
          }
        });
      });

I'm pretty new to Gatsby and Prismic.

I would love to get some feedback (helpful links) and suggestions!

Upvotes: 0

Views: 390

Answers (2)

Pawichi
Pawichi

Reputation: 66

[Update] Prismic is not longer recommending the gatsby-source-prismic-graphql plugin.

Here's an article that'll help you migrating to the other one:

How to migrate a project from 'gatsby-source-prismic' to 'gatsby-source-prismic-graphql'

Upvotes: 1

larandev
larandev

Reputation: 259

The Prismic docs are now recommending the gatsby-source-prismic plugin.

If your relationship field is named review your query should look something like this:

{
  allPrismicGuide {
    edges {
      node {
        id
        uid
        data {
          review {
            document {
              ... on PrismicReview {
                uid
              }
            }
          }
        }
      }
    }
  }
}

Then you should be able to access the child uid in node.data.review.document.uid. So:

createPage({
  path: `${node.uid}/${node.data.review.document.uid}`,
  // ... other stuff ...
});

In your linkResolver:

if (doc.type === 'guide') {
  return `${doc.uid}/${doc.data.review.uid}`;
}

gatsby-source-prismic version: 3.2.1

Upvotes: 0

Related Questions