feat(gatsby): add useStaticQuery hook #11588

sidharthachatterjee · 2019-02-06T12:32:35Z

Adds a new React Hook called useStaticQuery

Known Limitations

Only a single instance of useStaticQuery per file is supported at the moment

Todo

This is good to go now! Documentation and support for multiple instances will be added in later.

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

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

packages/gatsby/cache-dir/gatsby-browser-entry.js

sidharthachatterjee · 2019-02-06T12:40:46Z

packages/gatsby/index.d.ts

@@ -20,4 +20,6 @@ export interface StaticQueryProps {

 export class StaticQuery extends React.Component<StaticQueryProps> {}

+export const useStaticQuery: (query: any) => void


Could probably improve typings here since query needs to be graphql tagged template

It also should return Object (definitely not void, as this would probably make TS complain when using result)?

Ah, missed that! It can be null or obj though

@sidharthachatterjee good call! I think I'd just do

export const useStaticQuery: (query: any) => null | object

Fixed the return here

I'll fix the input for both StaticQuery and useStaticQuery in a separate PR

It looks like they should be TemplateStringsArray but don't want to touch StaticQuery in this PR

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

sidharthachatterjee · 2019-02-06T13:42:13Z

I’ve currently set the default return for useStaticQuery to be null

Not sure what the pattern is here with hooks yet but null would mean the user would need to do null checks themselves which the render prop component does for them.

What do we think of this? @KyleAMathews @pieh @m-allanson @DSchau

DSchau

This is looking awesome! Left some preliminary comments, and then I'll pull this down and validate later, as well!

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

DSchau · 2019-02-06T14:56:06Z

packages/gatsby/cache-dir/gatsby-browser-entry.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"


This isn't a functional change necessarily, but maybe just use React.useContext instead? We can check for the existence of that rather easily, e.g.

if (typeof React.useContext !== `function` && process.env.NODE_ENV === `development`) { // warn }

Also one note here... I think it's worth validating that these checks are stripped from our code in production (e.g. with our uglifier).

(not as a concern of this PR, speaking more broadly!)

This is tricky, because I would want this error to print out during built-html stage (when we write to static html files), but not actually end up in client js bundle (just micro optim to save few bytes)

Added the check in gatsby-browser-entry.js

@pieh This will never end up in the bundle because I'll be stripping away the import and replacing it with static data

All imports to useStaticQuery are now removed in build so this should be good

Ah, you are completely right - so this check would need to be done in babel plugin? (yuck - mixed concerns)

Actually, I guess it would need to be duplicated - in case there are 3rd party tools (Storybook etc) that want to use gatsby-browser-entry outside of gatsby "realm"?

packages/gatsby/cache-dir/gatsby-browser-entry.js

DSchau · 2019-02-06T14:57:39Z

packages/gatsby/index.d.ts

@@ -20,4 +20,6 @@ export interface StaticQueryProps {

 export class StaticQuery extends React.Component<StaticQueryProps> {}

+export const useStaticQuery: (query: any) => void


@sidharthachatterjee good call! I think I'd just do

export const useStaticQuery: (query: any) => null | object

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

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

packages/gatsby/cache-dir/gatsby-browser-entry.js

Co-Authored-By: sidharthachatterjee <[email protected]>

DSchau

Let's get the tests passing--otherwise I think this is good to go!

pieh · 2019-02-08T17:55:08Z

@vadistic We were doing some checks and yeah, generics are definitely way to go. Remaining question is default type for query results - it seems like using object isn't ideal either:

error TS2339: Property 'foo' does not exist on type 'object'.

64     const test = data.foo
                         ~~~

this in practice forces users to either provide their type definition or use any - maybe we should just default to any?

pieh · 2019-02-08T18:03:49Z

Current blocker:
There is potential timing issue in gatsby develop and we could render page before static query results are available in StaticQueryContext. This might be unlikely but definitely possible. For test I added timeout before emitting static query results in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/websocket-manager.js#L132-L138 which resulted in this:

For <StaticQuery> component this is acceptable because we render Loading state, but we can't do the same for useStaticQuery hook. This can only happen on initial render (or if there are query errors, but then solution is to fix queries) and can cause clientside errors if null checks for query results aren't added.

@pieh to open separate issue to discuss potential solutions.

vadistic · 2019-02-08T19:27:50Z

@pieh good point, skipped my mind :)

Query response will always be string indexed object extending scalar GraphQL types or arrays of those. We could provide index signatures for the first level but yeah, just go with any.

As in my link above - react-apollo does that (350k+ downloads weekly + it's typescript project), so I'm pretty confident it can be considered as standard practice.

wardpeet · 2019-02-13T13:35:37Z

packages/gatsby/src/internal-plugins/query-runner/query-compiler.js

+      ) {
+        report.panicOnBuild(
+          `You're likely using a version of React that doesn't support Hooks.
+Please update to React 16.8.0 or later to use the useStaticQuery hook.`


you probably want to put in the same error message as above?
https://github.com/gatsbyjs/gatsby/pull/11588/files#diff-4bc662f92e2fed3fcf4fa02501ad6d3dR39

Great catch! Fixed.

sidharthachatterjee · 2019-02-13T16:11:29Z

Documentation for this is added in #11741

pieh

LGTM

* master: (76 commits) chore(release): Publish Update relay version once again (gatsbyjs#11767) Update CHANGELOG.md (gatsbyjs#11764) chore(release): Publish Move to @gatsbyjs scoped version of yarn (gatsbyjs#11759) fix(blog): 2019-01-01 json code blocks (gatsbyjs#11750) fix(starters): update dependency gatsby to ^2.1.0 (gatsbyjs#11745) fix(starters): update dependency prop-types to ^15.7.2 (gatsbyjs#11748) feat(showcase): add Incremental.com.au (gatsbyjs#11729) feat(starters): add starter magicsoup.io (gatsbyjs#11670) docs(gatsby): Add documentation for useStaticQuery (gatsbyjs#11741) chore(release): Publish feat(gatsby): add useStaticQuery hook (gatsbyjs#11588) chore(release): Publish chore(docs): reword CSS in JS docs for clarity (gatsbyjs#11439) chore: Upgrade Prettier related packages to the latest (gatsbyjs#11735) fix(core): added event source polyfill in develop to fix IE/edge hmr (gatsbyjs#11582) chore: minify svg husky hook (gatsbyjs#10560) docs: add videos for Gatsby Link + rewrite for flow (gatsbyjs#11700) docs: add egghead lesson to quickstart (gatsbyjs#11699) ...

sidharthachatterjee added 8 commits February 6, 2019 16:00

Add useStaticQuery in typings

abba783

Add useStaticQuery hook in browser entry

e8a59e0

Add traversal code for useStaticQuery in file parser

7dccbc5

Add tests for useStaticQuery production babel transform

d822ae8

Traverse CallExpression for useStaticQuery

99f7891

Remove second argument to setImportForStaticQuery

c07127e

Add a nested visitor for Call Expression with mutations for replace

4ae9ccf

Update snapshots to pass tests

75855af

sidharthachatterjee requested a review from a team as a code owner February 6, 2019 12:32

sidharthachatterjee added the status: WIP label Feb 6, 2019

sidharthachatterjee changed the title ~~feat(gatsby): add hook for useStaticQuery~~ [WIP] feat(gatsby): add hook for useStaticQuery Feb 6, 2019

Linter

d33ea30

sidharthachatterjee commented Feb 6, 2019

View reviewed changes

pieh reviewed Feb 6, 2019

View reviewed changes

packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js Show resolved Hide resolved

sidharthachatterjee added 2 commits February 6, 2019 20:01

Check if useStaticQuery is imported from gatsby

86fe167

Access data from static data files in babel transform

2b9de64

DSchau reviewed Feb 6, 2019

View reviewed changes

Add kitchen sink test

e418d07

sidharthachatterjee commented Feb 6, 2019

View reviewed changes

packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap Outdated Show resolved Hide resolved

Fix return types for useStaticQuery

6eeeef9

DSchau reviewed Feb 6, 2019

View reviewed changes

packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js Outdated Show resolved Hide resolved

sidharthachatterjee added 3 commits February 6, 2019 21:04

Add check for React version when using Hook

7cf7fd2

Add back null return to make linter happy

646be8b

Remove imports to useStaticQuery in production build

e432a08

sidharthachatterjee commented Feb 6, 2019

View reviewed changes

packages/gatsby/cache-dir/gatsby-browser-entry.js Outdated Show resolved Hide resolved

DSchau reviewed Feb 6, 2019

View reviewed changes

packages/gatsby/cache-dir/gatsby-browser-entry.js Outdated Show resolved Hide resolved

Add a test to assert that exported queries work in useStaticQuery

713b36f

Update packages/gatsby/cache-dir/gatsby-browser-entry.js

b505b9f

Co-Authored-By: sidharthachatterjee <[email protected]>

sidharthachatterjee added 4 commits February 8, 2019 19:30

Fix error message and move to a helper function

5f6493c

Add comments in babel transform

82fe7ce

Fail build if using useStaticQuery with a version of React without hooks

10422ed

Don't change old error in StaticQuery

94eb59e

sidharthachatterjee removed the status: WIP label Feb 8, 2019

DSchau reviewed Feb 8, 2019

View reviewed changes

sidharthachatterjee added 2 commits February 8, 2019 21:43

Update snapshots for file parser

08b95d6

Update error message for old React versions

5cbed3f

sidharthachatterjee added the status: WIP label Feb 8, 2019

sidharthachatterjee changed the title ~~feat(gatsby): add useStaticQuery hook~~ [WIP] feat(gatsby): add useStaticQuery hook Feb 8, 2019

m-allanson and others added 3 commits February 12, 2019 18:24

Merge branch 'master' into feat/static-query-hook

c169be5

Update typings

2fd8ec6

Never intentionally return null from useStaticQuery

91a2331

sidharthachatterjee changed the title ~~[WIP] feat(gatsby): add useStaticQuery hook~~ feat(gatsby): add useStaticQuery hook Feb 13, 2019

wardpeet reviewed Feb 13, 2019

View reviewed changes

sidharthachatterjee removed the status: WIP label Feb 13, 2019

sidharthachatterjee added 2 commits February 13, 2019 19:34

Update error message to be consistent

61b364b

Throw with descriptive error if data is undefined in hook

496641a

sidharthachatterjee mentioned this pull request Feb 13, 2019

docs(gatsby): Add documentation for useStaticQuery #11741

Merged

Add new lines in errors

56a73c8

pieh approved these changes Feb 13, 2019

View reviewed changes

pieh merged commit f149c4c into master Feb 13, 2019

jlengstorf deleted the feat/static-query-hook branch February 13, 2019 18:51

gurpreet-hanjra pushed a commit to gurpreet-hanjra/gatsby that referenced this pull request Feb 14, 2019

feat(gatsby): add useStaticQuery hook (gatsbyjs#11588)

1d7de51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gatsby): add useStaticQuery hook #11588

feat(gatsby): add useStaticQuery hook #11588

sidharthachatterjee commented Feb 6, 2019 •

edited by jneterer

Loading

sidharthachatterjee Feb 6, 2019

pieh Feb 6, 2019

sidharthachatterjee Feb 6, 2019

DSchau Feb 6, 2019

sidharthachatterjee Feb 6, 2019

sidharthachatterjee commented Feb 6, 2019 •

edited

Loading

DSchau left a comment

DSchau Feb 6, 2019

DSchau Feb 6, 2019 •

edited

Loading

pieh Feb 6, 2019

sidharthachatterjee Feb 6, 2019 •

edited

Loading

sidharthachatterjee Feb 6, 2019

pieh Feb 6, 2019

pieh Feb 6, 2019

DSchau Feb 6, 2019

DSchau left a comment

pieh commented Feb 8, 2019

pieh commented Feb 8, 2019

vadistic commented Feb 8, 2019

wardpeet Feb 13, 2019

sidharthachatterjee Feb 13, 2019

sidharthachatterjee commented Feb 13, 2019

pieh left a comment

		@@ -20,4 +20,6 @@ export interface StaticQueryProps {

		export class StaticQuery extends React.Component<StaticQueryProps> {}

		export const useStaticQuery: (query: any) => void

		@@ -1,4 +1,4 @@
		import React from "react"
		import React, { useContext } from "react"

feat(gatsby): add useStaticQuery hook #11588

feat(gatsby): add useStaticQuery hook #11588

Conversation

sidharthachatterjee commented Feb 6, 2019 • edited by jneterer Loading

Known Limitations

Todo

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

sidharthachatterjee commented Feb 6, 2019 • edited Loading

DSchau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DSchau Feb 6, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sidharthachatterjee Feb 6, 2019 • edited Loading

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

DSchau left a comment

Choose a reason for hiding this comment

pieh commented Feb 8, 2019

pieh commented Feb 8, 2019

vadistic commented Feb 8, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sidharthachatterjee commented Feb 13, 2019

pieh left a comment

Choose a reason for hiding this comment

sidharthachatterjee commented Feb 6, 2019 •

edited by jneterer

Loading

sidharthachatterjee commented Feb 6, 2019 •

edited

Loading

DSchau Feb 6, 2019 •

edited

Loading

sidharthachatterjee Feb 6, 2019 •

edited

Loading