feat: Save generated query fragments

demo/graphcms-fragments/Asset.graphql

@@ -0,0 +1,18 @@
+fragment Asset on Asset {
+  stage
+  locale
+  remoteId: id
+  handle
+  fileName
+  height
+  width
+  size
+  mimeType
+  productImages {
+    ... on Product {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+  url
+}

demo/graphcms-fragments/Product.graphql

@@ -0,0 +1,30 @@
+fragment Product on Product {
+  stage
+  remoteId: id
+  createdAt
+  updatedAt
+  publishedAt
+  name
+  slug
+  description {
+    ... on RichText {
+      raw
+      html
+      markdown
+      text
+    }
+  }
+  price
+  images {
+    ... on Asset {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+  reviews {
+    ... on Review {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+}

demo/graphcms-fragments/Review.graphql

@@ -0,0 +1,15 @@
+fragment Review on Review {
+  stage
+  remoteId: id
+  createdAt
+  updatedAt
+  publishedAt
+  email
+  name
+  product {
+    ... on Product {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+}

gatsby-source-graphcms/README.md

@@ -69,6 +69,10 @@ module.exports = {
 
   - Build markdown nodes for all [`RichText`](https://graphcms.com/docs/reference/fields/rich-text) fields in your GraphCMS schema. [Learn more](#using-markdown-nodes).
 
+- `fragmentsPath` _String_ (default value: `graphcms-fragments`)
+
+  - The local project path where generated query fragments are saved. This is relative to your current working directory.
+
 ## Downloading local image assets
 
 This source plugin provides the option to download and cache GraphCMS assets in your Gatsby project. This enables you to use [`gatsby-image`](https://www.gatsbyjs.org/packages/gatsby-image), for image loading optimizations, with your GraphCMS image assets.

gatsby-source-graphcms/gatsby-node.js

@@ -1,8 +1,9 @@
 const crypto = require('crypto')
+const fs = require('fs')
 const {
   wrapQueryExecutorWithQueue,
   loadSchema,
-  generateDefaultFragments,
+  readOrGenerateDefaultFragments,
   compileNodeQueries,
   buildNodeDefinitions,
   createSchemaCustomization,
@@ -20,7 +21,10 @@ exports.onPreBootstrap = ({ reporter }, pluginOptions) => {
     )
 }
 
-const createSourcingConfig = async (gatsbyApi, { endpoint, token }) => {
+const createSourcingConfig = async (
+  gatsbyApi,
+  { endpoint, fragmentsPath = 'graphcms-fragments', token }
+) => {
   const execute = async ({ operationName, query, variables = {} }) => {
     return await fetch(endpoint, {
       method: 'POST',
@@ -61,7 +65,14 @@ const createSourcingConfig = async (gatsbyApi, { endpoint, token }) => {
     nodeQueryVariables: ({ id }) => ({ where: { id } }),
   }))
 
-  const fragments = generateDefaultFragments({ schema, gatsbyNodeTypes })
+  const fragmentsDir = `${process.cwd()}/${fragmentsPath}`
+
+  if (!fs.existsSync(fragmentsDir)) fs.mkdirSync(fragmentsDir)
+
+  const fragments = await readOrGenerateDefaultFragments(fragmentsDir, {
+    schema,
+    gatsbyNodeTypes,
+  })
 
   const documents = compileNodeQueries({
     schema,