feat(gatsby-source-wordpress): support multiple instances of plugin (#38119)

Author: ascorbic

integration-tests/gatsby-source-wordpress/__tests__/index.js

@@ -18,9 +18,7 @@ const {
   resetSchema,
 } = require(`../test-fns/test-utils/increment-remote-data`)
 
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("../test-fns/test-utils/graphql")
 
 jest.setTimeout(100000)
 

integration-tests/gatsby-source-wordpress/test-fns/data-resolution.js

@@ -2,9 +2,7 @@
  * @jest-environment node
  */
 
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 const { URL } = require("url")
 
 const gatsbyConfig = require("../gatsby-config")
@@ -340,8 +338,8 @@ describe(`data resolution`, () => {
       )
     )
 
-    expect(gatsbyResult.data.wpPage).toStrictEqual(wpGraphQLPageNormalizedPaths)
-    expect(gatsbyResult.data.wp.seo).toStrictEqual(WPGraphQLData.seo)
+    expect(gatsbyResult.data.wpPage).toEqual(wpGraphQLPageNormalizedPaths)
+    expect(gatsbyResult.data.wp.seo).toEqual(WPGraphQLData.seo)
   })
 
   it(`Does not download files whose size exceed the maxFileSizeBytes option`, async () => {

integration-tests/gatsby-source-wordpress/test-fns/filtered-type-defs.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 
 describe(`filtered type definitions`, () => {
   test(`Date field resolver is working`, async () => {

integration-tests/gatsby-source-wordpress/test-fns/gatsby-image.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 
 const execall = require("execall")
 

integration-tests/gatsby-source-wordpress/test-fns/integrity.js

@@ -2,9 +2,7 @@
  * @jest-environment node
  */
 
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 const { authedWPGQLRequest } = require("./test-utils/authed-wpgql-request")
 
 const sortBy = require("lodash/sortBy")

integration-tests/gatsby-source-wordpress/test-fns/plugin-options.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 
 describe(`plugin options`, () => {
   test(`Type.exclude option removes types from the schema`, async () => {

integration-tests/gatsby-source-wordpress/test-fns/static-file-transformation.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./test-utils/graphql")
 
 const isWarmCache = process.env.WARM_CACHE
 const testOnWarmCacheOnly = isWarmCache ? test : test.skip

integration-tests/gatsby-source-wordpress/test-fns/test-utils/authed-wpgql-request.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./graphql")
 
 exports.authedWPGQLRequest = async (query, { variables } = {}) => {
   if (!process.env.WPGRAPHQL_URL) {

integration-tests/gatsby-source-wordpress/test-fns/test-utils/graphql.js

@@ -0,0 +1,28 @@
+/**
+ *
+ * @param {Object} options
+ * @param {string} options.url
+ * @param {string} options.query
+ * @param {Object} options.variables
+ * @param {Object} options.headers
+ *
+ * @returns {Promise<Object>}
+ */
+exports.fetchGraphql = async ({ url, query, variables = {}, headers = {} }) => {
+  const response = await fetch(url, {
+    method: `POST`,
+    headers: {
+      "Content-Type": `application/json`,
+      ...headers,
+    },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  })
+  const data = await response.json()
+  if (data.errors) {
+    throw new Error(JSON.stringify(data.errors))
+  }
+  return data
+}

integration-tests/gatsby-source-wordpress/test-fns/test-utils/test-resolved-data.js

@@ -1,6 +1,4 @@
-const {
-  default: fetchGraphql,
-} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
+const { fetchGraphql } = require("./graphql")
 const { authedWPGQLRequest } = require("./authed-wpgql-request")
 
 const normalizeResponse = data =>

packages/gatsby-source-wordpress/__tests__/fetch-graphql.test.js

@@ -1,6 +1,10 @@
 import chalk from "chalk"
 import fetchGraphQL, { moduleHelpers } from "../dist/utils/fetch-graphql"
-import store from "../dist/store"
+import { getStore, createStore, asyncLocalStorage } from "../dist/store"
+
+const store = {store: createStore(), key: `test`}
+
+const withGlobalStore = (fn) => () =>  asyncLocalStorage.run(store, fn)
 
 jest.mock(`async-retry`, () => {
   return {
@@ -19,7 +23,8 @@ describe(`fetchGraphQL helper`, () => {
   let mock
   const panicMessages = []
 
-  beforeAll(() => {
+  beforeAll(withGlobalStore(() => {
+
     const sharedError = `Request failed with status code`
     try {
       mock = jest.spyOn(moduleHelpers, `getHttp`).mockImplementation(() => {
@@ -54,14 +59,14 @@ describe(`fetchGraphQL helper`, () => {
       },
     }
 
-    store.dispatch.gatsbyApi.setState({
+    getStore().dispatch.gatsbyApi.setState({
       helpers: {
         reporter: fakeReporter,
       },
     })
-  })
+  }))
 
-  test(`handles 500 errors`, async () => {
+  test(`handles 500 errors`, withGlobalStore(async () => {
     await fetchGraphQL({
       query: 500,
       url: `fake url`,
@@ -70,9 +75,9 @@ describe(`fetchGraphQL helper`, () => {
     expect(
       panicMessages[0]
     ).toInclude(`Your WordPress server is either overloaded or encountered a PHP error.`)
-  })
+  }))
 
-  test(`handles 502, 503, and 504 errors`, async () => {
+  test(`handles 502, 503, and 504 errors`, withGlobalStore(async () => {
     const errorMessage = `Your WordPress server at ${chalk.bold(
       `fake url`
     )} appears to be overloaded.`
@@ -94,9 +99,9 @@ describe(`fetchGraphQL helper`, () => {
       url: `fake url`,
     })
     expect(panicMessages[3]).toInclude(errorMessage)
-  })
+  }))
 
-  test(`errors when WPGraphQL is not active`, async () => {
+  test(`errors when WPGraphQL is not active`, withGlobalStore(async () => {
     await fetchGraphQL({
       query: `wpgraphql-deactivated`,
       url: `fake url`,
@@ -105,9 +110,9 @@ describe(`fetchGraphQL helper`, () => {
     expect(
       panicMessages[4]
     ).toInclude(`Unable to connect to WPGraphQL.`)
-  })
+  }))
 
-  afterAll(() => {
+  afterAll(withGlobalStore(() => {
     mock.mockRestore()
-  })
+  }))
 })

packages/gatsby-source-wordpress/__tests__/fetch-referenced-media-items.test.js

@@ -3,7 +3,7 @@ jest.mock(`../dist/utils/fetch-graphql`, () => jest.fn())
 import fetchGraphql from "../dist/utils/fetch-graphql"
 import { fetchMediaItemsBySourceUrl, fetchMediaItemsById } from "../dist/steps/source-nodes/fetch-nodes/fetch-referenced-media-items"
 import { createContentDigest } from "gatsby-core-utils"
-import store from "../dist/store"
+import { getStore, createStore, asyncLocalStorage } from "../dist/store"
 
 const fakeReporter = {
   panic: msg => {
@@ -18,16 +18,25 @@ const getNodeMock = jest.fn()
 
 const btoa = (input) => Buffer.from(input).toString(`base64`)
 
+const store = {store: createStore(), key: `test`}
+
+const runWithGlobalStore = async (fn) => {
+  asyncLocalStorage.run(store, fn)
+}
+
+const withGlobalStore = (fn) => () => {
+     runWithGlobalStore(fn)
+  }
 describe(`fetch-referenced-media-items`, () => {
-  beforeAll(() => {
-    store.dispatch.gatsbyApi.setState({
+  beforeAll(withGlobalStore(() => {
+    getStore().dispatch.gatsbyApi.setState({
       pluginOptions: {
         schema: {
           perPage: 2,
         },
       },
     })
-  })
+  }))
 
   afterEach(() => {
     jest.resetAllMocks()
@@ -54,7 +63,7 @@ const createApi = () => {
   }
 }
 
-    it(`should properly download multiple pages`, async () => {
+    it(`should properly download multiple pages`, withGlobalStore(async () => {
       fetchGraphql
         .mockResolvedValueOnce({
           data: {
@@ -97,11 +106,11 @@ const createApi = () => {
         helpers: createApi(),
       })
       expect(result).toHaveLength(2)
-    })
+    }))
 
 
-    it(`should properly download a single page if there is only 1`, async () => {
-      store.dispatch.gatsbyApi.setState({
+    it(`should properly download a single page if there is only 1`, withGlobalStore(async () => {
+      getStore().dispatch.gatsbyApi.setState({
         pluginOptions: {
           schema: {
             perPage: 5,
@@ -133,7 +142,7 @@ const createApi = () => {
         helpers: createApi(),
       })
       expect(result).toHaveLength(2)
-    })
+    }))
   })
 
 
@@ -152,7 +161,7 @@ const createApi = () => {
       }
     }
 
-    it(`should properly download multiple pages of ids`, async () => {
+    it(`should properly download multiple pages of ids`, withGlobalStore(async () => {
       getNodeMock
       .mockReturnValueOnce(undefined)
       .mockReturnValueOnce(undefined)
@@ -174,7 +183,7 @@ const createApi = () => {
               localFile: {
                 id: 3,
               }})
-      store.dispatch.gatsbyApi.setState({
+      getStore().dispatch.gatsbyApi.setState({
         pluginOptions: {
           schema: {
             perPage: 2,
@@ -229,10 +238,10 @@ const createApi = () => {
         helpers: createApi(),
       })
       expect(result).toHaveLength(4)
-    })
+    }))
 
 
-    xit(`should properly download a single page of ids if there is only 1`, async () => {
+    it(`should properly download a single page of ids if there is only 1`, withGlobalStore(async () => {
       getNodeMock
       .mockReturnValueOnce(undefined)
       .mockReturnValueOnce(undefined)
@@ -245,7 +254,7 @@ const createApi = () => {
             id: 1,
           }})
 
-      store.dispatch.gatsbyApi.setState({
+      getStore().dispatch.gatsbyApi.setState({
         pluginOptions: {
           schema: {
             perPage: 5,
@@ -285,6 +294,6 @@ const createApi = () => {
         helpers: createApi(),
       })
       expect(result).toHaveLength(2)
-    })
+    }))
   })
-})
+})

packages/gatsby-source-wordpress/__tests__/process-node.test.js

@@ -9,6 +9,13 @@ import {
   searchAndReplaceNodeStrings,
 } from "../dist/steps/source-nodes/create-nodes/process-node"
 
+import { createStore, asyncLocalStorage } from "../dist/store"
+
+
+const store = { store: createStore(), key: `test` }
+
+const withGlobalStore = fn => () => asyncLocalStorage.run(store, fn)
+
 const wpUrl = `wp.fakesite.com`
 
 test(`HTML image transformation regex matches images`, async () => {
@@ -30,7 +37,7 @@ test(`HTML image transformation regex matches images`, async () => {
   expect(imgTagMatches.length).toBe(3)
 })
 
-test(`HTML link transformation regex matches links`, async () => {
+test(`HTML link transformation regex matches links`, withGlobalStore(async () => {
   const nodeString = `<a href=\\"https://${wpUrl}/wp-content/uploads/2020/01/©SDM-Yep-©Hi-000-Header.jpg\\" />Not a transformable link</a>
 
   <a href=\\"https://other-site.com/hi\\" />Not a transformable link</a>
@@ -45,9 +52,9 @@ test(`HTML link transformation regex matches links`, async () => {
   const matches = execall(wpLinkRegex, nodeString)
 
   expect(matches.length).toBe(2)
-})
+}))
 
-test(`Search and replace node strings using regex matches`, async () => {
+test(`Search and replace node strings using regex matches`, withGlobalStore(async () => {
   const nodeString = `Some stuff in a random string
 
   A new line with some stuff!
@@ -70,7 +77,7 @@ test(`Search and replace node strings using regex matches`, async () => {
   A new line with some other thing!
 
   We need to test some <a href=\\"https://new-site.com/hi\\" />link</a> as well!`)
-})
+}))
 
 jest.mock(`../dist/steps/source-nodes/fetch-nodes/fetch-referenced-media-items.js`, () => {
   return {
@@ -81,7 +88,7 @@ jest.mock(`../dist/steps/source-nodes/fetch-nodes/fetch-referenced-media-items.j
 })
 
 
-test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, async () => {
+test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, withGlobalStore(async () => {
   const node = {
     content: `\n<p>Welcome to WordPress. This is your first post. Edit or deleteit, then start writing!</p>\n\n\n\n<p></p>\n\n\n\n<figureclass="wp-block-image size-large"><img loading="lazy" width="1024" height="768" src="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg" alt=""class="wp-image-115" srcset="http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1024x768.jpg 1024w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-300x225.jpg 300w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-768x576.jpg 768w,http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-1536x1152.jpg 1536w, http://wpgatsby.local/wp-content/uploads/2022/02/sasha-set-GURzQwO8Li0-unsplash-2048x1536.jpg 2048w"sizes="(max-width: 1024px) 100vw, 1024px" /></figure>\n<figure class="wp-block-image size-large"><img src="http://wpgatsby.local/wp-content/uploads/2022/04/gaussian2.svg" alt="" class="wp-image-11836"/></figure>`,
     id: `cG9zdDox`,
@@ -149,3 +156,4 @@ test(`Gatsby Image service works in html fields via replaceNodeHtmlImages`, asyn
   expect(transformedNodeStringNoHtmlImages).not.toInclude(gatsbyImageUrlPart)
   expect(transformedNodeStringNoHtmlImages).not.toInclude(gatsbyFileUrlPart)
 })
+)

packages/gatsby-source-wordpress/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@rematch/core": "^1.4.0",
-    "@rematch/immer": "^1.2.0",
+    "@rematch/core": "^2.2.0",
+    "@rematch/immer": "^2.1.3",
     "async-retry": "^1.3.3",
     "atob": "^2.1.2",
     "axios": "^0.21.1",
@@ -33,6 +33,7 @@
     "gatsby-source-filesystem": "^5.11.0-next.1",
     "glob": "^7.2.3",
     "got": "^11.8.6",
+    "immer": "^9.0.0",
     "json-diff": "^1.0.6",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.11",