RFC: File System Routing Improvements

[blainekasten]

Click here to see the latest version rendered

[herecydev]

@blainekasten looks really good, I've got an example that I currently use on a Gatsby site ~10K pages. I'll try to create a relevant scenario with the products collection builder.

So you've used /src/pages/product/{id}.js to create /product/1 (burger) etc. What if you wanted to nest some paths such that you can dynamically create /product/1/reviews/1, /product/1/reviews/2, etc.

Currently this is trivial as you just need:

//gatsby-node.js

products.forEach(product => {
//create product page
createPage()

product.reviews.forEach(review => {
//create review page
createPage()
}
})

I wonder if the createPagesFromData could take an array such that the following works:

// filepath:
// /src/pages/product/{id}/reviews/{name}.js
//
// urls:
// /product/1/reviews/newyorktimes (burger)
// /product/2/reviews/chickenlovers (chicken)
//

// This macro fetches the Product's, and generates a page for each one with the component given.
export default createPagesFromData([[Product, `Product`], [Review, `Review`]])

// This component then can fetch it's own data to use inside of the component.
export const query = graphql`
  query RootProduct($id: String) {
    product(id: { eq: $id }) {
      id
      name
    }
    review(id: { eq: $id }) {
      id
      name
    }
  }
`

Each "braced" template will just take the matching item of the array. Thoughts?

[blainekasten]

@herecydev Thanks for the feedback on this! So our goal with this API is to solve the 90% of use-cases. Working with multiple data sources is a bit tricky. Is the product and reviewed tied together in the node module? If it is you could do something like this:

/src/pages/product/{id}/reviews/{reviews__name}.js

This is assuming there is some structure like this:

query Product {
  id
  reviews {
    name
  }
}

If this doesn't exist already, you could make the connection in gatsby-node, or even create a new data structure that marries the two types.

I'm curious how frequently people are merging two entirely unique data types together to decide if that warrants specific API support.

[herecydev]

So our goal with this API is to solve the 90% of use-cases

Yer I get that, hard to quantify how big a problem it will be.

If this doesn't exist already, you could make the connection in gatsby-node, or even create a new data structure that marries the two types.

That's awesome, I assume any "magic" like @links or schemaCustomizations should work as well. Basically as long as you could query that normally...

[advancingu]

How would the approach proposed here look like to create individual pages for localized products while additionally requiring query pagination?

As an example, let's consider the following GraphQL query for products stored in commercetools:

query MyProductsQuery($locale: commercetools_Locale, $offset: Int) {
  ct {
    products(offset: $offset) {
      results {
        masterData {
          current {
            slug(locale: $locale)
          }
        }
      }
    }
  }
}

We use $locale to get a product representation for each desired locale and $offset to paginate through all products. Note that in the case of commercetools, there is a hard query limit of 500 results enforced on the API. As for $locale, for the purposes of this example, we can consider the values available as an array hardcoded locally.

As an alternative, we could retrieve all available locales as an array of locale, value tuples (but would then need to discard those locales we are not interested in using):

query MyProductsQuery($offset: Int) {
  ct {
    products(offset: $offset) {
      results {
        masterData {
          current {
            slugAllLocales {
              locale
              value
            }
          }
        }
      }
    }
  }
}

The goal in both cases is to create product pages located at /{locale}/product/{slug}.

[gatsby-cloud]

Gatsby Cloud Build Report

client-only-paths

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 12s

Performance

Lighthouse report

Metric	Score
Performance	💚 100
Accessibility	🔶 85
Best Practices	💚 100
SEO	🔶 70

🔗 View full report

[gatsby-cloud]

Gatsby Cloud Build Report

using-styled-components

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 13s

Performance

Lighthouse report

Metric	Score
Performance	💚 100
Accessibility	💚 90
Best Practices	💚 100
SEO	💚 90

🔗 View full report

[gatsby-cloud-staging]

Gatsby Cloud Build Report

gatsby-master

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 14s

Performance

Lighthouse report

Metric	Score
Performance	💚 95
Accessibility	🔶 87
Best Practices	💚 93
SEO	🔶 73

🔗 View full report

[gatsby-cloud]

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

Errors

Error getting repo data for starter "gatsby-starter-styled":

            Unexpected token : in JSON at position 3 in "https://raw.githubusercontent.com/gregoralbrecht/gatsby-starter-styled/master/package.json": 
404: Not Found...

[gatsby-cloud]

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

Errors

Error getting repo data for starter "gatsby-starter-styled":

            Unexpected token : in JSON at position 3 in "https://raw.githubusercontent.com/gregoralbrecht/gatsby-starter-styled/master/package.json": 
404: Not Found...