gatsby-plugin-typegen
Advanced tools
TypeScript/Flow code generation for GatsbyJS queries.
<StaticQuery> and useStaticQuery() in code with generated type name.However, GatsbyJS provides builtin typegen feature since v4.15+. See discussion.
I strongly recommend to use the official feature instead of this plugin. If you would like to experiment with other typegen use cases with this plugin, please leave your idea!
yarn add gatsby-plugin-typegen
# or
# npm install --save gatsby-plugin-typegen
// In your gatsby-config.js
plugins: [`gatsby-plugin-typegen`]
import type { PluginOptions as TypegenPluginOptions } from 'gatsby-plugin-typegen/types';
type Plugin = (
| string
| { resolve: string, options: object }
| { resolve: `gatsby-plugin-typegen`, options: TypegenPluginOptions }
);
const plugins: Plugin[] = [
{
resolve: `gatsby-plugin-typegen`,
options: {
// ... customize options here
},
},
];
module.exports = {
plugins,
};
{
options: {
outputPath: `src/__generated__/gatsby-types.d.ts`,
},
}
{
options: {
language: `flow`,
outputPath: `src/__generated__/gatsby-types.js.flow`,
},
}
Add generated typedefs to .flowconfig:
[lib]
./node_modules/gatsby-plugin-typegen/types.js.flow
./src/__generated__/gatsby-types.js.flow
{
options: {
emitSchema: {
'src/__generated__/gatsby-schema.graphql': true,
},
},
}
Visualized via GraphQL Voyager.
You can use the VSCode GraphQL with a graphql-config file.
Install the VSCode GraphQL extension.
Configure plugin to emit schema and plugin documents.
// gatsby-config.js
module.exports = {
plugins: [
// ...
{
resolve: `gatsby-plugin-typegen`,
options: {
emitSchema: {
'src/__generated__/gatsby-introspection.json': true,
},
emitPluginDocument: {
'src/__generated__/gatsby-plugin-documents.graphql': true,
},
},
},
],
};
Create graphql.config.js file in project root or supported graphql-configs.
// graphql.config.js
module.exports = {
schema: ["src/__generated__/gatsby-introspection.json"],
documents: ["src/__generated__/gatsby-plugin-documents.graphql"],
extensions: {
endpoints: {
default: {
url: "http://localhost:8000/___graphql",
headers: { "user-agent": "JS GraphQL" },
introspect: false,
},
},
},
}
Reload VSCode, gatsby develop to make queries in VSCode.
You can use the extracted schema file for eslint-plugin-graphql!
// gatsby-config.js
module.exports = {
plugins: [
// ...
{
resolve: `gatsby-plugin-typegen`,
options: {
emitSchema: {
'src/__generated__/gatsby-introspection.json': true,
},
},
},
],
};
// .eslintrc.js
const path = require('path');
module.exports = {
plugins: [
'graphql'
],
rules: {
'graphql/template-strings': ['error', {
env: 'relay',
tagName: 'graphql',
schemaJsonFilepath: path.resolve(__dirname, 'src/__generated__/gatsby-introspection.json'),
}],
},
};
The extracted schema file can also be used for ts-graphql-plugin. Using the config defined in Emit schema as GraphQL SDL:
// tsconfig.json
{
"compilerOptions": {
// ...
"plugins": [
{
"name": "ts-graphql-plugin",
"schema": "src/__generated__/gatsby-schema.graphql",
"tag": "graphql"
}
]
},
}
Checkout the full documentation of plugin options from src/types.ts.
This plugin is a bit opinionated about how integrate GatsbyJS and GCG. You cannot customize plugins and its options because this plugin is built for ONLY GatsbyJS queries.
If you wanna use codegen with other plugins (e.g. React Apollo), you can use @graphql-codegen/cli for it.
peerDependencies range.commentDescriptions option in emitSchema in favor of GraphQL.js v16.GatsbyImageData scalar. (See gatsbyjs/gatsby#35683)T | null, instead of T | undefined (which was inaccurate).autoFix option is renamed to autofix. Previous option will be removed in v4.emitPluginDocuments option is renamed to emitPluginDocument. Previous option will be removed in v4.string type for the GatsbyJS's Date scalar by default. (#73)GatsbyTypes).Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Thank you to all our backers! 🙏 [Become a backers]
Does your company has large GatsbyJS codebase? Consider supporting this project! It can help contributors to develop tools and discover patterns so that we can use GatsbyJS more soundly. [Become a sponsor]
graphql-code-generator by @dotansimha
The where this plugin started from.
gatsby-plugin-graphql-codegen by @d4rekanguok
Has almost same goal, but little bit different how handle GraphQL documents. @d4rekanguok also makes great contribution to this plugin as well!
gatsby-plugin-extract-code by @NickyMeuleman
Gives me an idea of ESLint integraiton.
FAQs
Gatsby plugin to play with extream type-safety
The npm package gatsby-plugin-typegen receives a total of 5,393 weekly downloads. As such, gatsby-plugin-typegen popularity was classified as popular.
We found that gatsby-plugin-typegen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
