fix(gatsby-plugin-page-creator): update pages when nodes change (#36623)

Co-authored-by: Lennart <[email protected]>
Co-authored-by: tyhopp <[email protected]>

Author: 3 people

e2e-tests/development-runtime/cypress/integration/unified-routing/collection-routing.js

@@ -1,15 +1,51 @@
-describe(`collection-routing`, () => {
-  beforeEach(() => {
-    cy.visit(`/collection-routing`).waitForRouteChange()
+const prefixes = [``, `child-`, `computed-`, `child-computed-`]
+
+function assert404(slug) {
+  for (const prefix of prefixes) {
+    cy.visit(`/collection-routing/mutations/${prefix}${slug}/`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    // page doesn't exist yet
+    cy.get(`h1`).invoke(`text`).should(`eq`, `Gatsby.js development 404 page`)
+  }
+}
+
+function assertPageExist(slug, content) {
+  for (const prefix of prefixes) {
+    cy.visit(
+      `/collection-routing/mutations/${prefix}${slug}/`
+    ).waitForRouteChange()
+    cy.contains(content)
+  }
+}
+
+function refresh(setup) {
+  cy.then(() => {
+    return fetch(
+      `http://localhost:8000/__refresh/gatsby-source-fs-route-mutations`,
+      {
+        method: `POST`,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ setup }),
+      }
+    )
   })
 
+  cy.wait(5000)
+}
+
+describe(`collection-routing`, () => {
   it(`can create simplest collection route that also has a number as an identifier`, () => {
     cy.visit(`/collection-routing/1/`).waitForRouteChange()
     cy.findByTestId(`slug`).should(`have.text`, `/preview/1`)
     cy.findByTestId(`pagecontext`).should(`have.text`, `1`)
   })
 
   it(`can navigate to a collection route and see its content rendered`, () => {
+    cy.visit(`/collection-routing`).waitForRouteChange()
     // this test depends on the alphabetical sorting of markdown files
     cy.findByTestId(`collection-routing-blog-0`)
       .should(`have.attr`, `data-testslug`, `/2018-12-14-hello-world/`)
@@ -24,6 +60,7 @@ describe(`collection-routing`, () => {
   })
 
   it(`can navigate to a collection route that uses unions and see its content rendered`, () => {
+    cy.visit(`/collection-routing`).waitForRouteChange()
     // this test depends on the alphabetical sorting of image files
     cy.findByTestId(`collection-routing-image-0`)
       .should(`have.attr`, `data-testimagename`, `citrus-fruits`)
@@ -61,4 +98,49 @@ describe(`collection-routing`, () => {
     cy.findByTestId(`title`)
     cy.should(`have.text`, `Named SPLAT Nested with Collection Route!`)
   })
+
+  describe(`data updates`, () => {
+    before(() => {
+      refresh(`reset`)
+    })
+    after(() => {
+      refresh(`reset`)
+    })
+
+    it(`creates a page when new node is created`, () => {
+      assert404(`new-node`)
+      assert404(`updated-node`)
+
+      refresh(`create`)
+
+      assertPageExist(`new-node`, `This is node that was just created`)
+      assert404(`updated-node`)
+    })
+
+    it(`remove previous page and add a new one when slug changes`, () => {
+      assertPageExist(`new-node`, `This is node that was just created`)
+      assert404(`updated-node`)
+
+      refresh(`update`)
+
+      assertPageExist(
+        `updated-node`,
+        `This is node that had slug and content updated`
+      )
+      assert404(`new-node`)
+    })
+
+    it(`remove a page when node is deleted`, () => {
+      assertPageExist(
+        `updated-node`,
+        `This is node that had slug and content updated`
+      )
+      assert404(`new-node`)
+
+      refresh(`delete`)
+
+      assert404(`new-node`)
+      assert404(`updated-node`)
+    })
+  })
 })

e2e-tests/development-runtime/gatsby-config.js

@@ -37,6 +37,7 @@ module.exports = {
     `gatsby-source-fake-data`,
     `gatsby-source-pinc-data`,
     `gatsby-source-query-on-demand-data`,
+    `gatsby-source-fs-route-mutations`,
     `gatsby-browser-tsx`,
     `gatsby-node-typegen`,
     `gatsby-transformer-sharp`,

e2e-tests/development-runtime/plugins/gatsby-source-fs-route-mutations/gatsby-node.ts

@@ -0,0 +1,107 @@
+import { GatsbyNode } from "gatsby"
+
+let createdNodes = new Set<string>()
+
+export const sourceNodes: GatsbyNode["sourceNodes"] = ({
+  actions,
+  webhookBody,
+  getNode,
+  createContentDigest,
+  reporter,
+}) => {
+  const handledNodes = new Set(createdNodes)
+  function addNode(data: { id: string; slug: string; content: string }): void {
+    const node = {
+      ...data,
+      parent: null,
+      children: [],
+      internal: {
+        type: `FilesystemRoutesMutation`,
+        contentDigest: createContentDigest(data),
+      },
+    }
+
+    createdNodes.add(node.id)
+    handledNodes.delete(node.id)
+
+    actions.createNode(node)
+
+    const childNode = {
+      ...data,
+      id: `${node.id} << childNode`,
+      parent: node.id,
+      internal: {
+        type: `FilesystemRoutesMutationChild`,
+        contentDigest: node.internal.contentDigest,
+      },
+    }
+    actions.createNode(childNode)
+    const parent = getNode(node.id)
+
+    if (!parent) {
+      throw new Error(`Could not find parent node`)
+    }
+
+    actions.createParentChildLink({
+      parent: parent,
+      child: childNode,
+    })
+  }
+
+  if (webhookBody?.setup === `create`) {
+    reporter.verbose(`[gatsby-source-fs-route-mutation] create a new node`)
+    addNode({
+      id: `fs-route-mutation-test`,
+      slug: `new-node`,
+      content: `This is node that was just created`,
+    })
+  } else if (webhookBody?.setup === `update`) {
+    reporter.verbose(`[gatsby-source-fs-route-mutation] update a node`)
+    addNode({
+      id: `fs-route-mutation-test`,
+      slug: `updated-node`,
+      content: `This is node that had slug and content updated`,
+    })
+  } else if (webhookBody?.setup === `delete`) {
+    reporter.verbose(`[gatsby-source-fs-route-mutation] delete a node`)
+  } else {
+    reporter.verbose(`[gatsby-source-fs-route-mutation] initial setup`)
+  }
+
+  addNode({
+    id: `fs-route-mutation-stable`,
+    slug: `stable`,
+    content: `This is stable node`,
+  })
+
+  for (const nodeIdToDelete of handledNodes) {
+    const nodeToDelete = getNode(nodeIdToDelete)
+    if (nodeToDelete) {
+      createdNodes.delete(nodeIdToDelete)
+      actions.deleteNode(nodeToDelete)
+    }
+  }
+}
+
+export const createResolvers: GatsbyNode["createResolvers"] = ({
+  createResolvers,
+}) => {
+  createResolvers({
+    FilesystemRoutesMutation: {
+      computed: {
+        type: `String`,
+        resolve(source: { slug?: string }): string {
+          return `computed-${source.slug}`
+        },
+      },
+    },
+    FilesystemRoutesMutationChild: {
+      computed: {
+        type: `String`,
+        resolve(source: { slug?: string }): string {
+          return `computed-${source.slug}`
+        },
+      },
+    },
+  })
+}

e2e-tests/development-runtime/plugins/gatsby-source-fs-route-mutations/index.js

@@ -0,0 +1 @@
+// noop

e2e-tests/development-runtime/plugins/gatsby-source-fs-route-mutations/package.json

@@ -0,0 +1 @@
+{}

e2e-tests/development-runtime/src/pages/collection-routing/mutations/child-{FilesystemRoutesMutationChild.computed}.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function FSRoutesMutationTemplate({ data }) {
+  return (
+    <>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </>
+  )
+}
+
+export const query = graphql`
+  query($id: String!) {
+    filesystemRoutesMutationChild(id: { eq: $id }) {
+      content
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/collection-routing/mutations/child-{FilesystemRoutesMutationChild.slug}.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function FSRoutesMutationTemplate({ data }) {
+  return (
+    <>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </>
+  )
+}
+
+export const query = graphql`
+  query($id: String!) {
+    filesystemRoutesMutationChild(id: { eq: $id }) {
+      content
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/collection-routing/mutations/{FilesystemRoutesMutation.computed}.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function FSRoutesMutationTemplate({ data }) {
+  return (
+    <>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </>
+  )
+}
+
+export const query = graphql`
+  query($id: String!) {
+    filesystemRoutesMutation(id: { eq: $id }) {
+      content
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/collection-routing/mutations/{FilesystemRoutesMutation.slug}.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function FSRoutesMutationTemplate({ data }) {
+  return (
+    <>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </>
+  )
+}
+
+export const query = graphql`
+  query($id: String!) {
+    filesystemRoutesMutation(id: { eq: $id }) {
+      content
+    }
+  }
+`

packages/gatsby-plugin-page-creator/src/__tests__/extract-query.ts

@@ -223,6 +223,18 @@ describe(`extract query`, () => {
       )
     })
   })
+
+  it(`supports limiting collection query to specified node ids if provided`, () => {
+    expect(
+      generateQueryFromString(
+        `Thing`,
+        compatiblePath(`/foo/bar/{Thing.id}/{Thing.fields__name}.js`),
+        [`id-1`, `id-2`]
+      )
+    ).toMatchInlineSnapshot(
+      `"{allThing(filter: { id: { in: [\\"id-1\\",\\"id-2\\"] } }){nodes{id,fields{name},internal{contentFilePath}}}}"`
+    )
+  })
 })
 
 describe(`reverseLookupParams`, () => {

packages/gatsby-plugin-page-creator/src/collection-extract-query-string.ts

@@ -7,7 +7,8 @@ import { CODES, prefixId } from "./error-utils"
 // This Function opens up the actual collection file and extracts the queryString used in the
 export function collectionExtractQueryString(
   absolutePath: string,
-  reporter: Reporter
+  reporter: Reporter,
+  nodeIds?: Array<string>
 ): string | null {
   let queryString: string | null = null
 
@@ -38,7 +39,7 @@ export function collectionExtractQueryString(
 
   // 3  This is important, we get the model or query, but we have to create a real graphql
   //    query from it. This generateQueryFromString call does all of that magic
-  queryString = generateQueryFromString(modelType, absolutePath)
+  queryString = generateQueryFromString(modelType, absolutePath, nodeIds)
 
   return queryString
 }

packages/gatsby-plugin-page-creator/src/create-page-wrapper.ts

@@ -29,6 +29,7 @@ export function createPage(
   graphql: CreatePagesArgs["graphql"],
   reporter: Reporter,
   trailingSlash: TrailingSlash,
+  pagesPath: string,
   ignore?: IPathIgnoreOptions | string | Array<string> | null,
   slugifyOptions?: ISlugifyOptions
 ): void {
@@ -48,15 +49,16 @@ export function createPage(
   // If the page includes a `{}` in it, then we create it as a collection builder
   if (pathIsCollectionBuilder(absolutePath)) {
     trackFeatureIsUsed(`UnifiedRoutes:collection-page-builder`)
-    createPagesFromCollectionBuilder(
+    createPagesFromCollectionBuilder({
       filePath,
       absolutePath,
+      pagesPath,
       actions,
       graphql,
       reporter,
       trailingSlash,
-      slugifyOptions
-    )
+      slugifyOptions,
+    })
     return
   }