feat: Gatsby v4

.github/workflows/release.yml

@@ -10,11 +10,11 @@ jobs:
  runs-on: ubuntu-18.04
  steps:
  - name: Checkout
- uses: actions/checkout@v1
+ uses: actions/checkout@v2
  - name: Setup Node.js
  uses: actions/setup-node@v1
  with:
- node-version: 12
+ node-version: 14
  - name: Install dependencies
  run: yarn
  - name: Build

demo/.nvmrc

@@ -0,0 +1 @@
+14.15

demo/graphcms-fragments/Asset.graphql

@@ -11,11 +11,40 @@ fragment Asset on Asset {
  width
  size
  mimeType
+ createdBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ updatedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ publishedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
  productImages {
  ... on Product {
  remoteTypeName: __typename
  remoteId: id
  locale
+ stage
+ }
+ }
+ scheduledIn {
+ ... on ScheduledOperation {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
  }
  }
  url

demo/graphcms-fragments/Category.graphql

@@ -6,11 +6,40 @@ fragment Category on Category {
  updatedAt(variation: COMBINED)
  publishedAt(variation: COMBINED)
  name
+ createdBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ updatedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ publishedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
  products {
  ... on Product {
  remoteTypeName: __typename
  remoteId: id
  locale
+ stage
+ }
+ }
+ scheduledIn {
+ ... on ScheduledOperation {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
  }
  }
 }

demo/graphcms-fragments/Product.graphql

@@ -8,26 +8,77 @@ fragment Product on Product {
  name
  slug
  description {
- ... on RichText {
+ ... on ProductDescriptionRichText {
  raw
+ json
  html
  markdown
  text
+ references {
+ ... on Asset {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ ... on Category {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ ... on Product {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ }
  }
  }
  price
+ createdBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ updatedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ publishedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
  images {
  ... on Asset {
  remoteTypeName: __typename
  remoteId: id
  locale
+ stage
  }
  }
  categories {
  ... on Category {
  remoteTypeName: __typename
  remoteId: id
  locale
+ stage
+ }
+ }
+ scheduledIn {
+ ... on ScheduledOperation {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
  }
  }
 }

demo/graphcms-fragments/ScheduledOperation.graphql

@@ -0,0 +1,59 @@
+fragment ScheduledOperation on ScheduledOperation {
+ stage
+ remoteId: id
+ createdAt
+ updatedAt
+ publishedAt
+ description
+ errorMessage
+ rawPayload
+ createdBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ updatedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ publishedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ release {
+ ... on ScheduledRelease {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ status
+ affectedDocuments {
+ ... on Asset {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ ... on Category {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ ... on Product {
+ remoteTypeName: __typename
+ remoteId: id
+ locale
+ stage
+ }
+ }
+}

demo/graphcms-fragments/ScheduledRelease.graphql

@@ -0,0 +1,42 @@
+fragment ScheduledRelease on ScheduledRelease {
+ stage
+ remoteId: id
+ createdAt
+ updatedAt
+ publishedAt
+ title
+ description
+ errorMessage
+ isActive
+ isImplicit
+ releaseAt
+ createdBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ updatedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ publishedBy {
+ ... on User {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ operations {
+ ... on ScheduledOperation {
+ remoteTypeName: __typename
+ remoteId: id
+ stage
+ }
+ }
+ status
+}

demo/graphcms-fragments/User.graphql

@@ -6,6 +6,6 @@ fragment User on User {
  publishedAt
  name
  picture
- kind
  isActive
+ kind
 }

demo/package.json

@@ -6,23 +6,24 @@
  "build": "gatsby build",
  "clean": "gatsby clean",
  "preinstall": "cd ../gatsby-source-graphcms && yarn build",
- "dev": "gatsby develop"
+ "dev": "gatsby develop",
+ "serve": "gatsby serve"
  },
  "dependencies": {
  "@mdx-js/mdx": "1.6.22",
  "@mdx-js/react": "1.6.22",
- "gatsby": "3.4.1",
- "gatsby-plugin-image": "1.4.0",
- "gatsby-plugin-mdx": "2.4.0",
- "gatsby-plugin-postcss": "4.4.0",
- "gatsby-plugin-sharp": "3.4.1",
+ "gatsby": "4.4.0",
+ "gatsby-plugin-image": "2.4.0",
+ "gatsby-plugin-mdx": "3.4.0",
+ "gatsby-plugin-postcss": "5.4.0",
+ "gatsby-plugin-sharp": "4.4.0",
  "gatsby-source-graphcms": "2.0.0",
  "react": "17.0.2",
  "react-dom": "17.0.2"
  },
  "devDependencies": {
- "babel-preset-gatsby": "1.4.0",
- "postcss-preset-env": "6.7.0",
- "tailwindcss": "1.9.6"
+ "babel-preset-gatsby": "^2.4.0",
+ "postcss-preset-env": "7.2.0",
+ "tailwindcss": "3.0.12"
  }
 }

demo/postcss.config.js

@@ -1,3 +1,6 @@
 module.exports = {
- plugins: [require('postcss-preset-env'), require('tailwindcss')],
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
 }

demo/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
- purge: [
+ content: [
  './src/components/**/*.js',
  './src/pages/**/*.js',
  './src/templates/**/*.js',

gatsby-source-graphcms/.babelrc

@@ -9,8 +9,6 @@
  }
  ]
  ],
- "plugins": [
- "@babel/plugin-transform-runtime"
- ],
+ "plugins": ["@babel/plugin-transform-runtime"],
  "only": ["src/", "test/"]
-}
+}

gatsby-source-graphcms/README.md

@@ -28,6 +28,8 @@
 yarn add gatsby-source-graphcms gatsby-plugin-image
 ```
 
+> Note: Gatsby v4 requires Node.js >= 14.15.
+
 ## Configuration
 
 > We recommend using environment variables with your GraphCMS `token` and `endpoint` values. You can learn more about using environment variables with Gatsby [here](https://www.gatsbyjs.org/docs/environment-variables).
@@ -257,6 +259,8 @@ module.exports = {
 
 Enabling this option adds a `markdownNode` nested field to all `RichText` fields on the generated Gatsby schema.
 
+You will need to rebuild your `graphcms-fragments` if you enable embeds on a Rich Text field, or you add/remove additional fields to your GraphCMS schema.
+
 #### Usage with `gatsby-plugin-mdx`
 
 These newly built nodes can be used with [`gatsby-plugin-mdx`](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx) to render markdown from GraphCMS.
@@ -372,3 +376,12 @@ If it's already included, make sure you have your ENV variable added to `.env`,
 This error occurs most likely if your token doesn't have access to the `PUBLISHED` content stage. Configure your token to also access `PUBLISHED`, or specify `stages: ["DRAFT"]` to the options inside `gatsby-config.js`.
 
 </details>
+
+<details>
+ <summary>Bad request</summary>
+
+You may need to rebuild your fragments folder when making schema changes. If you change the type of a field, or add/remove any from an existing model you have fragments for, the plugin cannot query for this.
+
+Simply delete the `graphcms-fragments` (or whatever you named it), and run `gatsby develop` to regenerate.
+
+</details>