Installations
npm install gatsby-plugin-tsReleases
Unable to fetch releases
Developer
d4rekanguok
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
16.13.1
NPM Version
lerna/4.0.0/node@v16.13.1+arm64 (darwin)
Statistics
122 Stars
152 Commits
18 Forks
4 Watching
25 Branches
14 Contributors
Updated on 03 Apr 2024
Languages
TypeScript (78.57%)
JavaScript (14.86%)
CSS (6.56%)
Total Downloads
Cumulative downloads
Total Downloads
598,438
Last day
30.9%
364
Compared to previous day
Last week
12.4%
1,861
Compared to previous week
Last month
-3.2%
7,630
Compared to previous month
Last year
0.7%
110,542
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
4
Gatsby Typescript
An alternative to the official typescript plugin, with ts-loader & automatic type generation for your graphql queries (using graphql-code-generator)
Hi there 👋 Are you just looking for a way to generate graphql types for your graphql queries?
gatsby-plugin-graphql-codegenis what you want. However, other maintainers and I haven't been able to keep this repo up to shape. Please have a look at @cometkim's graphql-plugin-typegen which does almost the same thing & better maintained. Still, ideas & PRs are all welcomed. If you'd like to help maintain this project, please feel free to reach out. Thank you, have a great day!
This monorepo houses 2 packages:
| npm package | Description | Docs |
|---|---|---|
| gatsby-plugin-ts | alternative typescript support with ts-loader & automated graphql codegen via graphql-code-generator | docs |
| gatsby-plugin-graphql-codegen | automated graphql codegen via graphql-code-generator | docs |
Quick links: Acknowledgement • General Q&A • Contribute
Acknowledgment
Special thanks to the contributors, who have improved this project with code, bug reports & suggestions:
Code
Bugs & Suggestions
Do you want to send a PR? see this section
Powered By
This project is built upon these awesome projects:
-
TypeStrong projects:
-
The Guild's projects:
And of course, Gatsbyjs and Typescript
General Q&A
Here's a list of common questions I've seen since releasing this project. If you have a question that's not here, please don't hesitate to open an issue!
Why use gatsby-plugin-ts?
Gatsby use babel-preset-typescript which strips type information out of your code without doing typecheck. gatsby-plugin-ts use ts-loader, so you don't have to (1) worry about the caveats of babel-preset-typescript or (2) use an IDE / code editor that can typecheck for you.
It also generate typings for your graphql queries, make it easier to strengthen your code.
If you're already using something like VSCode and/or don't want to do typecheck in production, you can toggle off the typecheck option.
What's the difference between gatsby-plugin-ts and gatsby-plugin-graphql-codegen?
Originally belong to the same plugin, the codegen portion was extracted to gatsby-plugin-graphql-codegen so it can be used with the official typescript plugin. If you are already using gatsby-plugin-ts, you don't need gatsby-plugin-graphql-codegen.
Should I check the generated type definition into git?
It's up to your preference.
What is up with all the Maybe<T>?
It's due to Gatsby internal. There's an effort to make typing more strict here.
You also may find the new optional chaining & nullish coalescing operator in typescript 3.7 helpful to deal with this.
Can I turn off type checking and/or type generating?
Yes! You can also use node env to determine whether to enable these features.
1// gatsby-config.js 2{ 3 resolve: `gatsby-plugin-ts`, 4 options: { 5 codegen: false, 6 typeCheck: process.env.NODE_ENV === 'development', 7 } 8},
My graphql queries returns null
Gatsby extract graphql queries statically and it only understand queries inside template literal. It's possible that tsc is transpiling your template literal to string concat quivalent. Check your tsconfig.json & make sure you have a setting similar to this:
1"compilerOptions": { 2 "target": "ES2018", /* or at least ES2015 */ 3 "module": "ESNext", /* or at least ES2015 */ 4 "lib": ["dom"], /* <-- required! */ 5 "jsx": "preserve", /* <-- required! */ 6 "moduleResolution": "node", /* <-- required! */ 7 /* other options... */ 8}
What if I have a mixed ts/js codebase?
You'd have to update your tsconfig with the below options:
1 "allowJs": true, 2 "outDir": "./build"
The outDir option won't be used by ts-loader, but you may need it to satisfy vscode.
Babel doesn't understand the new optional chaining & nullish coalescing syntax even though my IDE shows no errors
If you are using gatsby-plugin-ts, before you go off and install a bunch of babel plugins like a lot of tutorials suggest, check if your compilation target in tsconfig.json is too high (ESNext or ES2019).
With these targets, tsc will leave the new syntax as-is, which babel might not understand. Downgrade them to ES2018 should fix the issue; also make sure your IDE's typescript version is the same as the one listed in your package.json dependency.
Can I write `gatsby-node` in typescript & have its queries typing generated as well?
Yes, but it's not easy at the moment. We're working on it; stay tuned!
Typechecking causes `gatsby develop` to crash.
We're trying to pin down why this happens, please share your experience in #36
Common warning & errors
Gatsby recently moved plugins' fragments from .cache to node_modules. We currently support both paths, but sometimes it may cause conflict warnings & errors:
`warning: Unable to find any GraphQL type definitions for the following pointers ...`
If you are annoyed by this warning, set the documentPaths options as below:
1// gatsby-config.js 2{ 3 resolve: 'gatsby-plugin-graphql-codegen', 4 options: { 5 documentPaths: [ 6 './src/**/*.{ts,tsx}', 7 './node_modules/gatsby-*/**/*.js', 8 ], 9 } 10},
We will remove the .cache/fragments path and bump gatsby peer dependency version in a later release.
Update: Since 2.4.0, we've removed .cache/fragments & bump up gatsby peer dep.
Duplicate identifier error: Duplicate identifier 'GatsbyImageSharpFixedFragment'
If you see this error please run a gatsby clean to remove fragments in .cache, or set the documentPaths options as below:
1// gatsby-config.js 2{ 3 resolve: 'gatsby-plugin-graphql-codegen', 4 options: { 5 documentPaths: [ 6 './src/**/*.{ts,tsx}', 7 './node_modules/gatsby-*/**/*.js', 8 ], 9 } 10},
Missing definition Unknown identifier 'GatsbyImageSharpFixedFragment' in a yarn/lerna monorepo
Are you using a monorepo? It's possible that the missing fragment's plugin is 'hoisted' (moved to workspace root's node_modules). A simple fix is use a nohoist config, supported by both lerna & yarn. Here's an example with yarn workspace, where gatsby-transformer-sharp is always installed in its project's node_modules.
in your root's package.json
1"workspaces": { 2 "packages": ["packages/*"], 3 "nohoist": [ 4 "**/gatsby-transformer-sharp" 5 ] 6}
Contribute to this repo
All PRs / issues are welcomed.
Steps to run in development:
1# 0 2git clone https://github.com/d4rekanguok/gatsby-typescript.git && cd gatsby-typescript 3 4# 1 Install deps 5yarn 6 7# 2 Hook up dependencies 8yarn bootstrap 9 10# 3 Build binaries 11lerna run build 12 13# 4 Run test 14yarn test
You can test your code against the starters inside the repo. Don't forget to checkout the changes in those repo before sending a PR. Alternatively, use yalc to test the plugins in your own Gatsby project:
1# 1 Install yalc 2npm i yalc -G 3 4# 2 cd into, say, gatsby-plugin-ts 5cd packages/gatsby-plugin-ts 6 7# 3 Publish to yalc 8yalc publish 9 10# 4 cd into your gatsby project 11cd ../../my-gatsby-project 12 13# 5 Install yalc & re-install deps 14npm uninstall gatsby-plugin-ts && yalc add gatsby-plugin-ts 15 16npm install 17 18# 6 Subsequent update 19yalc update 20 21# 7 Done? remove yalc deps 22yalc remove --all
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 8/26 approved changesets -- score normalized to 3
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/npm7.yml:1
- Warn: no topLevel permission defined: .github/workflows/pull-request.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm7.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/d4rekanguok/gatsby-typescript/npm7.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm7.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/d4rekanguok/gatsby-typescript/npm7.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/d4rekanguok/gatsby-typescript/pull-request.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/d4rekanguok/gatsby-typescript/pull-request.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/d4rekanguok/gatsby-typescript/pull-request.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/npm7.yml:18
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
Reason
92 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-fp36-299x-pwmw
- Warn: Project is vulnerable to: GHSA-wm7h-9275-46v2
- Warn: Project is vulnerable to: GHSA-23wx-cgxq-vpwx
- Warn: Project is vulnerable to: GHSA-f6v4-cf5j-vf3w
- Warn: Project is vulnerable to: GHSA-273r-mgr4-v34f
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-mhxj-85r3-2x55
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
- Warn: Project is vulnerable to: GHSA-h2pm-378c-pcxx
- Warn: Project is vulnerable to: GHSA-7ch4-rr99-cqcw
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-x565-32qp-m3vf
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-rjqq-98f6-6j3r
- Warn: Project is vulnerable to: GHSA-mjxr-4v3x-q3m4
- Warn: Project is vulnerable to: GHSA-cgfm-xwp7-2cvr
- Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
- Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
2.8
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to gatsby-plugin-ts
gatsby-plugin-ts-config
Configure Gatsby to use Typescript configuration files
@vercel/gatsby-plugin-vercel-builder
This plugin generates [Vercel Build Output API v3](https://vercel.com/docs/build-output-api/v3) for Gatsby v4+ projects.
@vercel/gatsby-plugin-vercel-analytics
Track Core Web Vitals in Gatsby projects with Vercel Speed Insights.
babel-preset-gatsby
Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable support for writing modern JavaScript — while still supporting older browsers. This package contains the default Babel setup for all Gatsby projects.