npmpackage.info

Gathering detailed insights and metrics for gatsby-plugin-ts

Other packages similar to gatsby-plugin-ts

gatsby-plugin-ts-config

2.1.3

Configure Gatsby to use Typescript configuration files

@vercel/gatsby-plugin-vercel-builder

2.0.58

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

1.0.11

Track Core Web Vitals in Gatsby projects with Vercel Speed Insights.

babel-preset-gatsby

3.14.0

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.

Gathering detailed insights and metrics for gatsby-plugin-ts

gatsby-plugin-ts

Alternative typescript support plugin for Gatsbyjs. Aims to make using typescript in Gatsby as painless as possible

3.1.1

122

MIT

TypeScript

598,438 2.8

Installations

npm install gatsby-plugin-ts

Pull Requests

Open

21

Total

97

Closed

28

Merged

48

Issues

Open

32

Total

74

Closed

42

Releases

Unable to fetch releases

Developer

d4rekanguok

Developer Guide

BETA

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

Versions

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-codegen is 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

@ricokahler (maintainer),

Bugs & Suggestions

Do you want to send a PR? see this section

Powered By

This project is built upon these awesome projects:

TypeStrong projects:
- TS Loader
- Fork TS Checker Webpack Plugin
The Guild's projects:
- Graphql Code Generator
- Graphql Toolkit

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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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 More

Other packages similar to gatsby-plugin-ts

Other packages similar to gatsby-plugin-ts

gatsby-plugin-ts

Installations

Pull Requests

21

97

28

48

Issues

32

74

42

Releases

Unable to fetch releases

Developer

d4rekanguok

Developer Guide

CommonJS

No

16.13.1

lerna/4.0.0/node@v16.13.1+arm64 (darwin)

Statistics

Languages

Total Downloads

598,438

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Gatsby Typescript

Acknowledgment

Code

Bugs & Suggestions

Powered By

General Q&A

Common warning & errors

Contribute to this repo

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10