[v2] Implement RFC #2 removing special layout component #4887

KyleAMathews · 2018-04-07T23:20:05Z

RFC https://github.com/gatsbyjs/rfcs/blob/remove-layouts/text/0000-remove-special-layout-components.md

TODOs

Signed-off-by: Kyle Mathews mathews.kyle@gmail.com

KyleAMathews · 2018-04-17T00:15:45Z

Sometime in v2 cycle we need to move all query running to on-demand and only watch components that are active on the page, etc. Also need to somehow make createPages not so centralized. This is so we can scale gatsby develop to larger and large sites.

KyleAMathews · 2018-04-17T00:19:50Z

It'd also really speed up hot reloading data during development. Larger sites can accumulate lots of queries that are affected by a single data change. E.g. changing a markdown file in gatsbyjs.org can trigger running ~20 queries — only one of which is relevant to what the developer is looking at.

Works by creating a hash of the query in the component using babel and then extracting that, running it like page queries, and then pushing the result to the browser where it can be pulled in off the context to be displayed. TODO still is implement this for production. In production, we'll add an import for the query result into the component with the <StaticQuery> and then pass that imported JSON into <StaticQuery> which will then pass it right back into the render prop. Yeah for indirection!

KyleAMathews · 2018-04-20T02:54:46Z

Upgraded my blog to use this PR. Got rid of some duplicate data loading and moved those to component queries 🎉 https://github.com/KyleAMathews/blog/pull/21/files

KyleAMathews · 2018-04-20T18:08:07Z

Some new patterns which emerged as part of the upgrade of my blog

I created a SEOBase component which queried for basic site metadata from gatsby-config.js. Made my layout component very clean as the SEO stuff cluttered it up a lot https://github.com/KyleAMathews/blog/pull/21/files#diff-ccb0466b664bf2a3f1243df01ad70d3b
Each blog post has a short bio on it — to render that, I had to query on every page for some info — I refactored that to a Bio component which queries for basic info about me from gatsby-config.js — much cleaner & efficient https://github.com/KyleAMathews/blog/pull/21/files#diff-176a37d60c485191452723839cc4352f

jquense · 2018-04-20T18:41:04Z

packages/babel-plugin-remove-graphql-queries/src/index.js

+            const query = text
+
+            // Replace the query with the hash of the query.
+            path2.replaceWith(t.StringLiteral(queryHash))


why not replace with a require to the data itself, you could avoid the context bit in that case maybe?

Because we moved to loading query results over websockets in #4555 as it's way way faster than relying on webpack to hot reload data.

oo right nice, i was trying to think of how you could avoid the hash here hmm

KyleAMathews · 2018-04-21T02:12:57Z

Updated gatsbyjs.org — this didn't require using <StaticQuery> as we weren't querying for anything in our layout component but because page components now control the whole tree, it meant that I could refactor how we're rendering the sidebars to a much more natural pattern. Previously we were choosing what to render in the layout based on pathnames (which is a bad pattern, best always avoided). Now, each page component renders the sidebar itself. To simplify this, I made a new PageWithSidebar component which takes the yaml data of links and handles rendering the sidebar plus uses a renderBody prop to let the page component control rendering its body. 3c9e3c3

m-allanson · 2018-04-21T08:23:02Z

packages/gatsby/src/internal-plugins/query-runner/file-parser.js

+                }
+              })
+            }
+            const definitions = [...gqlAst.definitions].map(d => {


Trying this out, sometimes gqlAst.definitions isn't defined so this errors with a There was a problem parsing the GraphQL query in file message. Should this stuff live inside the if (gqlAst) {} block?

jquense · 2018-04-21T13:20:22Z

packages/gatsby/src/internal-plugins/query-runner/file-parser.js

+          TaggedTemplateExpression(path) {
+            if (
+              (`descendant of query`,
+              path?.parentPath?.parentPath?.node?.name?.name !== `query`)


this is the export const query = ... case yeah? maybe path.findParent(p => p.isVariableDeclarator)?.id.name is a better option here (and below).

oh findParent exists? 😅I just fumbled my way through the whole babel writing — I'll refactor this then with that.

(i just found out about it reading the emotion plugin recently)

So, tried this and couldn't get it working after 5-10 minutes of trying. I never know what babel types to use exactly nor how to call them. We're trying to identify if the tagged template is inside the StaticQuery component and query prop. If you want to take a crack at this sometime, that'd be great.

<StaticQuery query={graphql`the_query`} />

jquense · 2018-04-21T13:20:45Z

packages/gatsby/src/internal-plugins/query-runner/file-parser.js

+              return
+            }
+            if (
+              path.parentPath?.parentPath?.parentPath?.node?.name?.name !==


does this work in the case where someone is or isn't using JSX?

No — that'd be great to support though too.

This proved fairly difficult — Gatsbygram's modal architecture is always a good canary in the coalmine for ensuring Gatsby's architecture is flexible. It ended up being quite elegant though: * Used <StaticQuery> to load the image metadata into the Modal component so it could loop through the images. * Exposed <PageRenderer> through the Gatsby package so that the layout could render the index page underneath the modal when it is showing * Use <React.Fragment> around the Index/Modal components so that the Index page component didn't need rendered to the DOM again * To detect if this was the initial render, I implemented onInitialClientRender and set a global on the window so that the post template component would know *not* to use the modal if the user went directly to a post page.

KyleAMathews · 2018-04-21T23:54:49Z

Upgrade Gatsbygram

This proved fairly difficult — Gatsbygram's modal architecture is always
a good canary in the coalmine for ensuring Gatsby's architecture is
flexible. It ended up being quite elegant though:

Used <StaticQuery> to load the image metadata into the Modal component
so it could loop through the images.
Exposed <PageRenderer> through the Gatsby package so that the layout
could render the index page underneath the modal when it is showing
Use <React.Fragment> around the Index/Modal components so that the
Index page component didn't need rendered to the DOM again
To detect if this was the initial render, I implemented
onInitialClientRender and set a global on the window so that the
post template component would know not to use the modal if the user
went directly to a post page.

6cf01c4

KyleAMathews · 2018-04-22T00:37:30Z

Ok, this is feeling pretty solid! Going to merge it in and try to get master merged into v2 as well.

#5133 (comment) https://github.com/gatsbyjs/rfcs/blob/remove-layouts/text/0000-remove-special-layout-components.md #4887

jquense · 2018-05-25T13:50:28Z

packages/gatsby/cache-dir/component-renderer.js

-  }
-
-  render() {
-    const pluginResponses = apiRunner(`replaceComponentRenderer`, {


I think we lost this api...

gatsbyjs#4887) [v2] Implement RFC gatsbyjs#2 removing special layout component

KyleAMathews added 3 commits April 7, 2018 16:07

Remove layout code

76793cd

Fix server pathname

d704891

Update using-asciidoc site

4e2decc

ghost assigned KyleAMathews Apr 7, 2018

ghost added the review label Apr 7, 2018

KyleAMathews removed the review label Apr 7, 2018

KyleAMathews added this to To Do in Gatsby v2 Release via automation Apr 7, 2018

KyleAMathews moved this from To Do to In progress in Gatsby v2 Release Apr 7, 2018

Upgrade client-only-paths example site to no-layouts

41d0e52

ghost added the review label Apr 10, 2018

m-allanson removed the review label Apr 13, 2018

KyleAMathews mentioned this pull request Apr 18, 2018

upgrade and use polyfill #4742

Merged

KyleAMathews added 7 commits April 18, 2018 17:19

Add @babel/plugin-proposal-optional-chaining to core babel plugins list

4ad3879

Make work in production by adding import to JSON file for StaticQuery

523a428

Stop forcing re-render when route between pages sharing components

fed4861

Remove layer in component tree

cf2ea03

Fix deleting html at start of bootstrap

e7f70da

Fix adding context to page query results

e9c3027

Minor change so can republish

5421f38

jquense reviewed Apr 20, 2018

View reviewed changes

KyleAMathews added 2 commits April 20, 2018 18:49

Refactor gatsbyjs.org for no layout component

3c9e3c3

Fix basename implementation

c52ead6

m-allanson reviewed Apr 21, 2018

View reviewed changes

jquense reviewed Apr 21, 2018

View reviewed changes

KyleAMathews added 4 commits April 21, 2018 09:24

Always return an object so destructuring doesn't break

f69b165

Upgrade using-hjson

22ca51b

Upgrade using-gatsby-image

7be5472

Kinda add flow type

dfd3bbb

Merge branch 'v2' into remove-layouts

aa7ca66

KyleAMathews changed the title ~~[v2] WIP implementing RFC #2 removing special layout component~~ Apr 22, 2018

KyleAMathews merged commit 09069ff into v2 Apr 22, 2018

Gatsby v2 Release automation moved this from In progress to Done Apr 22, 2018

KyleAMathews mentioned this pull request Apr 23, 2018

RFC: Remove special layouts from v2 gatsbyjs/rfcs#2

Merged

ryanditjia mentioned this pull request May 1, 2018

Added info regarding removal of Layouts #5204

Merged

KyleAMathews pushed a commit that referenced this pull request May 1, 2018

Added info regarding removal of Layouts (#5204)

13d33e1

#5133 (comment) https://github.com/gatsbyjs/rfcs/blob/remove-layouts/text/0000-remove-special-layout-components.md #4887

m-allanson mentioned this pull request May 8, 2018

[RFC] remove our special layout components in Gatsby v2 #3830

Closed

rdela mentioned this pull request May 11, 2018

Add codemod for v1 to v2 migration #5038

Closed

m-allanson mentioned this pull request May 15, 2018

[v2] Since gatsby@2.0.0-alpha.16, the main package entry point is unavailable #5410

Closed

jquense reviewed May 25, 2018

View reviewed changes

m-allanson deleted the remove-layouts branch June 22, 2018 08:50

mwfrost pushed a commit to mwfrost/gatsby that referenced this pull request Apr 20, 2023

[v2] WIP implementing RFC gatsbyjs#2 removing special layout component (

5da7046

gatsbyjs#4887) [v2] Implement RFC gatsbyjs#2 removing special layout component

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v2] Implement RFC #2 removing special layout component #4887

[v2] Implement RFC #2 removing special layout component #4887

KyleAMathews commented Apr 7, 2018 •

edited

Loading

KyleAMathews commented Apr 17, 2018

KyleAMathews commented Apr 17, 2018

KyleAMathews commented Apr 20, 2018

KyleAMathews commented Apr 20, 2018

jquense Apr 20, 2018

KyleAMathews Apr 20, 2018

jquense Apr 21, 2018

KyleAMathews commented Apr 21, 2018

m-allanson Apr 21, 2018

jquense Apr 21, 2018

KyleAMathews Apr 21, 2018

jquense Apr 21, 2018

KyleAMathews Apr 22, 2018

jquense Apr 21, 2018

KyleAMathews Apr 21, 2018

KyleAMathews commented Apr 21, 2018 •

edited

Loading

KyleAMathews commented Apr 22, 2018

jquense May 25, 2018

[v2] Implement RFC #2 removing special layout component #4887

[v2] Implement RFC #2 removing special layout component #4887

Conversation

KyleAMathews commented Apr 7, 2018 • edited Loading

KyleAMathews commented Apr 17, 2018

KyleAMathews commented Apr 17, 2018

KyleAMathews commented Apr 20, 2018

KyleAMathews commented Apr 20, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KyleAMathews commented Apr 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KyleAMathews commented Apr 21, 2018 • edited Loading

Upgrade Gatsbygram

KyleAMathews commented Apr 22, 2018

Choose a reason for hiding this comment

KyleAMathews commented Apr 7, 2018 •

edited

Loading

KyleAMathews commented Apr 21, 2018 •

edited

Loading