From 5ba1ac2aca063577a907560627f262649c732279 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 21 May 2021 16:48:07 -0700 Subject: [PATCH] feat(examples): migrate from createPages to File System Routes (#31538) * Refactor using-contentful to use fs routes * Upgrade gatsbygram * Fix & upgrade using-drupal --- examples/gatsbygram/data/posts.json | 24 ++--- examples/gatsbygram/gatsby-config.js | 1 + examples/gatsbygram/gatsby-node.js | 63 ------------ examples/gatsbygram/package.json | 13 ++- examples/gatsbygram/src/components/Avatar.js | 7 +- examples/gatsbygram/src/components/modal.js | 14 +-- .../post-page.js => pages/{PostsJson.id}.js} | 0 examples/using-contentful/gatsby-node.js | 97 ------------------- .../categories/{ContentfulCategory.id}.js} | 9 +- examples/using-contentful/src/pages/index.js | 4 +- .../products/{ContentfulProduct.id}.js} | 7 +- examples/using-drupal/.gitignore | 5 + examples/using-drupal/gatsby-config.js | 4 +- examples/using-drupal/gatsby-node.js | 54 ----------- examples/using-drupal/package.json | 7 +- examples/using-drupal/src/pages/index.js | 94 ++++++++++-------- examples/using-drupal/src/pages/recipes.js | 10 +- .../recipe.js => pages/{Recipes.title}.js} | 41 ++++---- 18 files changed, 132 insertions(+), 322 deletions(-) delete mode 100644 examples/gatsbygram/gatsby-node.js rename examples/gatsbygram/src/{templates/post-page.js => pages/{PostsJson.id}.js} (100%) delete mode 100644 examples/using-contentful/gatsby-node.js rename examples/using-contentful/src/{templates/category.js => pages/categories/{ContentfulCategory.id}.js} (87%) rename examples/using-contentful/src/{templates/product.js => pages/products/{ContentfulProduct.id}.js} (90%) create mode 100644 examples/using-drupal/.gitignore delete mode 100644 examples/using-drupal/gatsby-node.js rename examples/using-drupal/src/{templates/recipe.js => pages/{Recipes.title}.js} (77%) diff --git a/examples/gatsbygram/data/posts.json b/examples/gatsbygram/data/posts.json index e180ccf83f285..a4a90d1b16be6 100644 --- a/examples/gatsbygram/data/posts.json +++ b/examples/gatsbygram/data/posts.json @@ -10,7 +10,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/83b838f14c7d14dfe6d135169269c5b4/5B5DA593/t51.2885-15/e35/25022535_184817402253496_8516666732012634112_n.jpg", "image": "images/BdiU-TTFP4h.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1677771511187112561", @@ -23,7 +23,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/2d017da97183c1b44af94f89a5c339a5/5B715B0A/t51.2885-15/e35/25023686_225296388010245_7735181992098004992_n.jpg", "image": "images/BdIpEzalAJx.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1632234281433883850", @@ -36,7 +36,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9fe5e566f6a2f052e00d93f5946573f2/5B6CF364/t51.2885-15/s1080x1080/e15/fr/22639107_756415651233391_8439041434429947904_n.jpg", "image": "images/Bam3G5XFOTK.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1601601194425654597", @@ -49,7 +49,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f8a655a6b9e098ef746f214e428519de/5B634421/t51.2885-15/e35/21576632_732996816885233_1499694509796098048_n.jpg", "image": "images/BY6B8z5lR1F.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1601530617317009166", @@ -62,7 +62,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/3bc6679049dad0943ec35fddeceded1c/5B5A3CC6/t51.2885-15/e35/21436024_558002044536606_410562662628327424_n.jpg", "image": "images/BY5x5x2F6cO.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1565766376903475329", @@ -75,7 +75,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f6a2224e3d487077d05236e18fc3f828/5B534A95/t51.2885-15/e35/20213921_501593333518668_2100867941279989760_n.jpg", "image": "images/BW6uDlYlQCB.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1515268510112420213", @@ -88,7 +88,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/d18ce4068dfa63b549ac14094bb97fdb/5B5E1699/t51.2885-15/e35/18513840_1901390483461632_2937117302379773952_n.jpg", "image": "images/BUHUK6ElhF1.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1486495736706552111", @@ -101,7 +101,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9ad5a7f1ebead61388662f1e6824067f/5B592AA0/t51.2885-15/e35/17663748_1153852971404500_7070241507587915776_n.jpg", "image": "images/BShF_8qhtEv.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1483463111452464830", @@ -114,7 +114,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/407a3c9b5efdb77c0f77135cccb08612/5B69631A/t51.2885-15/e35/17662854_1280815928623035_937926441180332032_n.jpg", "image": "images/BSWUdcThRa-.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1478435327902728655", @@ -127,7 +127,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/4ed741dd0c523a7bebce11a760271b77/5B4EF4B9/t51.2885-15/e35/17494792_1133907666737199_1768011540662845440_n.jpg", "image": "images/BSEdRj_B8HP.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1360516742464695325", @@ -140,7 +140,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/987105bfff21fd4e32ae59cbbfc32ad7/5B69748B/t51.2885-15/e35/14693758_1766411793613440_7185291805863182336_n.jpg", "image": "images/BLhhsTZlGwd.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1346779149175505545", @@ -153,7 +153,7 @@ "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/7aac4ca6f8724c7f17d3750f2f91f76e/5B6D1AB8/t51.2885-15/e35/14360137_1696760950649699_2816603071264587776_n.jpg", "image": "images/BKwuIApgkKJ.jpg", "username": "kyle__mathews", - "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com" + "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83" }, { "id": "1270677182602272387", diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js index d83e776998a7b..540c0f1e43d1a 100644 --- a/examples/gatsbygram/gatsby-config.js +++ b/examples/gatsbygram/gatsby-config.js @@ -29,6 +29,7 @@ module.exports = { // images with the NPM package “sharp”. It's used by // several other plugins. `gatsby-plugin-sharp`, + `gatsby-plugin-image`, // This plugin identifies file nodes that are images and // transforms these to create new “ImageSharp” nodes. // With them you can resize images and diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js deleted file mode 100644 index 5093791d7603e..0000000000000 --- a/examples/gatsbygram/gatsby-node.js +++ /dev/null @@ -1,63 +0,0 @@ -const path = require(`path`) -const slug = require(`slug`) -const { slash } = require(`gatsby-core-utils`) - -// Implement the Gatsby API “createPages”. This is -// called after the Gatsby bootstrap is finished so you have -// access to any information necessary to programmatically -// create pages. -exports.createPages = async ({ graphql, actions, reporter }) => { - const { createPage } = actions - - // The “graphql” function allows us to run arbitrary - // queries against this Gatsbygram's graphql schema. Think of - // it like Gatsbygram has a built-in database constructed - // from static data that you can run queries against. - // - // Post is a data node type derived from data/posts.json - // which is created when scraping Instagram. “allPostsJson” - // is a "connection" (a GraphQL convention for accessing - // a list of nodes) gives us an easy way to query all - // Post nodes. - const result = await graphql( - ` - { - allPostsJson(limit: 1000) { - edges { - node { - id - } - } - } - } - ` - ) - - if (result.errors) { - reporter.panicOnBuild(`Error while running GraphQL query.`) - return - } - - // Create image post pages. - const postTemplate = path.resolve(`src/templates/post-page.js`) - // We want to create a detailed page for each - // Instagram post. Since the scraped Instagram data - // already includes an ID field, we just use that for - // each page's path. - result.data.allPostsJson.edges.forEach(edge => { - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/${slug(edge.node.id)}/`, - component: slash(postTemplate), - context: { - id: edge.node.id, - }, - }) - }) -} diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json index 0af16fab6a5b4..0710c725be7c7 100644 --- a/examples/gatsbygram/package.json +++ b/examples/gatsbygram/package.json @@ -5,12 +5,12 @@ "version": "1.0.0", "author": "Kyle Mathews ", "dependencies": { - "core-js": "^2.6.11", "gatsby": "next", "gatsby-core-utils": "next", "gatsby-image": "next", "gatsby-plugin-glamor": "next", "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-image": "^1.5.0", "gatsby-plugin-manifest": "next", "gatsby-plugin-offline": "next", "gatsby-plugin-sharp": "next", @@ -25,15 +25,14 @@ "mousetrap": "^1.6.5", "progress": "^2.0.3", "prop-types": "^15.7.2", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-gravatar": "^2.6.3", - "react-icons": "^2.2.7", + "react-icons": "2", "react-modal": "^3.11.2", "react-typography": "^0.16.19", "request": "^2.88.2", - "slug": "^0.9.4", - "typeface-space-mono": "0.0.71", + "typeface-space-mono": "1.1.13", "typography": "^0.16.19" }, "keywords": [ @@ -57,4 +56,4 @@ "gatsby-cypress": "^0.4.10", "start-server-and-test": "^1.11.3" } -} \ No newline at end of file +} diff --git a/examples/gatsbygram/src/components/Avatar.js b/examples/gatsbygram/src/components/Avatar.js index 5c8a84c6374a0..112bfd6539902 100644 --- a/examples/gatsbygram/src/components/Avatar.js +++ b/examples/gatsbygram/src/components/Avatar.js @@ -2,6 +2,7 @@ import * as PropTypes from "prop-types" import React from "react" import { rhythm } from "../utils/typography" import { graphql } from "gatsby" +import { StaticImage } from "gatsby-plugin-image" const propTypes = { user: PropTypes.shape({ @@ -12,8 +13,10 @@ const propTypes = { function Avatar({ user }) { return ( - {user.username} push(`/`)} + onRequestClose={() => navigate(`/`)} style={{ overlay: { position: `fixed`, @@ -123,7 +123,7 @@ class GatsbyGramModal extends React.Component { contentLabel="Modal" >
push(`/`)} + onClick={() => navigate(`/`)} css={{ display: `flex`, position: `relative`, @@ -164,7 +164,7 @@ class GatsbyGramModal extends React.Component {
push(`/`)} + onClick={() => navigate(`/`)} css={{ cursor: `pointer`, color: `rgba(255,255,255,0.8)`, diff --git a/examples/gatsbygram/src/templates/post-page.js b/examples/gatsbygram/src/pages/{PostsJson.id}.js similarity index 100% rename from examples/gatsbygram/src/templates/post-page.js rename to examples/gatsbygram/src/pages/{PostsJson.id}.js diff --git a/examples/using-contentful/gatsby-node.js b/examples/using-contentful/gatsby-node.js deleted file mode 100644 index 3fd5116a9327f..0000000000000 --- a/examples/using-contentful/gatsby-node.js +++ /dev/null @@ -1,97 +0,0 @@ -const path = require(`path`) -const { slash } = require(`gatsby-core-utils`) - -// Implement the Gatsby API “createPages”. This is -// called after the Gatsby bootstrap is finished so you have -// access to any information necessary to programmatically -// create pages. -exports.createPages = async ({ graphql, actions }) => { - const { createPage } = actions - // The “graphql” function allows us to run arbitrary - // queries against the local Contentful graphql schema. Think of - // it like the site has a built-in database constructed - // from the fetched data that you can run queries against. - const pageResult = await graphql( - ` - { - allContentfulProduct(limit: 1000) { - edges { - node { - id - } - } - } - } - ` - ) - - if (pageResult.errors) { - throw pageResult.errors - } - - // Create Product pages - const productTemplate = path.resolve(`./src/templates/product.js`) - - // We want to create a detailed page for each - // product node. We'll just use the Contentful id for the slug. - await Promise.all( - pageResult.data.allContentfulProduct.edges.map(edge => - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/products/${edge.node.id}/`, - component: slash(productTemplate), - context: { - id: edge.node.id, - }, - }) - ) - ) - - const categoryResult = await graphql( - ` - { - allContentfulCategory(limit: 1000) { - edges { - node { - id - } - } - } - } - ` - ) - - if (categoryResult.errors) { - throw categoryResult.errors - } - - // Create Category pages - const categoryTemplate = path.resolve(`./src/templates/category.js`) - - // We want to create a detailed page for each - // category node. We'll just use the Contentful id for the slug. - return Promise.all( - categoryResult.data.allContentfulCategory.edges.map(edge => - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/categories/${edge.node.id}/`, - component: slash(categoryTemplate), - context: { - id: edge.node.id, - }, - }) - ) - ) -} diff --git a/examples/using-contentful/src/templates/category.js b/examples/using-contentful/src/pages/categories/{ContentfulCategory.id}.js similarity index 87% rename from examples/using-contentful/src/templates/category.js rename to examples/using-contentful/src/pages/categories/{ContentfulCategory.id}.js index ae9a63d246565..1505b6d3b9136 100644 --- a/examples/using-contentful/src/templates/category.js +++ b/examples/using-contentful/src/pages/categories/{ContentfulCategory.id}.js @@ -4,8 +4,8 @@ import * as PropTypes from "prop-types" import { Link, graphql } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" -import Layout from "../layouts" -import { rhythm } from "../utils/typography" +import Layout from "../../layouts" +import { rhythm } from "../../utils/typography" const propTypes = { data: PropTypes.object.isRequired, @@ -45,9 +45,7 @@ class CategoryTemplate extends React.Component { {product && product.map((p, i) => (
  • - - {p.productName.productName} - + {p.productName.productName}
    • ))} @@ -71,6 +69,7 @@ export const pageQuery = graphql` gatsbyImageData(layout: FIXED, width: 75) } product { + gatsbyPath(filePath: "/products/{ContentfulProduct.id}") id productName { productName diff --git a/examples/using-contentful/src/pages/index.js b/examples/using-contentful/src/pages/index.js index 4b3c371714bf7..3f9ef900e998c 100644 --- a/examples/using-contentful/src/pages/index.js +++ b/examples/using-contentful/src/pages/index.js @@ -15,7 +15,7 @@ const Product = ({ node }) => (
    {categories.map((category, i) => (
  • - + {category.title.title}
    • @@ -91,6 +91,7 @@ export const pageQuery = graphql` } categories { id + gatsbyPath(filePath: "/categories/{ContentfulCategory.id}") title { title } diff --git a/examples/using-drupal/.gitignore b/examples/using-drupal/.gitignore new file mode 100644 index 0000000000000..84df6c9f6d3fb --- /dev/null +++ b/examples/using-drupal/.gitignore @@ -0,0 +1,5 @@ +public +.cache +node_modules +cypress/videos/ +cypress/screenshots/ diff --git a/examples/using-drupal/gatsby-config.js b/examples/using-drupal/gatsby-config.js index cae0ee679d15e..6994c5410cc1d 100644 --- a/examples/using-drupal/gatsby-config.js +++ b/examples/using-drupal/gatsby-config.js @@ -6,8 +6,8 @@ module.exports = { { resolve: `gatsby-source-drupal`, options: { - baseUrl: `https://using-drupal.amazee.io/`, - apiBase: `jsonapi`, + baseUrl: `https://live-contentacms.pantheonsite.io/`, + apiBase: `api`, }, }, { diff --git a/examples/using-drupal/gatsby-node.js b/examples/using-drupal/gatsby-node.js deleted file mode 100644 index c3136f01bdc0f..0000000000000 --- a/examples/using-drupal/gatsby-node.js +++ /dev/null @@ -1,54 +0,0 @@ -const path = require(`path`) - -// Create a slug for each recipe and set it as a field on the node. -exports.onCreateNode = ({ node, getNode, actions }) => { - const { createNodeField } = actions - if (node.internal.type === `node__recipe`) { - const slug = `/recipes/${node.drupal_internal__nid}/` - createNodeField({ - node, - name: `slug`, - value: slug, - }) - } -} - -// Implement the Gatsby API “createPages”. This is called once the -// data layer is bootstrapped to let plugins create pages from data. -exports.createPages = ({ actions, graphql }) => { - const { createPage } = actions - - const recipeTemplate = path.resolve(`src/templates/recipe.js`) - // Query for recipe nodes to use in creating pages. - return graphql( - ` - { - recipes: allNodeRecipe { - edges { - node { - internalId: drupal_internal__nid - fields { - slug - } - } - } - } - } - ` - ).then(result => { - if (result.errors) { - throw result.errors - } - - // Create pages for each recipe. - result.data.recipes.edges.forEach(({ node }) => { - createPage({ - path: node.fields.slug, - component: recipeTemplate, - context: { - slug: node.fields.slug, - }, - }) - }) - }) -} diff --git a/examples/using-drupal/package.json b/examples/using-drupal/package.json index cd1d9b3286a31..ece1038ff4ee0 100644 --- a/examples/using-drupal/package.json +++ b/examples/using-drupal/package.json @@ -17,11 +17,10 @@ "glamor": "^2.20.40", "gray-percentage": "^2.0.0", "lodash": "^4.17.20", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-icons": "^2.2.7", "react-typography": "^0.16.19", - "slash": "^1.0.0", "typeface-josefin-sans": "^0.0.75", "typeface-josefin-slab": "^0.0.72", "typeface-rochester": "^0.0.72", @@ -38,4 +37,4 @@ "build": "gatsby build", "start": "npm run develop" } -} \ No newline at end of file +} diff --git a/examples/using-drupal/src/pages/index.js b/examples/using-drupal/src/pages/index.js index 81a0274071556..7ea60864e929f 100644 --- a/examples/using-drupal/src/pages/index.js +++ b/examples/using-drupal/src/pages/index.js @@ -21,7 +21,7 @@ class IndexPage extends React.Component { const FirstPromoted = ({ recipe }) => ( {recipe.title}
    ) @@ -64,7 +67,7 @@ class IndexPage extends React.Component { marginBottom = rhythm(1 / 2), }) => (
    @@ -124,7 +131,7 @@ class IndexPage extends React.Component { square={true} columns={4} marginBottom={0} - key={recipe.fields.slug} + key={recipe.gatsbyPath} /> ))}
    @@ -183,7 +190,7 @@ class IndexPage extends React.Component { ))}
    @@ -213,19 +220,21 @@ export default IndexPage export const pageQuery = graphql` query { - topRecipe: allNodeRecipe(sort: { fields: [created] }, limit: 1) { + topRecipe: allRecipes(sort: { fields: [createdAt] }, limit: 1) { edges { node { title - fields { - slug - } + gatsbyPath(filePath: "/{Recipes.title}") relationships { - image: field_image { - localFile { - childImageSharp { - fluid(maxWidth: 740, maxHeight: 555) { - ...GatsbyImageSharpFluid + image { + relationships { + imageFile { + localFile { + childImageSharp { + fluid(maxWidth: 740, maxHeight: 555) { + ...GatsbyImageSharpFluid + } + } } } } @@ -234,26 +243,28 @@ export const pageQuery = graphql` } } } - nextTwoPromotedRecipes: allNodeRecipe( - sort: { fields: [created] } + nextTwoPromotedRecipes: allRecipes( + sort: { fields: [createdAt] } limit: 2 skip: 1 ) { edges { node { title - fields { - slug - } + gatsbyPath(filePath: "/{Recipes.title}") relationships { - category: field_recipe_category { + category { name } - image: field_image { - localFile { - childImageSharp { - fluid(maxWidth: 240, maxHeight: 240) { - ...GatsbyImageSharpFluid + image { + relationships { + imageFile { + localFile { + childImageSharp { + fluid(maxWidth: 240, maxHeight: 240) { + ...GatsbyImageSharpFluid + } + } } } } @@ -262,26 +273,29 @@ export const pageQuery = graphql` } } } - nextFourPromotedRecipes: allNodeRecipe( - sort: { fields: [created] } + nextFourPromotedRecipes: allRecipes( + sort: { fields: [createdAt] } limit: 4 skip: 3 ) { edges { node { + id title - fields { - slug - } + gatsbyPath(filePath: "/{Recipes.title}") relationships { - category: field_recipe_category { + category { name } - image: field_image { - localFile { - childImageSharp { - fluid(maxWidth: 475, maxHeight: 475) { - ...GatsbyImageSharpFluid + image { + relationships { + imageFile { + localFile { + childImageSharp { + fluid(maxWidth: 475, maxHeight: 475) { + ...GatsbyImageSharpFluid + } + } } } } diff --git a/examples/using-drupal/src/pages/recipes.js b/examples/using-drupal/src/pages/recipes.js index f4c29fae1ea50..ce53bc0ada115 100644 --- a/examples/using-drupal/src/pages/recipes.js +++ b/examples/using-drupal/src/pages/recipes.js @@ -10,8 +10,8 @@ const Recipes = ({ data }) => (

    Recipes

      {data.recipes.edges.map(({ node }) => ( -
    • - {node.title} +
    • + {node.title}
      • ))}
    @@ -23,13 +23,11 @@ export default Recipes export const query = graphql` query { - recipes: allNodeRecipe(limit: 1000) { + recipes: allRecipes(limit: 1000) { edges { node { title - fields { - slug - } + gatsbyPath(filePath: "/{Recipes.title}") } } } diff --git a/examples/using-drupal/src/templates/recipe.js b/examples/using-drupal/src/pages/{Recipes.title}.js similarity index 77% rename from examples/using-drupal/src/templates/recipe.js rename to examples/using-drupal/src/pages/{Recipes.title}.js index ed9e1c32f380f..f7327868f0725 100644 --- a/examples/using-drupal/src/templates/recipe.js +++ b/examples/using-drupal/src/pages/{Recipes.title}.js @@ -32,7 +32,8 @@ const RecipeTemplate = ({ data }) => (
    @@ -66,9 +67,9 @@ const RecipeTemplate = ({ data }) => (

    Method

      - {data.recipe.instructions.text && - data.recipe.instructions.text - .split(`,`) + {data.recipe.instructions && + data.recipe.instructions + .split(`.,`) .map(i =>
    • {i}
      • )}
    @@ -82,25 +83,27 @@ const RecipeTemplate = ({ data }) => ( export default RecipeTemplate export const query = graphql` - query($slug: String!) { - recipe: nodeRecipe(fields: { slug: { eq: $slug } }) { + query($id: String!) { + recipe: recipes(id: { eq: $id }) { title - preparationTime: field_preparation_time - difficulty: field_difficulty - totalTime: field_cooking_time - ingredients: field_ingredients - instructions: field_recipe_instruction { - text: processed - } + preparationTime + difficulty + totalTime + ingredients + instructions relationships { - category: field_recipe_category { + category { name } - image: field_image { - localFile { - childImageSharp { - fluid(maxWidth: 470, maxHeight: 353) { - ...GatsbyImageSharpFluid + image { + relationships { + imageFile { + localFile { + childImageSharp { + fluid(maxWidth: 470, maxHeight: 353) { + ...GatsbyImageSharpFluid + } + } } } }