Skip to content

Commit

Permalink
Merge branch 'master' into non-ascii-filename
Browse files Browse the repository at this point in the history
  • Loading branch information
cometkim committed Nov 10, 2022
2 parents 8802cec + 3a4d333 commit daa54b7
Show file tree
Hide file tree
Showing 119 changed files with 1,303 additions and 89 deletions.
6 changes: 2 additions & 4 deletions docs/docs/conceptual/graphql-concepts.md
Expand Up @@ -231,7 +231,7 @@ See also the following blog posts:
### Fragments
Notice that in the above example for [querying images](#images), we used `...GatsbyImageSharpFixed`, which is a GraphQL Fragment, a reusable set of fields for query composition. You can read more about them [here](https://graphql.org/learn/queries/#fragments).
Fragments let you construct sets of fields, and then include them in queries where you need to. You can learn more about them in the [GraphQL documentation](https://graphql.org/learn/queries/#fragments).
If you wish to define your own fragments for use in your application, you can use named exports to export them in any JavaScript file, and they will be automatically processed by Gatsby for use in your GraphQL queries.
Expand Down Expand Up @@ -338,9 +338,7 @@ export default function Home({ data }) {
<h1>Index page</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<IndexPost frontmatter={node.frontmatter} />
</div>
<IndexPost key={node.id} frontmatter={node.frontmatter} />
))}
</div>
)
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/conceptual/partial-hydration.md
Expand Up @@ -2,7 +2,7 @@
title: Partial Hydration
---

Partial Hydration enables you to selectively add interactivity to your otherwise completly static app. This results in improved frontend performance while keeping the benefits of client-side apps. Gatsby uses [React server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to achieve this.
Partial Hydration enables you to selectively add interactivity to your otherwise completely static app. This results in improved frontend performance while keeping the benefits of client-side apps. Gatsby uses [React server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to achieve this.

## Overview

Expand All @@ -18,7 +18,7 @@ You could see this as a super-powered way of doing code-splitting on your compon

The result of shipping less and less JavaScript to the client will directly impact your performance scores, most notably the "Time to Interactive" measurement. It'll also make your users happy as they are not stuck in the "uncanny valley", explained in [patterns.dev Progressive Hydration](https://www.patterns.dev/posts/progressive-hydration/):

> Although server rendering provides a faster First Contentful Paint, it doesn't always provide a faster Time To Interactive. The necessary JavaScript in order to be able to interact with our website hasn't been loaded yet. Buttons may look interactive, but they aren't interactive (yet). \[...\] The time that the user sees non-interactive UI on the screen is also refered to as the uncanny valley: although users may think that they can interact with the website, there are no handlers attached to the components yet. This can be a frustrating experience for the user, as the UI may look like it's frozen!
> Although server rendering provides a faster First Contentful Paint, it doesn't always provide a faster Time To Interactive. The necessary JavaScript in order to be able to interact with our website hasn't been loaded yet. Buttons may look interactive, but they aren't interactive (yet). \[...\] The time that the user sees non-interactive UI on the screen is also referred to as the uncanny valley: although users may think that they can interact with the website, there are no handlers attached to the components yet. This can be a frustrating experience for the user, as the UI may look like it's frozen!
By using Partial Hydration you can shorten that time or completely remove the uncanny valley.

Expand All @@ -42,7 +42,7 @@ If you don't know what React server components are or need a refresher, we recom

So why is Gatsby using React server components to achieve Partial Hydration and didn't shift to the island architecture? In a nutshell: To allow you to (mostly) keep writing your apps as you're used to.

In island architecture world you're authoring individual island layers that each have their own context and React tree. This means that you can't _just_ share context or bubble up/down of React events, you have to implement custom logic to connect those islands. You need to think differently when creating your app. Islands also don't work for SPAs as they can't render the complete page, leading to more sluggish navigations between pages. With React server components you can keep writing your app like you're used to, for the most part. There are of course constraints you have to follow with them but it's not a complete paradigm shift.
In island architecture world you're authoring individual island layers that each have their own context and React tree. This means that you can't _just_ share context or bubble up/down of React events, you have to implement custom logic to connect those islands. You need to think differently when creating your app. Islands also don't work for SPAs as they can't render the complete page, leading to more sluggish navigation between pages. With React server components you can keep writing your app like you're used to, for the most part. There are of course constraints you have to follow with them but it's not a complete paradigm shift.

### Benefits

Expand Down
13 changes: 6 additions & 7 deletions docs/docs/custom-html.md
Expand Up @@ -27,10 +27,7 @@ Note: the various props that are rendered into pages _are_ required e.g.

## Inserting HTML into the `<head>`

Anything you render in the `html.js` component will _not_ be made "live" in
the client like other components. If you want to dynamically update your
`<head>` we recommend using
[React Helmet](/plugins/gatsby-plugin-react-helmet/)
Anything you render in the `html.js` component will _not_ be made "live" in the client like other components. If you want to dynamically update your `<head>` we recommend using [Gatsby's Head API](/docs/reference/built-in-components/gatsby-head/).

## Inserting HTML into the `<footer>`

Expand Down Expand Up @@ -58,9 +55,11 @@ You can add custom JavaScript to your HTML document by using React's [`dangerous
<script
dangerouslySetInnerHTML={{
__html: `
var name = 'world';
console.log('Hello ' + name);
`,
var name = 'world';
console.log('Hello ' + name);
`,
}}
/>
```

However, we do recommend that you use [Gatsby's Script API](/docs/reference/built-in-components/gatsby-script/) instead.
26 changes: 26 additions & 0 deletions docs/docs/reference/release-notes/migrating-from-v4-to-v5.md
Expand Up @@ -388,3 +388,29 @@ If you defined the `engines` key you'll also need to update the minimum version:
This section is a work in progress and will be expanded when necessary. It's a list of known issues you might run into while upgrading Gatsby to v5 and how to solve them.

If you encounter any problem, please let us know in this [GitHub discussion](https://github.com/gatsbyjs/gatsby/discussions/36609).

### Multiple versions of `graphql`

Since we updated the internal `graphql` dependency to [v16](#update-to-graphql-16) you might run into a problem like this:

```shell
Cannot create as TypeComposer the following value:
GraphQLScalarType({ name: "Date", description: "A date string, such as 2007-12-03, compliant with the
ISO 8601 standard for representation of dates and times using the Gregorian calendar.",
specifiedByURL: undefined, serialize: [function String], parseValue: [function String], parseLiteral:
[function parseLiteral], extensions: { }, astNode: undefined, extensionASTNodes: [] }).
```
This error (or any other similar errors) happens when you have multiple versions of `graphql` installed in your project. You can check this manually by running:
```shell
npm ls graphql
```
Or with `yarn`:
```shell
yarn why graphql
```
A brute-force way of solving this is to delete your lock file, delete `node_modules` and re-install with `npm install --legacy-peer-deps`/`yarn install`. This only works though if your project is just `gatsby`, if you have a more complicated setup you might need to use features like `resolutions`.
16 changes: 15 additions & 1 deletion docs/docs/reference/release-notes/v5.0/index.md
Expand Up @@ -12,7 +12,7 @@ and [let us know](https://github.com/gatsbyjs/gatsby/issues/new/choose) if you e

Key highlights of this release:

- [Slices API](#slices-api) - Only re-build individual slices of your page
- [Slice API](#slice-api) - Only re-build individual slices of your page
- [Partial Hydration (Beta)](#partial-hydration-beta) - Improve frontend performance by shipping less JavaScript
- [GraphiQL v2](#graphiql-v2) - An all new UI with features like dark mode, tabs, and persisted state

Expand All @@ -32,6 +32,20 @@ If you're looking for an overview of all breaking changes and how to migrate, pl

If you're curious about our release schedules and which versions are officially supported, head to the [Gatsby Framework Version Support](/docs/reference/release-notes/gatsby-version-support/) document. As of Gatsby 5 we're no longer supporting Gatsby 2 and Gatsby 3.

## Overview Video

Prefer video over text? No problem! Learn more about all the new features in the video below:

<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/6RwfzZi5gn0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
## Slice API

The Slice API allows you to define highly-shared components in your site, which will then inform Gatsby to build those shared components only once. After the files are built, Gatsby will then stitch the resulting markup and JavaScript to the pages that include that shared component. This means that changes to highly-shared components (such as headers, footers, and common layouts) no longer require a rebuild of all pages that use that shared component.
Expand Down
3 changes: 2 additions & 1 deletion docs/docs/tutorial/part-6/index.mdx
Expand Up @@ -198,11 +198,12 @@ The following diagram shows an overview of the updates you'll have to make in or

1. Create a new folder in your `src/pages` directory, and call it `blog`.

2. Move the `src/pages/{mdx.frontmatter__slug}.js` file into the new `blog` subdirectory. Update the import for your `Layout` component to reflect the new folder structure:
2. Move the `src/pages/{mdx.frontmatter__slug}.js` file into the new `blog` subdirectory. Update the import for your `Layout` and `Seo` component to reflect the new folder structure:

```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
import * as React from 'react'
import Layout from '../../components/layout' // highlight-line
import Seo from '../../components/seo' // highlight-line

// ...
```
Expand Down
15 changes: 15 additions & 0 deletions packages/babel-plugin-remove-graphql-queries/CHANGELOG.md
Expand Up @@ -3,6 +3,21 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [5.0.0](https://github.com/gatsbyjs/gatsby/commits/babel-plugin-remove-graphql-queries@5.0.0/packages/babel-plugin-remove-graphql-queries) (2022-11-08)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0)

#### Bug Fixes

- Move murmurhash to gatsby-core-utils [#36882](https://github.com/gatsbyjs/gatsby/issues/36882) ([aaaa8c5](https://github.com/gatsbyjs/gatsby/commit/aaaa8c5da25014e386b2d4775d5691d9e5134699))

#### Chores

- Update peerDeps [#36965](https://github.com/gatsbyjs/gatsby/issues/36965) ([b624442](https://github.com/gatsbyjs/gatsby/commit/b6244424fe8b724cbc23b80b2b4f5424cc2055a4))
- apply patches for v5 [#36796](https://github.com/gatsbyjs/gatsby/issues/36796) ([25f79b6](https://github.com/gatsbyjs/gatsby/commit/25f79b6c3719fdf09584ade620a05c66ba2a697c))
- Deprecate static query component [#36784](https://github.com/gatsbyjs/gatsby/issues/36784) ([eb8cf8d](https://github.com/gatsbyjs/gatsby/commit/eb8cf8d37976162ef4afc919c002f698a1305642))
- setup circleci to run unit tests againt v5 [#36714](https://github.com/gatsbyjs/gatsby/issues/36714) ([ba146fd](https://github.com/gatsbyjs/gatsby/commit/ba146fd3b7ee1f18c1c695bc654890151d2cc0b3))

## [4.24.0](https://github.com/gatsbyjs/gatsby/commits/babel-plugin-remove-graphql-queries@4.24.0/packages/babel-plugin-remove-graphql-queries) (2022-09-27)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
Expand Down
10 changes: 10 additions & 0 deletions packages/babel-preset-gatsby-package/CHANGELOG.md
Expand Up @@ -3,6 +3,16 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [3.0.0](https://github.com/gatsbyjs/gatsby/commits/babel-preset-gatsby-package@3.0.0/packages/babel-preset-gatsby-package) (2022-11-08)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0)

#### Chores

- upgrade latest-version [#36434](https://github.com/gatsbyjs/gatsby/issues/36434) ([eb9a330](https://github.com/gatsbyjs/gatsby/commit/eb9a3301f3c889f5d304889f461e3ec8567b3d11))
- apply patches for v5 [#36796](https://github.com/gatsbyjs/gatsby/issues/36796) ([25f79b6](https://github.com/gatsbyjs/gatsby/commit/25f79b6c3719fdf09584ade620a05c66ba2a697c))
- setup circleci to run unit tests againt v5 [#36714](https://github.com/gatsbyjs/gatsby/issues/36714) ([ba146fd](https://github.com/gatsbyjs/gatsby/commit/ba146fd3b7ee1f18c1c695bc654890151d2cc0b3))

## [2.24.0](https://github.com/gatsbyjs/gatsby/commits/babel-preset-gatsby-package@2.24.0/packages/babel-preset-gatsby-package) (2022-09-27)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
Expand Down
8 changes: 8 additions & 0 deletions packages/babel-preset-gatsby/CHANGELOG.md
Expand Up @@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [3.0.0](https://github.com/gatsbyjs/gatsby/commits/babel-preset-gatsby@3.0.0/packages/babel-preset-gatsby) (2022-11-08)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0)

#### Chores

- apply patches for v5 [#36796](https://github.com/gatsbyjs/gatsby/issues/36796) ([25f79b6](https://github.com/gatsbyjs/gatsby/commit/25f79b6c3719fdf09584ade620a05c66ba2a697c))

## [2.24.0](https://github.com/gatsbyjs/gatsby/commits/babel-preset-gatsby@2.24.0/packages/babel-preset-gatsby) (2022-09-27)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
Expand Down
6 changes: 6 additions & 0 deletions packages/create-gatsby/CHANGELOG.md
Expand Up @@ -3,6 +3,12 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [3.0.0](https://github.com/gatsbyjs/gatsby/commits/create-gatsby@3.0.0/packages/create-gatsby) (2022-11-08)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0)

**Note:** Version bump only for package create-gatsby

## [2.24.0](https://github.com/gatsbyjs/gatsby/commits/create-gatsby@2.24.0/packages/create-gatsby) (2022-09-27)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
Expand Down
26 changes: 26 additions & 0 deletions packages/gatsby-cli/CHANGELOG.md
Expand Up @@ -3,6 +3,32 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [5.0.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-cli@5.0.0/packages/gatsby-cli) (2022-11-08)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0)

#### Features

- Fancier Slices Tree [#36905](https://github.com/gatsbyjs/gatsby/issues/36905) ([c6bfa80](https://github.com/gatsbyjs/gatsby/commit/c6bfa80912e251147155f07c47361b47a473e6f7))
- Update partial hydration directive [#36868](https://github.com/gatsbyjs/gatsby/issues/36868) ([7f1b57c](https://github.com/gatsbyjs/gatsby/commit/7f1b57c5a5849b3bc997957b3370c3119e79d279))
- inject source location data to Slice usage and show errors in places where user renders them and not in gatsby internals [#36849](https://github.com/gatsbyjs/gatsby/issues/36849) ([4423795](https://github.com/gatsbyjs/gatsby/commit/4423795ed8069b8ce1f0646e213182009bfeb312))
- GraphiQL v2 [#36541](https://github.com/gatsbyjs/gatsby/issues/36541) ([55a601d](https://github.com/gatsbyjs/gatsby/commit/55a601d759589286fb99e97db0ba095a1e6ed894))
- Slice HTML rendering error handling [#36822](https://github.com/gatsbyjs/gatsby/issues/36822) ([f21b54f](https://github.com/gatsbyjs/gatsby/commit/f21b54faaee5fa1d9f5c1377721333013261c8c3))
- Slice component validation [#36801](https://github.com/gatsbyjs/gatsby/issues/36801) ([1fd450f](https://github.com/gatsbyjs/gatsby/commit/1fd450fc7b3b3a6d3beb98f79ffe960e19bfe74e))
- Slices API [#36489](https://github.com/gatsbyjs/gatsby/issues/36489) ([6660144](https://github.com/gatsbyjs/gatsby/commit/666014471a545d183a91051d81864ecbad2a3971))

#### Bug Fixes

- Remove `update-notifier` [#36367](https://github.com/gatsbyjs/gatsby/issues/36367) ([4c48a10](https://github.com/gatsbyjs/gatsby/commit/4c48a10cc4fc074332254e7ba93093e952d2ed95))
- Persist manifest on cached builds [#36693](https://github.com/gatsbyjs/gatsby/issues/36693) ([45a105b](https://github.com/gatsbyjs/gatsby/commit/45a105b6db6892150da27d71abaf693b8e43fb14))
- Add back missing partial hydration error handling change [#36676](https://github.com/gatsbyjs/gatsby/issues/36676) ([a629551](https://github.com/gatsbyjs/gatsby/commit/a62955144f4d369e18402a9c4345f213c3a1d72e))

#### Chores

- Remove HAS_REACT_18 check [#36850](https://github.com/gatsbyjs/gatsby/issues/36850) ([20ef7c1](https://github.com/gatsbyjs/gatsby/commit/20ef7c12ffa9fd48c763c913e70ef20bef8a68fc))
- apply patches for v5 [#36796](https://github.com/gatsbyjs/gatsby/issues/36796) ([25f79b6](https://github.com/gatsbyjs/gatsby/commit/25f79b6c3719fdf09584ade620a05c66ba2a697c))
- setup circleci to run unit tests againt v5 [#36714](https://github.com/gatsbyjs/gatsby/issues/36714) ([ba146fd](https://github.com/gatsbyjs/gatsby/commit/ba146fd3b7ee1f18c1c695bc654890151d2cc0b3))

## [4.24.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-cli@4.24.0/packages/gatsby-cli) (2022-09-27)

[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
Expand Down
@@ -1,7 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`addPlugins gatsby-config.js should not write with no plugins 1`] = `
"module.exports = {
"/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
siteUrl: \`https://www.yourdomain.tld\`,
},
Expand All @@ -11,7 +14,10 @@ exports[`addPlugins gatsby-config.js should not write with no plugins 1`] = `
`;
exports[`addPlugins gatsby-config.js should write a plugin with options 1`] = `
"module.exports = {
"/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
siteUrl: \`https://www.yourdomain.tld\`
},
Expand All @@ -25,7 +31,10 @@ exports[`addPlugins gatsby-config.js should write a plugin with options 1`] = `
`;
exports[`addPlugins gatsby-config.js should write a single plugin 1`] = `
"module.exports = {
"/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
siteUrl: \`https://www.yourdomain.tld\`
},
Expand All @@ -34,7 +43,10 @@ exports[`addPlugins gatsby-config.js should write a single plugin 1`] = `
`;
exports[`addPlugins gatsby-config.js should write multiple plugins 1`] = `
"module.exports = {
"/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
siteUrl: \`https://www.yourdomain.tld\`
},
Expand Down

0 comments on commit daa54b7

Please sign in to comment.