Unified Routes

catch-all-routes.jsx

// filepath: src/pages/product/[...id].js
// This is an example of a fallback route for your product collection route. If a user visites /product/id and the id
// does not match an id from your dataset, we will render this fallback url with a `/product/*id` named splat

export default function ProductNotFound(props) {
  return (
    <div>
      <h1>Product not found</h1>
    </div>
  )
}

client-only-route.jsx

// filepath: src/pages/users/[id].js
// This is an example of a client only route. The main difference is that we don't use `createPagesFromData`
// anytime you put an interpolative key in the file path (brackets: [someKey]) it becomes a client only route
import React, { useEffect, useState } from "react"

export default function (props) {
  const [users, setUsers] = useState([])

  useEffect(() => {
    ;(async () => {
      const res = await fetch('/users')
      const users = await res.json()
      setUsers(users)
    })()
  }, [])

  // props.params is given the interpolated data from the url.
  // So if you visit `/users/1234` params would be `{ id: '1234' }`
  const user =
    users.find(user => user.id === props.params.id) || "User not found"

  return (
    <div>
      <h1>User:</h1>
      <pre>
        <code>{JSON.stringify(user, null, 4)}</code>
      </pre>
    </div>
  )
}

collection-builder.jsx

// filepath: src/pages/product/{fields__id}.js
// This is an example of creating a collection of pages based on an array of data coming back from graphql
import React from "react"
import { graphql, createPagesFromData } from "gatsby"

// For now it's important that this component not be inlined into the createPagesFromData call.
// That would fail for edge-case babel reasons I haven't completed.
function Product(props) {
  // props.data is an instance of the `allProducts.nodes[i]` from below
  // props.params is the interpolated key from the url. So this would be: `{ fields__id: 'id-from-url' }`
  return (
    <div>
      <h1>{props.data.name}</h1>
      <h3>{props.data.fields.id}</h3>
    </div>
  )
}


const allQuery = `Product` || `allProduct` || `allProductPaginated(limit: 10)`

export default createPagesFromData(Product, allQuery)

export const query = graphql`
  query Product($id: String) {
    product(id: { eq: $id }) {
      id
      name
    }
  }

instructions.md

yarn add gatsby@unifiedroutes

Unified Routes allows you to create pages from a collection of data and client only routes without having to write anything in gatsby-node!

Just for super explicitness here -- what does this actually do?

const allQuery = `Product` || `allProduct` || `allProductPaginated(limit: 10)`

Clearly the data that gets injected is the individual entity (a la the product), is this just three examples of the base query?

Yeah, this was just an example. But yeah, you could put any of those in there. Is this adding too much confusion? I have a bit of a love/hate with it lol