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>