Skip to content

Commit 627546f

Browse files
LekoArtsLekoArts
authored
chore(gatsby): Remove <StaticQuery> component (#36569)
1 parent c6d3bf8 commit 627546f

File tree

7 files changed

+220
-201
lines changed

7 files changed

+220
-201
lines changed

‎packages/babel-plugin-remove-graphql-queries/src/index.ts

+50-47
Original file line numberDiff line numberDiff line change
@@ -456,55 +456,58 @@ export default function ({ types: t }): PluginObj {
456456
return null
457457
}
458458

459-
// Traverse for <StaticQuery/> instances
460-
path.traverse({
461-
JSXElement(jsxElementPath: NodePath<JSXElement>) {
462-
const jsxIdentifier = jsxElementPath.node.openingElement
463-
.name as JSXIdentifier
464-
if (jsxIdentifier.name !== `StaticQuery`) {
465-
return
466-
}
459+
if (_CFLAGS_.GATSBY_MAJOR !== `5`) {
460+
// Traverse for <StaticQuery/> instances
461+
path.traverse({
462+
JSXElement(jsxElementPath: NodePath<JSXElement>) {
463+
const jsxIdentifier = jsxElementPath.node.openingElement
464+
.name as JSXIdentifier
465+
if (jsxIdentifier.name !== `StaticQuery`) {
466+
return
467+
}
467468

468-
jsxElementPath.traverse({
469-
JSXAttribute(jsxPath: NodePath<JSXAttribute>) {
470-
if (jsxPath.node.name.name !== `query`) {
471-
return
472-
}
473-
jsxPath.traverse({
474-
TaggedTemplateExpression(
475-
templatePath: NodePath<TaggedTemplateExpression>
476-
) {
477-
setImportForStaticQuery(templatePath)
478-
},
479-
Identifier(identifierPath: NodePath<Identifier>) {
480-
if (identifierPath.node.name !== `graphql`) {
481-
const varName = identifierPath.node.name
482-
path.traverse({
483-
VariableDeclarator(
484-
varPath: NodePath<VariableDeclarator>
485-
) {
486-
if (
487-
(varPath.node.id as Identifier).name === varName &&
488-
varPath.node.init?.type ===
489-
`TaggedTemplateExpression`
469+
jsxElementPath.traverse({
470+
JSXAttribute(jsxPath: NodePath<JSXAttribute>) {
471+
if (jsxPath.node.name.name !== `query`) {
472+
return
473+
}
474+
jsxPath.traverse({
475+
TaggedTemplateExpression(
476+
templatePath: NodePath<TaggedTemplateExpression>
477+
) {
478+
setImportForStaticQuery(templatePath)
479+
},
480+
Identifier(identifierPath: NodePath<Identifier>) {
481+
if (identifierPath.node.name !== `graphql`) {
482+
const varName = identifierPath.node.name
483+
path.traverse({
484+
VariableDeclarator(
485+
varPath: NodePath<VariableDeclarator>
490486
) {
491-
varPath.traverse({
492-
TaggedTemplateExpression(
493-
templatePath: NodePath<TaggedTemplateExpression>
494-
) {
495-
setImportForStaticQuery(templatePath)
496-
},
497-
})
498-
}
499-
},
500-
})
501-
}
502-
},
503-
})
504-
},
505-
})
506-
},
507-
})
487+
if (
488+
(varPath.node.id as Identifier).name ===
489+
varName &&
490+
varPath.node.init?.type ===
491+
`TaggedTemplateExpression`
492+
) {
493+
varPath.traverse({
494+
TaggedTemplateExpression(
495+
templatePath: NodePath<TaggedTemplateExpression>
496+
) {
497+
setImportForStaticQuery(templatePath)
498+
},
499+
})
500+
}
501+
},
502+
})
503+
}
504+
},
505+
})
506+
},
507+
})
508+
},
509+
})
510+
}
508511

509512
// Traverse once again for useStaticQuery instances
510513
path.traverse({

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

+3-94
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,7 @@
1-
import React from "react"
2-
import PropTypes from "prop-types"
31
import loader from "./loader"
42

53
const prefetchPathname = loader.enqueue
64

7-
const StaticQueryContext = React.createContext({})
8-
let StaticQueryServerContext = null
9-
if (React.createServerContext) {
10-
StaticQueryServerContext = React.createServerContext(`StaticQuery`, {})
11-
}
12-
13-
function StaticQueryDataRenderer({ staticQueryData, data, query, render }) {
14-
const finalData = data
15-
? data.data
16-
: staticQueryData[query] && staticQueryData[query].data
17-
18-
return (
19-
<React.Fragment>
20-
{finalData && render(finalData)}
21-
{!finalData && <div>Loading (StaticQuery)</div>}
22-
</React.Fragment>
23-
)
24-
}
25-
26-
const StaticQuery = props => {
27-
const { data, query, render, children } = props
28-
29-
return (
30-
<StaticQueryContext.Consumer>
31-
{staticQueryData => (
32-
<StaticQueryDataRenderer
33-
data={data}
34-
query={query}
35-
render={render || children}
36-
staticQueryData={staticQueryData}
37-
/>
38-
)}
39-
</StaticQueryContext.Consumer>
40-
)
41-
}
42-
43-
const useStaticQuery = query => {
44-
if (
45-
typeof React.useContext !== `function` &&
46-
process.env.NODE_ENV === `development`
47-
) {
48-
throw new Error(
49-
`You're likely using a version of React that doesn't support Hooks\n` +
50-
`Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`
51-
)
52-
}
53-
let context
54-
55-
// Can we get a better check here?
56-
if (
57-
StaticQueryServerContext &&
58-
Object.keys(StaticQueryServerContext._currentValue).length
59-
) {
60-
context = React.useContext(StaticQueryServerContext)
61-
} else {
62-
context = React.useContext(StaticQueryContext)
63-
}
64-
65-
// query is a stringified number like `3303882` when wrapped with graphql, If a user forgets
66-
// to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to
67-
// catch the misuse of the API and give proper direction
68-
if (isNaN(Number(query))) {
69-
throw new Error(`useStaticQuery was called with a string but expects to be called using \`graphql\`. Try this:
70-
71-
import { useStaticQuery, graphql } from 'gatsby';
72-
73-
useStaticQuery(graphql\`${query}\`);
74-
`)
75-
}
76-
77-
if (context[query]?.data) {
78-
return context[query].data
79-
} else {
80-
throw new Error(
81-
`The result of this StaticQuery could not be fetched.\n\n` +
82-
`This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +
83-
`please open an issue in https://github.com/gatsbyjs/gatsby/issues`
84-
)
85-
}
86-
}
87-
88-
StaticQuery.propTypes = {
89-
data: PropTypes.object,
90-
query: PropTypes.string.isRequired,
91-
render: PropTypes.func,
92-
children: PropTypes.func,
93-
}
94-
955
function graphql() {
966
throw new Error(
977
`It appears like Gatsby is misconfigured. Gatsby related \`graphql\` calls ` +
@@ -111,13 +21,12 @@ export {
11121
parsePath,
11222
} from "gatsby-link"
11323

24+
export { graphql, prefetchPathname }
11425
export {
115-
graphql,
116-
StaticQueryContext,
11726
StaticQuery,
27+
StaticQueryContext,
11828
useStaticQuery,
119-
prefetchPathname,
12029
StaticQueryServerContext,
121-
}
30+
} from "./static-query"
12231

12332
export * from "gatsby-script"

‎packages/gatsby/cache-dir/static-query.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from "react"
2+
import PropTypes from "prop-types"
3+
4+
const StaticQueryContext = React.createContext({})
5+
let StaticQueryServerContext = null
6+
if (React.createServerContext) {
7+
StaticQueryServerContext = React.createServerContext(`StaticQuery`, {})
8+
}
9+
10+
function StaticQueryDataRenderer({ staticQueryData, data, query, render }) {
11+
const finalData = data
12+
? data.data
13+
: staticQueryData[query] && staticQueryData[query].data
14+
15+
return (
16+
<React.Fragment>
17+
{finalData && render(finalData)}
18+
{!finalData && <div>Loading (StaticQuery)</div>}
19+
</React.Fragment>
20+
)
21+
}
22+
23+
// TODO(v5): Remove completely
24+
const StaticQuery = props => {
25+
const { data, query, render, children } = props
26+
27+
return (
28+
<StaticQueryContext.Consumer>
29+
{staticQueryData => (
30+
<StaticQueryDataRenderer
31+
data={data}
32+
query={query}
33+
render={render || children}
34+
staticQueryData={staticQueryData}
35+
/>
36+
)}
37+
</StaticQueryContext.Consumer>
38+
)
39+
}
40+
41+
StaticQuery.propTypes = {
42+
data: PropTypes.object,
43+
query: PropTypes.string.isRequired,
44+
render: PropTypes.func,
45+
children: PropTypes.func,
46+
}
47+
48+
const useStaticQuery = query => {
49+
if (
50+
typeof React.useContext !== `function` &&
51+
process.env.NODE_ENV === `development`
52+
) {
53+
// TODO(v5): Remove since we require React >= 18
54+
throw new Error(
55+
`You're likely using a version of React that doesn't support Hooks\n` +
56+
`Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`
57+
)
58+
}
59+
let context
60+
61+
// Can we get a better check here?
62+
if (
63+
StaticQueryServerContext &&
64+
Object.keys(StaticQueryServerContext._currentValue).length
65+
) {
66+
context = React.useContext(StaticQueryServerContext)
67+
} else {
68+
context = React.useContext(StaticQueryContext)
69+
}
70+
71+
// query is a stringified number like `3303882` when wrapped with graphql, If a user forgets
72+
// to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to
73+
// catch the misuse of the API and give proper direction
74+
if (isNaN(Number(query))) {
75+
throw new Error(`useStaticQuery was called with a string but expects to be called using \`graphql\`. Try this:
76+
77+
import { useStaticQuery, graphql } from 'gatsby';
78+
79+
useStaticQuery(graphql\`${query}\`);
80+
`)
81+
}
82+
83+
if (context[query]?.data) {
84+
return context[query].data
85+
} else {
86+
throw new Error(
87+
`The result of this StaticQuery could not be fetched.\n\n` +
88+
`This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +
89+
`please open an issue in https://github.com/gatsbyjs/gatsby/issues`
90+
)
91+
}
92+
}
93+
94+
export {
95+
StaticQuery,
96+
StaticQueryContext,
97+
useStaticQuery,
98+
StaticQueryServerContext,
99+
}

0 commit comments

Comments
 (0)