chore(docs): u-files - minor punctuation and grammar fixes (#18762)

Author: mendaomn

docs/docs/graphql-api.md

@@ -225,7 +225,7 @@ For examples, refer to the [query recipes](/docs/recipes/#6-querying-data) and [
 
 Fragments allow you to reuse parts of GraphQL queries. They also allow you to split up complex queries into smaller, easier to understand components.
 
-For more information, check out the docs guide on [using fragments in Gatsby](/docs/using-fragments/).
+For more information, check out the docs guide on [using fragments in Gatsby](/docs/using-graphql-fragments/).
 
 ### List of Gatsby fragments
 

docs/docs/recipes.md

@@ -1981,7 +1981,7 @@ return (
 )
 ```
 
-b. using a [GraphQL fragment](/docs/using-fragments/), to query for the necessary fields more tersely
+b. using a [GraphQL fragment](/docs/using-graphql-fragments/), to query for the necessary fields more tersely
 
 ```jsx
 const data = useStaticQuery(graphql`

docs/docs/unit-testing.md

@@ -4,14 +4,14 @@ title: Unit Testing
 
 Unit testing is a great way to protect against errors in your code before you
 deploy it. While Gatsby does not include support for unit testing out of the
-box, it only takes a few steps to get up and running. However there are a few
+box, it only takes a few steps to get up and running. However, there are a few
 features of the Gatsby build process that mean the standard Jest setup doesn't
 quite work. This guide shows you how to set it up.
 
 ## Setting up your environment
 
 The most popular testing framework for React is [Jest](https://jestjs.io/),
-which was created by Facebook. While Jest is a general purpose JavaScript unit
+which was created by Facebook. While Jest is a general-purpose JavaScript unit
 testing framework, it has lots of features that make it work particularly well
 with React.
 
@@ -20,7 +20,7 @@ concepts should be the same or very similar for your site._
 
 ### 1. Installing dependencies
 
-First you need to install Jest and some more required packages. Install babel-jest and babel-preset-gatsby to ensure that the babel preset(s) that are used match what are used internally for your Gatsby site.
+First, you need to install Jest and some more required packages. Install babel-jest and babel-preset-gatsby to ensure that the babel preset(s) that are used match what are used internally for your Gatsby site.
 
 ```shell
 npm install --save-dev jest babel-jest react-test-renderer babel-preset-gatsby identity-obj-proxy
@@ -66,12 +66,12 @@ module.exports = require("babel-jest").createTransformer(babelOptions)
 ```
 
 - The next option is `moduleNameMapper`. This
-  section works a bit like webpack rules, and tells Jest how to handle imports.
+  section works a bit like webpack rules and tells Jest how to handle imports.
   You are mainly concerned here with mocking static file imports, which Jest can't
   handle. A mock is a dummy module that is used instead of the real module inside
   tests. It is good when you have something that you can't or don't want to test.
   You can mock anything, and here you are mocking assets rather than code. For
-  stylesheets you need to use the package `identity-obj-proxy`. For all other assets
+  stylesheets you need to use the package `identity-obj-proxy`. For all other assets,
   you need to use a manual mock called `file-mock.js`. You need to create this yourself.
   The convention is to create a directory called `__mocks__` in the root directory
   for this. Note the pair of double underscores in the name.
@@ -83,7 +83,7 @@ module.exports = "test-file-stub"
 - The next config setting is `testPathIgnorePatterns`. You are telling Jest to ignore
   any tests in the `node_modules` or `.cache` directories.
 
-- The next option is very important, and is different from what you'll find in other
+- The next option is very important and is different from what you'll find in other
   Jest guides. The reason that you need `transformIgnorePatterns` is because Gatsby
   includes un-transpiled ES6 code. By default Jest doesn't try to transform code
   inside `node_modules`, so you will get an error like this:
@@ -121,7 +121,7 @@ global.___loader = {
 
 #### Mocking `gatsby`
 
-Finally it's a good idea to mock the `gatsby` module itself. This may not be
+Finally, it's a good idea to mock the `gatsby` module itself. This may not be
 needed at first, but will make things a lot easier if you want to test
 components that use `Link` or GraphQL.
 
@@ -184,7 +184,7 @@ describe("Header", () => {
 ```
 
 This is a very simple snapshot test, which uses `react-test-renderer` to render
-the component, and then generates a snapshot of it on first run. It then
+the component, and then generates a snapshot of it on the first run. It then
 compares future snapshots against this, which means you can quickly check for
 regressions. Visit [the Jest docs](https://jestjs.io/docs/en/getting-started) to
 learn more about other tests that you can write.

docs/docs/upgrade-gatsby-and-dependencies.md

@@ -6,7 +6,7 @@ To keep up with the latest bug fixes, security patches, and minor releases from
 
 ## Semantic versioning
 
-As many other packages, Gatsby uses [semantic versioning](https://semver.org/) to tag new versions and indicate what kind of changes are introduced in every new release.
+Like many other packages, Gatsby uses [semantic versioning](https://semver.org/) to tag new versions and indicate what kind of changes are introduced in every new release.
 
 This guide is meant to teach you how to upgrade Gatsby for minor or patch releases. For major changes you can refer to the [Release and Migrations](/docs/releases-and-migration/) reference guide overview for the corresponding guide to upgrade.
 
@@ -99,7 +99,7 @@ Then add the corresponding script to your package.json file:
 }
 ```
 
-And finally run the recently added command:
+And finally, run the recently added command:
 
 ```shell
 npm run upgrade-interactive

docs/docs/upgrading-node-js.md

@@ -25,7 +25,7 @@ This example shows Node.js version 10, specifically v10.16.0.
 
 Node.js version 6 reached _End-of-life_ status on 30th April 2019. Many of Gatsby's dependencies are updating to Node.js version 8 and above. Gatsby must also update in order to deliver new features and bug fixes more quickly.
 
-Generally it's recommend to use [the Node version whose status is _Active LTS_](https://github.com/nodejs/Release#nodejs-release-working-group) (Node 10 at time of writing). However, in this document you'll learn how to update from Node 6 to Node 8 as this is likely to be the least disruptive upgrade for you.
+Generally, it's recommended to use [the Node version whose status is _Active LTS_](https://github.com/nodejs/Release#nodejs-release-working-group) (Node 10 at time of writing). However, in this document, you'll learn how to update from Node 6 to Node 8 as this is likely to be the least disruptive upgrade for you.
 
 > What about Node.js 7? Stable versions of Node.js are evenly numbered releases - Node.js 6, Node.js 8, Node.js 10 etc. Only use uneven release numbers if you'd like to try cutting-edge and experimental features.
 
@@ -116,4 +116,4 @@ Gatsby takes backwards compatibility seriously and aims to support older version
 
 Gatsby also relies on a huge ecosystem of JavaScript dependencies. As the ecosystem moves away from older, unsupported Node.js versions we have to keep pace to ensure that bugs can be fixed and new features can be released.
 
-In this document you learned how you upgrade from Node.js version 6 (which has reached _End of Life_ status), to Node.js version 8 (which has reached _Maintenance_) status.
+In this document, you learned how you upgrade from Node.js version 6 (which has reached _End of Life_ status) to Node.js version 8 (which has reached _Maintenance_) status.

docs/docs/using-a-plugin-in-your-site.md

@@ -4,7 +4,7 @@ title: Using a Plugin in Your Site
 
 Gatsby plugins are Node.js packages, so you can install them like other packages in node using NPM.
 
-For example, `gatsby-transformer-json` is a package which adds support for JSON files to the Gatsby data layer.
+For example, `gatsby-transformer-json` is a package that adds support for JSON files to the Gatsby data layer.
 
 To install it, in the root of your site you run:
 

docs/docs/using-client-side-only-packages.md

@@ -2,7 +2,7 @@
 title: Using Client-Side Only Packages
 ---
 
-On occasion, you may need to use a function or library that only works client side. This usually is because the library in question accesses something that isn't available during server-side rendering (SSR), like [browser DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) methods.
+On occasion, you may need to use a function or library that only works client-side. This usually is because the library in question accesses something that isn't available during server-side rendering (SSR), like [browser DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) methods.
 
 You'll need to use one of the workarounds outlined below if your project fails to compile with `gatsby develop` or `gatsby build` with an error like:
 
@@ -21,7 +21,7 @@ In the component where you need it, load the package via CDN using a [`<script /
 To embed your script, you can:
 
 - Include it in a custom component as needed using [`react-helmet`](https://github.com/nfl/react-helmet).
-- Add the script tag directly in your base html using Gatsby's [html.js](/docs/custom-html/)
+- Add the script tag directly in your base HTML using Gatsby's [html.js](/docs/custom-html/)
 
 You should then follow React's guidelines for [Integrating with DOM Manipulation Plugins](https://reactjs.org/docs/integrating-with-other-libraries.html#integrating-with-dom-manipulation-plugins), using the methods available in the [React Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle) to interact with the library you're using.
 
@@ -52,7 +52,7 @@ class MyComponent extends Component {
 
 ## Workaround 3: Load client-side dependent components with react-loadable
 
-Install [loadable-components](https://github.com/smooth-code/loadable-components) and use it as a wrapper for a component that wants to use a client side only package.
+Install [loadable-components](https://github.com/smooth-code/loadable-components) and use it as a wrapper for a component that wants to use a client-side only package.
 
 ```bash
 npm install @loadable/component
@@ -80,10 +80,10 @@ const LoadableBuyButton = Loadable(() => import("./ShopifyBuyButton"))
 export default LoadableBuyButton
 ```
 
-## Workaround 4: Use React.lazy and Suspense on client side only
+## Workaround 4: Use React.lazy and Suspense on client-side only
 
-React.lazy and Suspense are still not ready for server side rendering, but they can still be used by checking that the code is executed only on the client.
-While this solution is inferior to `loadable-components`, that works both on server side and client, it still provides an alternative for dealing with client side only packages, without an added dependency.
+React.lazy and Suspense are still not ready for server-side rendering, but they can still be used by checking that the code is executed only on the client.
+While this solution is inferior to `loadable-components`, that works both on server side and client, it still provides an alternative for dealing with client-side only packages, without an added dependency.
 Remember that the following code could break if executed without the `isSSR` guard.
 
 ```jsx

docs/docs/using-gatsby-image.md

@@ -4,7 +4,7 @@ title: Using Gatsby Image to Prevent Image Bloat
 
 `gatsby-image` is a React component designed to work seamlessly with Gatsby’s GraphQL queries ([`gatsby-image` plugin README](/packages/gatsby-image/)). It combines [Gatsby’s native image processing](https://image-processing.gatsbyjs.org/) capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. `gatsby-image` uses [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) to power its image transformations.
 
-> _Warning: gatsby-image is **not** a drop-in replacement for `<img />`. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use `<img />` won’t work with gatsby-image._
+> _Warning: gatsby-image is **not** a drop-in replacement for `<img />`. It’s optimized for fixed width/height images and images that stretch the full width of a container. Some ways you can use `<img />` won’t work with gatsby-image._
 
 [Demo](https://using-gatsby-image.gatsbyjs.org/)
 
@@ -20,16 +20,16 @@ _For more complete API information, check out the [Gatsby Image API](/docs/gatsb
 
 Large, unoptimized images dramatically slow down your site.
 
-But creating optimized images for websites has long been a thorny problem. Ideally you would:
+But creating optimized images for websites has long been a thorny problem. Ideally, you would:
 
 - Resize large images to the size needed by your design
 - Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
 - Strip all unnecessary metadata and optimize JPEG and PNG compression
 - Efficiently lazy load images to speed initial page load and save bandwidth
 - Use the “blur-up” technique or a “traced placeholder” SVG to show a preview of the image while it loads
-- Hold the image position so your page doesn’t jump while images load
+- Hold the image position so your page doesn’t jump while the images load
 
-Doing this consistently across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.
+Doing this consistently across a site feels like Sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.
 
 Most solutions involve a lot of manual labor and bookkeeping to ensure every image is optimized.
 

docs/docs/using-gatsby-professionally.md

@@ -7,11 +7,11 @@ As a Gatsby developer and enthusiast, you may be interested in how you can spend
 
 You may see problems happen around you that you know Gatsby could solve, and want others to adopt Gatsby so they don't encounter them in the future. You may be interested in driving business goals, such as growing your organization or increasing revenue. Or, you may simply love building with Gatsby and want to do it more.
 
-This section of the documentation is aimed to help you spend more time as a Gatsby developer by giving you the tools to spread Gatsby within your organization, or convince clients that Gatsby is the right tool for them.
+This section of the documentation is aimed to help you spend more time as a Gatsby developer by giving you the tools to spread Gatsby within your organization or convince clients that Gatsby is the right tool for them.
 
-It includes resources for how to explain Gatsby to different stakeholders, such as other developers, engineering leaders, marketers, executives and clients.
+It includes resources for how to explain Gatsby to different stakeholders, such as other developers, engineering leaders, marketers, executives, and clients.
 
-It also includes resources that help your teams develop more effectively at scale -- when there are multiple developers on a project, or multiple projects in the organization.
+It also includes resources that help your teams develop more effectively at scale -- when there are multiple developers on a project or multiple projects in the organization.
 
 Finally, it includes resources for you about how Gatsby can help you advance professionally within your career -- whatever your goals and ambitions are.
 

docs/docs/using-gatsby-without-graphql.md

@@ -6,7 +6,7 @@ Most examples in the Gatsby docs and on the web at large focus on leveraging sou
 
 > Note: For our purposes here, “unstructured data” means data “handled outside of Gatsby’s data layer” (we’re using the data directly, and not transforming the data into Gatsby nodes).
 
-## The approach: Fetch data and use Gatsby's `createPages` API
+## The approach: fetch data and use Gatsby's `createPages` API
 
 > _Note_: This example is drawn from an example repo built specifically to model how to use this "unstructured data" approach. [View the full repo on GitHub](https://github.com/jlengstorf/gatsby-with-unstructured-data).
 

docs/docs/using-fragments.md renamed to docs/docs/using-graphql-fragments.md

@@ -1,5 +1,5 @@
 ---
-title: Using Fragments
+title: Using GraphQL Fragments
 ---
 
 Fragments allow you to reuse parts of GraphQL queries. It also allows you to split up complex queries into smaller, easier to understand components.

docs/docs/using-graphql-playground.md

@@ -4,7 +4,7 @@ title: Using the GraphQL Playground
 
 ## Intro
 
-In this page we want to introduce you to an alternative to the current IDE for your GraphQL queries: [GraphQL Playground](https://github.com/prisma/graphql-playground).
+This page will introduce you to an alternative to the current IDE for your GraphQL queries: [GraphQL Playground](https://github.com/prisma/graphql-playground).
 
 ## What is Prisma's GraphQL Playground?
 

www/gatsby-node.js

@@ -383,6 +383,13 @@ exports.createPages = ({ graphql, actions, reporter }) => {
     toPath: `/docs/awesome-gatsby-resources/`,
     isPermanent: true,
   })
+
+  createRedirect({
+    fromPath: `/docs/using-fragments/`,
+    toPath: `/docs/using-graphql-fragments/`,
+    isPermanent: true,
+  })
+
   Object.entries(startersRedirects).forEach(([fromSlug, toSlug]) => {
     createRedirect({
       fromPath: `/starters${fromSlug}`,

www/src/data/sidebars/doc-links.yaml

@@ -129,10 +129,10 @@
             - title: Using Gatsby Without GraphQL
               link: /docs/using-gatsby-without-graphql/
               breadcrumbTitle: Gatsby Without GraphQL
-            - title: Sourcing From the Filesystem
+            - title: Sourcing from the Filesystem
               link: /docs/sourcing-from-the-filesystem/
               breadcrumbTitle: From the Filesystem
-            - title: Sourcing From Databases
+            - title: Sourcing from Databases
               link: /docs/sourcing-from-databases/
               breadcrumbTitle: From Databases
             - title: Sourcing from Hosted Services
@@ -187,7 +187,7 @@
               link: /docs/use-static-query/
               breadcrumbTitle: The useStaticQuery Hook
             - title: Using GraphQL Fragments
-              link: /docs/using-fragments/
+              link: /docs/using-graphql-fragments/
             - title: Creating Slugs for Pages
               link: /docs/creating-slugs-for-pages/
             - title: Creating Pages from Data Programmatically