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!
Last active
June 4, 2020 14:01
-
-
Save blainekasten/5fb5a2a221e3bff07c569e0597fd9af3 to your computer and use it in GitHub Desktop.
Unified Routes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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> | |
| ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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> | |
| ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 | |
| } | |
| } | |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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