Merge branch 'master' into fix/static-image-formats-2

Author: ascorbic

benchmarks/source-wordpress/scripts/updater.js

@@ -1,4 +1,4 @@
-const fetchGraphql = require(`gatsby-source-wordpress-experimental/utils/fetch-graphql`)
+const fetchGraphql = require(`gatsby-source-wordpress-experimental/dist/utils/fetch-graphql`)
   .default
 
 const faker = require(`faker`)

docs/docs/file-system-route-api.md

@@ -125,14 +125,14 @@ export default function Component(props) {
 // to connect to this GraphQL query.
 
 export const query = graphql`
-  query ($id: String) {
+  query($id: String) {
     product(id: { eq: $id }) {
       fields {
         sku
       }
     }
   }
-}
+`
 ```
 
 If you need to customize the query used for collecting the nodes (e.g. filtering out any product of type "Food"), you should use the [`createPages`](/docs/node-apis#createPages) API instead as File System Route API doesn't support this at the moment.
@@ -170,7 +170,8 @@ export default function HomePage(props) {
     <ul>
       {props.data.allProduct.map(product => (
         <li key={product.name}>
-          <Link to={product.productPath}>{product.name}</Link> (<Link to={product.discountPath}>Discount</Link>) // highlight-line
+          <Link to={product.productPath}>{product.name}</Link> (
+          <Link to={product.discountPath}>Discount</Link>) // highlight-line
         </li>
       ))}
     </ul>
@@ -185,7 +186,7 @@ export const query = graphql`
       discountPath: gatsbyPath(filePath: "/discounts/{Product.name}") // highlight-line
     }
   }
-}
+`
 ```
 
 By using [aliasing](/docs/graphql-reference/#aliasing) you can use `gatsbyPath` multiple times.

packages/gatsby-plugin-sharp/src/image-data.ts

@@ -252,7 +252,7 @@ export async function generateImageData({
       file,
       args: {
         ...options,
-        ...args.transformOptions,
+        ...transformOptions,
         fit,
         cropFocus,
         toFormatBase64: args.blurredOptions?.toFormat,