Merge branch 'psharma-fix-refetch-all' of github.com:psharma-ii/gatsb…

…y into psharma-fix-refetch-all

.circleci/config.yml

@@ -7,7 +7,6 @@ executors:
     parameters:
       image:
         type: string
-        # First 10.x LTS release, but old Yarn
         default: "14.17.0"
     docker:
       - image: cimg/node:<< parameters.image >>
@@ -86,7 +85,7 @@ aliases:
           command: yarn jest --ci --runInBand  $(yarn -s jest --listTests | sed 's/\/home\/circleci\/project\///g' | circleci tests split)
           environment:
             NODE_OPTIONS: --max-old-space-size=2048
-            GENERATE_JEST_REPORT: true
+            GENERATE_JEST_REPORT: "true"
             JEST_JUNIT_OUTPUT_DIR: ./test-results/jest-node/
             JEST_JUNIT_OUTPUT_NAME: results.xml
       - store_test_results:
@@ -145,7 +144,7 @@ commands:
           condition: << parameters.condition >>
           steps:
             - slack/status:
-              channel: eng-react-integration-status
+                channel: eng-react-integration-status
 
   e2e-test:
     parameters:
@@ -244,7 +243,8 @@ jobs:
     <<: *test_template
 
   integration_tests_gatsby_source_wordpress:
-    machine: true
+    machine:
+      image: "ubuntu-2004:202107-02"
     steps:
       - run:
           command: |
@@ -253,7 +253,7 @@ jobs:
       - run: nvm install v14
       - run: nvm alias default v14
       - run: nvm use v14
-      - run: npm i -g yarn@1.22.10
+      - run: npm i -g yarn@1.22.11
       - e2e-test:
           test_path: integration-tests/gatsby-source-wordpress
 
@@ -551,7 +551,7 @@ jobs:
           command: yarn jest --ci --runInBand ((yarn jest --listTests) | Foreach-Object {$_ -replace '.*\\packages', 'packages'} | Foreach-Object {$_ -replace '\\', '/'} | circleci tests split --split-by=timings)
           environment:
             NODE_OPTIONS: --max-old-space-size=2048
-            GENERATE_JEST_REPORT: true
+            GENERATE_JEST_REPORT: "true"
             JEST_JUNIT_OUTPUT_DIR: ./test-results/jest-node/
             JEST_JUNIT_OUTPUT_NAME: results.xml
       - store_test_results:

deprecated-packages/gatsby-admin/gatsby-browser.js

@@ -0,0 +1,6 @@
+import React from "react"
+import Layout from "./src/components/layout"
+
+export const wrapPageElement = ({ element, props }) => (
+  <Layout {...props}>{element}</Layout>
+)

packages/gatsby-admin/gatsby-config.js → deprecated-packages/gatsby-admin/gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: [
-    "gatsby-plugin-react-helmet",
+    `gatsby-plugin-react-helmet`,
     {
-      resolve: "gatsby-plugin-webfonts",
+      resolve: `gatsby-plugin-webfonts`,
       options: {
         fonts: {
           google: [
@@ -15,9 +15,9 @@ module.exports = {
       },
     },
     {
-      resolve: "gatsby-plugin-create-client-paths",
+      resolve: `gatsby-plugin-create-client-paths`,
       options: {
-        prefixes: ["/plugins/*"],
+        prefixes: [`/plugins/*`],
       },
     },
   ],

deprecated-packages/gatsby-admin/gatsby-node.js

@@ -0,0 +1,9 @@
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        path: require.resolve(`path-browserify`),
+      },
+    },
+  })
+}

deprecated-packages/gatsby-admin/index.js

@@ -0,0 +1 @@
+// NOOP

packages/gatsby-admin/package.json → deprecated-packages/gatsby-admin/package.json

@@ -25,8 +25,8 @@
     "@feedback-fish/react": "^1.2.1",
     "@types/react-instantsearch-dom": "^5.2.6",
     "@types/socket.io-client": "^1.4.36",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
     "csstype": "^2.6.17",
     "formik": "^2.2.9",
     "gatsby": "^4.0.0-zz-next.1",

docs/contributing/gatsby-style-guide.md

@@ -479,7 +479,7 @@ When there are multiple ways to complete a task, the docs should explain the fol
 4. The best practice and why is it the best (if different than 3)
 5. Any tips on how to pick an option
 
-For example, `gatsby-image` is a component that includes Gatsby best practices for handling images, yet there are more fundamental and common ways of handling them. Documentation ought to make the best practice clear in addition to the most common and fundamental ways.
+For example, `gatsby-plugin-image` is a component that includes Gatsby best practices for handling images, yet there are more fundamental and common ways of handling them. Documentation ought to make the best practice clear in addition to the most common and fundamental ways.
 
 ## Docs
 

docs/docs/add-seo-component.md

@@ -18,7 +18,7 @@ module.exports = {
     description:
       "Hogwarts Potions master, Head of Slytherin house and former Death Eater.",
     url: "https://www.doe.com", // No trailing slash allowed!
-    image: "/images/snape.jpg", // Path to your image you placed in the 'static' folder
+    image: "/snape.jpg", // Path to the image placed in the 'static' folder, in the project's root directory.
     twitterUsername: "@occlumency",
   },
 }

docs/docs/adding-a-shopping-cart-with-snipcart.md

@@ -111,7 +111,7 @@ You can add multiple custom fields by incrementing the index of the `data-item-c
 
 ### Selling digital products
 
-Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file you intend for download, you'll need to upload it to your Snipcart dashboard and then add the resulting GUID as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard.
+Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file for others to download, you'll need to upload it to your Snipcart dashboard and then add the resulting GUID as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard.
 
 ```jsx
 <section>

docs/docs/building-an-ecommerce-site-with-shopify.md

@@ -15,7 +15,7 @@ You can clone the starter, host it on Gatsby and connect it to your own Shopify
 1. Create a new [Shopify account](https://www.shopify.com) and store if you don't have one.
 2. Create a private app in your store by navigating to `Apps`, then `Manage private apps`.
 3. Create a new private app, with any "Private app name" and leaving the default permissions as Read access under Admin API.
-4. Enable the [Shopify Storefront API](https://help.shopify.com/en/api/storefront-api) by checking the box that says "Allow this app to access your storefront data using Storefront API". Make sure to also grant access to read product and customer tags by checking their corresponding boxes.
+4. Enable the [Shopify Storefront API](https://help.shopify.com/en/api/storefront-api) by checking the box that says "Allow this app to access your storefront data using Storefront API". Make sure to also grant access to `Read product tags` and `Read customer tags` by checking their corresponding boxes.
 5. Copy the password, you'll need it to configure your plugin below.
 
 ## Set up the Gatsby Shopify plugin
@@ -42,6 +42,8 @@ plugins: [
 ]
 ```
 
+_Note: You will likely not want to put your `password` and `storeUrl` directly in your `gatsby-config.js` file but rather, use an environment variable. Check out the [Gatsby Shopify starter](https://github.com/gatsbyjs/gatsby-starter-shopify) for an example of how to do that._
+
 4. Run `gatsby develop` and make sure the site compiles successfully.
 
 ## Querying Shopify data and listing products
@@ -87,7 +89,7 @@ const ProductsPage = ({ data }) => (
         <li key={node.shopifyId}>
           <h3>
             <Link to={`/products/${node.handle}`}>{node.title}</Link>
-            {" - "}${node.priceRange.minVariantPrice.amount}
+            {" - "}${node.priceRangeV2.minVariantPrice.amount}
           </h3>
           <p>{node.description}</p>
         </li>

docs/docs/conceptual/security-in-gatsby.md

@@ -155,7 +155,7 @@ Sometimes in your Gatsby website, you will need display sensitive data or handle
 Content Security Policy is a security layer added in web applications to detect and prevent attacks, e.g. the XSS attack mentioned above.
 
 To add it to your Gatsby website, add [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) to your `gatsby-config.js` with the desired configuration. Note that
-currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-image](/plugins/gatsby-image).
+currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-plugin-image](/plugins/gatsby-plugin-image).
 
 > Note that not all browsers support CSP, check [can-i-use](https://caniuse.com/#feat=mdn-http_headers_csp_content-security-policy) for more information.
 

docs/docs/creating-a-source-plugin.md

@@ -51,8 +51,6 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
     children: [],
     internal: {
       type: `MyNodeType`,
-      mediaType: `text/html`,
-      content: nodeContent,
       contentDigest: createContentDigest(myData),
     },
   }
@@ -305,7 +303,7 @@ This loose coupling between the data source and the transformer plugins allow Ga
 
 #### Sourcing and optimizing images from remote locations
 
-A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Image](/plugins/gatsby-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time.
+A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Plugin Image](/plugins/gatsby-plugin-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time.
 
 This can be achieved by the following steps:
 
@@ -413,7 +411,9 @@ query {
     id
     remoteImage {
       childImageSharp {
-        # fluid or fixed fields for optimized images
+        gatsbyImageData(
+          # arguments for optimized images
+        )
       }
     }
   }

docs/docs/glossary/hydration.md

@@ -7,7 +7,7 @@ Learn what _hydration_ means, and how Gatsby makes use of React's hydration feat
 
 ## What is hydration?
 
-_Hydration_ is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML. It's a feature of [React](/docs/glossary/react/), one of the underlying tools that makes the Gatsby framework. Gatsby uses hydration to transform the static HTML created at [build time](/docs/glossary/build/) into a React application.
+_Hydration_ is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML. It's a feature of [React](/docs/glossary/react/), one of the underlying tools that make the Gatsby framework. Gatsby uses hydration to transform the static HTML created at [build time](/docs/glossary/build/) into a React application.
 
 A typical React application relies on client-side rendering. Instead of parsing HTML to create the [DOM](/docs/glossary#dom), client-side rendering uses JavaScript to create it. A minimal HTML document serves as the application container, and only contains links to the JavaScript and CSS necessary to render the application.
 
@@ -34,9 +34,9 @@ A typical React application relies on client-side rendering. Instead of parsing
 
 With client-side rendering, most actions trigger local DOM updates instead of network requests. Clicking a navigation link builds the requested page on the client instead of requesting it from the server. Because they make fewer network requests, applications rendered in the browser provide a blazing-fast user experience — after the initial download.
 
-That's the drawback to client-side rendering: none of your site's content is visible or interactive until the client downloads JavaScript and builds the DOM. However, not all clients can construct a DOM. For example, client-side rendering can prevent search engine and social media crawlers from consuming and indexing your site's URLs. Browser users, on the other hand, may see a blank page or loading image while your JavaScript bundle downloads and executes.
+That's the drawback to client-side rendering: none of your site's content is visible or interactive until the client downloads JavaScript and builds the DOM. However, not all clients can construct a DOM. For example, client-side rendering can prevent search engines and social media crawlers from consuming and indexing your site's URLs. Browser users, on the other hand, may see a blank page or loading image while your JavaScript bundle downloads and executes.
 
-[Server-side rendering](/docs/glossary/server-side-rendering/) makes HTML available to the client _before_ JavaScript loads. Your site visitors can see and read your content even if it is not fully interactive. Server rendering eliminates the blank page problem. Rendered HTML also makes it easier for search engine and social media crawlers to consume your site. Server-side rendering also has a drawback: every URL request requires another round trip to the server.
+[Server-side rendering](/docs/glossary/server-side-rendering/) makes HTML available to the client _before_ JavaScript loads. Your site visitors can see and read your content even if it is not fully interactive. Server rendering eliminates the blank page problem. Rendered HTML also makes it easier for search engines and social media crawlers to consume your site. Server-side rendering also has a drawback: every URL request requires another round trip to the server.
 
 Hydration lets us take a hybrid approach.
 

docs/docs/how-to/performance/improving-site-performance.md

@@ -125,7 +125,7 @@ For example, let's say you have a header that imports a JSON object in order to
 
 There's a couple ways to detect this:
 
-- _Notice components and data that don't seem to be needed on every page._ If you're using v2 of Gatsby, certain methods of importing can cause code to get bundled on pages it doesn't belong on. Try replacing indirect import statements like `import { myIcon } from './icons/index.js'` with direct imports like `import { myIcon} from './icons/my-icon.js`.
+- _Notice components and data that don't seem to be needed on every page._ If you're using v2 of Gatsby, certain methods of importing can cause code to get bundled on pages it doesn't belong on. Try replacing indirect import statements like `import { myIcon } from './icons/index.js'` with direct imports like `import { myIcon } from './icons/my-icon.js'`.
 
 - _Watch for unexpectedly large data imports._ If you notice large JSON objects, and you do need the data (or some portion of it), there are a couple options.
 
@@ -194,7 +194,7 @@ Media files are often the largest files on a site, and so can delay page load si
 
 [Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-image/) is our approach to optimizing image loading performance. It does three basic things:
 
-1. It delays non-essential work for images not above the fold to avoid esource congestion.
+1. It delays non-essential work for images not above the fold to avoid resource congestion.
 2. It provides a placeholder during image fetch.
 3. It minimizes image file size to reduce request roundtrip time.
 

docs/docs/how-to/previews-deploys-hosting/path-prefix.md

@@ -28,12 +28,16 @@ module.exports = {
 
 ## Build
 
-The final step is to build your application with the `--prefix-paths` flag, like so:
+The final step is to build your application with either the `--prefix-paths` flag or `PREFIX_PATHS` environment variable, like so:
 
 ```shell
 gatsby build --prefix-paths
 ```
 
+```shell
+PREFIX_PATHS=true gatsby build
+```
+
 If this flag is not passed, Gatsby will ignore your `pathPrefix` and build the site as if hosted from the root domain.
 
 ## Serve