-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[v2] improve how we load GraphQL query results in development/product…
…ion (aka Ludicrous Mode) (#4555) * Create placeholder JSON store * Rename * Websocket placeholder * Push query results JSON over websockets * More descriptive variable name * Fix queries being overwritten * Remove eslint-disable flag * Remove junk * test require error fix for windows * dont require json data in sync-require * dont add layout data to json array multiple times * initial async loading * revert saving json directly to public for now * updated production-app to sync with prop name change in ComponentRenderer * we load json data via json-loader component in develop and not handling it with webpack import/require * hashes for json files * fix preloading, use xhr instead of fetch - for some reason can't force fetch to not create additional request, with any `cache` or `mode` configuration * dont use full paths in dataPath - remove static/d/ path and .json ext - results in smaller app bundle especially with large ammount of pages * Enable cached query results to be loaded * Don't dump all query results out to the client Instead only push results out if the data is for a path that's currently being viewed in a client. * fix preload link to json data * remove not used function * remove more not used code * Update to latest webpack/mini-css-extract-plugin * don't write new (a)sync-requires.js if components didn't change (#4759) * create just one websocket client (#4763) * Filter out duplicate query jobs and create secondary queue for jobs if path already has query in flight * [json-loader] Don't emit new file node until previous is finished processing (#4785) * Don't emit new file node until previous is finished processing This is an experiment to use [xstate](http://davidkpiano.github.io/xstate/docs/#/) to setup state machines to better handle complex state changes as we sometimes have. Ideally this happens in core and then gatsby-source-filesystem just has a simple queue and emits a new file node every time the system returns to idle. In a future refactor we'll do that plus refactor other parts of core that should be handled in a state machine e.g. pages-query-runner.js This PR also reinforced the need for us to implement [tracing](https://github.com/jaegertracing/jaeger) in core / plugins as that'd make it far far easier to understand what's happening and when. * Document state machine and remove extraneous Chokidar states * Remove console.log * [json-loader] Only log file events if we're past bootstrap (#4826) * Don't emit new file node until previous is finished processing This is an experiment to use [xstate](http://davidkpiano.github.io/xstate/docs/#/) to setup state machines to better handle complex state changes as we sometimes have. Ideally this happens in core and then gatsby-source-filesystem just has a simple queue and emits a new file node every time the system returns to idle. In a future refactor we'll do that plus refactor other parts of core that should be handled in a state machine e.g. pages-query-runner.js This PR also reinforced the need for us to implement [tracing](https://github.com/jaegertracing/jaeger) in core / plugins as that'd make it far far easier to understand what's happening and when. * Document state machine and remove extraneous Chokidar states * Remove console.log * Only log file events if we're past bootstrap * [json-loader] dont recompile on data change - part 2 (#4837) * prevent adding duplicate redirects * don't write new `redirects.json` if redirects didn't change prevents webpack recompilation on data change * [json-loader] develop - reading results from file improvments (#4850) * dont emit results for layouts * [develop] store query results in memory, read json data from file only if we don't have it stored yet (we didn't run this query, but results are cached) * Add query prioritization based on what page(s) user(s) are on Query running is sadly not very ludicrous right now on gatsbyjs.org — not sure why — each markdown file change causes ~20 queries to run but even with prioritizing the active page's query, it's still ~2 seconds before the page updates. This sort of thing will be much easier to debug with tracing support. * Add initial forward slash * Actually this is how we add back the initial forward slash
- Loading branch information
1 parent
409014c
commit cfa019d
Showing
31 changed files
with
672 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React, { createElement } from "react" | ||
| import { Route } from "react-router-dom" | ||
| import ComponentRenderer from "./component-renderer" | ||
| import syncRequires from "./sync-requires" | ||
| import socketIo from "./socketIo" | ||
| import omit from "lodash/omit" | ||
| import get from "lodash/get" | ||
|
|
||
| const getPathFromProps = props => { | ||
| if (props.isPage) { | ||
| return get(props.pageResources, `page.path`) | ||
| } else { | ||
| return `/dev-404-page/` | ||
| } | ||
| } | ||
|
|
||
| class JSONStore extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| data: {}, | ||
| path: null, | ||
| } | ||
|
|
||
| this.setPageData = this.setPageData.bind(this) | ||
|
|
||
| this.socket = socketIo() | ||
| this.socket.on(`queryResult`, this.setPageData) | ||
| } | ||
|
|
||
| componentWillMount() { | ||
| this.registerPath(getPathFromProps(this.props)) | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| const { path } = this.state | ||
| const newPath = getPathFromProps(nextProps) | ||
|
|
||
| if (path !== newPath) { | ||
| this.unregisterPath(path) | ||
| this.registerPath(newPath) | ||
| } | ||
| } | ||
|
|
||
| registerPath(path) { | ||
| this.setState({ path }) | ||
| this.socket.emit(`registerPath`, path) | ||
| } | ||
|
|
||
| unregisterPath(path) { | ||
| this.setState({ path: null }) | ||
| this.socket.emit(`unregisterPath`, path) | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.unregisterPath(this.state.path) | ||
| } | ||
|
|
||
| setPageData({ path, result }) { | ||
| this.setState({ | ||
| data: { | ||
| ...this.state.data, | ||
| [path]: result, | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| const { isPage, pages, pageResources } = this.props | ||
| const data = this.state.data[this.state.path] | ||
| const propsWithoutPages = omit(this.props, `pages`) | ||
|
|
||
| if (!data) { | ||
| return null | ||
| } else if (isPage) { | ||
| return createElement(ComponentRenderer, { | ||
| key: `normal-page`, | ||
| ...propsWithoutPages, | ||
| ...data, | ||
| }) | ||
| } else { | ||
| const dev404Page = pages.find(p => /^\/dev-404-page/.test(p.path)) | ||
| return createElement(Route, { | ||
| key: `404-page`, | ||
| component: props => | ||
| createElement( | ||
| syncRequires.components[dev404Page.componentChunkName], | ||
| { | ||
| ...propsWithoutPages, | ||
| ...data, | ||
| } | ||
| ), | ||
| }) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default JSONStore |
Oops, something went wrong.