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

gatsby-plugin-ts-checker

1.1.0

Adds typescript type checking to Gatsby

gatsby-plugin-ts-loader

0.1.0

Adds Typescript and tslint support to gatsby.

gatsby-typescript

2.1.2

Typescript support via ts-loader & fork-ts-checker-webpack-plugin + automate codegen

Gathering detailed insights and metrics for gatsby-plugin-ts

gatsby-plugin-ts - 3.1.1 | npmpackage.info

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

129.00 B

647,345 2.8

Installations

npm install gatsby-plugin-ts

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.13.1

NPM Version

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

Pull Requests

Open

21

Total

97

Closed

28

Merged

48

Issues

Open

32

Total

74

Closed

42

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

CSS

TypeScript (78.57%)

JavaScript (14.86%)

CSS (6.56%)

Developer

d4rekanguok

Download Statistics

Total Downloads

647,345

Last Day

145

Last Week

2,326

Last Month

9,215

Last Year

99,942

GitHub Statistics

MIT License

122 Stars

152 Commits

18 Forks

3 Watchers

25 Branches

14 Contributors

Updated on Apr 03, 2024

Bundle Size

142.00 B

Minified

129.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

3.1.1

Package Id

gatsby-plugin-ts@3.1.1

Unpacked Size

12.69 kB

Size

5.13 kB

File Count

NPM Version

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

Node Version

16.13.1

Total Downloads

Cumulative downloads

Total Downloads

647,345

Last Day

-11%

145

Compared to previous day

Last Week

1.7%

2,326

Compared to previous week

Last Month

12%

9,215

Compared to previous month

Last Year

-11%

99,942

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Gatsby Typescript Plugin

An alternative to the official typescript plugin, with ts-loader & automatic type generation for your graphql queries (using graphql-code-generator)

Installation

yarn add typescript gatsby-plugin-ts

Add this to your gatsby config like any other plugins:

1// gatsby-config.js
2module.exports = {
3  plugins: [
4    `gatsby-plugin-ts`,
5  ]
6}

Unlike the official plugin, you'd have to bring your own tsconfig.json.

1# generate a tsconfig if you have none
2tsc --init

In order for this plugin to work right, you'd need to set your compile options like the following:

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
8    /* for mixed ts/js codebase */
9    "allowJs": true,
10    "outDir": "./build"    /* this won't be used by ts-loader */
11    /* other options... */
12  }
13

Options

key	default	value
typecheck options
options.tsLoader	`{}`	option to be passed into `ts-loader`. `transpileOnly` is always `true`, since typechecking is handled by `fork-ts-checker-webpack-plugin`. See ts-loader docs for more
options.alwaysCheck	`false`	⚠️deprecated By default type checking is disabled in production mode (during `gatsby build`). Set this to `true` to enable type checking in production as well
options.typeCheck	`true`	Enable / disable type checking with `fork-ts-checker-webpack-plugin`.
options.forkTsCheckerPlugin	`{}`	Options that'll be passed to `fork-ts-checker-webpack-plugin`. For all options, please see their docs
codegen options
options.codegen	`true`	enable / disable generating definitions for graphql queries
options.documentPaths	['./src/*/.{ts,tsx}', './.cache/fragments/.js', './node_modules/gatsby-/*/.js']	The paths to files containing graphql queries. ⚠️ The default paths will be overwritten by the `documentPaths` you pass in, so please make sure to include all necessary paths ⚠️
options.fileName	`graphql-type.ts`	path to the generated file. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop
options.codegenDelay	`200`	amount of delay from file change to codegen
options.pluckConfig	{ globalGqlIdentifierName: "graphql", modules: [ { name: 'gatsby', identifier: 'graphql' } ] }	options passed to graphql-tag-pluck when extracting queries and fragments from documents
options.failOnError (2.5.0)	`process.env.NODE_ENV === 'production'`	Throw error if the codegen fails. By default only apply to production builds.
options.codegenConfig (^2.7.0)	`{}`	Add config directly to `graphql-codegen`. These key-value config will be applied to every `graphql-codegen` plugins. See graphql-codegen docs on the config field
options.codegenPlugins (^2.7.0)	`[]`	Add additional plugins to `graphql-codegen`. We use the same format as Gatsby's. See example usage below.
options.additionalSchemas (^2.6.0)	[]	array of additional schemas (other than the schema used by gatsby queries) for which types should be generated for. This is useful when you use client-side queries (e.g. with apollo-client) where you are querying another schema/endpoint

Example Setup

Basic

1module.exports = {
2  plugins: [
3    `gatsby-plugin-ts`,
4  ]
5}

Custom Output Path

1module.exports = {
2  plugins: [
3    {
4      resolve: `gatsby-plugin-ts`,
5      options: {
6        fileName: `gen/graphql-types.ts`,
7      }
8    }
9  ]
10}

I need to change everything

1// gatsby-config.js
2{
3  resolve: `gatsby-plugin-ts`,
4  options: {
5    tsLoader: {
6      logLevel: 'warn',
7    },
8    forkTsCheckerPlugin: {
9      eslint: true,
10    },
11    fileName: `types/graphql-types.ts`,
12    codegen: true,
13    codegenDelay: 250,
14    typeCheck: false,
15    pluckConfig: {
16      // this is the default config
17      globalGqlIdentifierName: 'graphql',
18      modules: [
19        { name: 'gatsby', identifier: 'graphql' },
20      ],
21    },
22    additionalSchemas: [
23      {
24        key: 'example',
25        fileName: 'graphql-types-example.ts',
26        schema: 'https://example.com/graphql',
27        pluckConfig: {
28          // config to ensure only queries using the `gql` tag are used for this schema
29          globalGqlIdentifierName: 'gql',
30          modules: [
31            {
32              name: 'graphql-tag',
33              identifier: 'gql',
34            },
35          ],
36        },
37      }
38    ],
39  },
40}

Gatsby files

gatsby-config has to be a .js file
gatsby-node is run directly by node, so it has to be a .js file as well. It is a shame, because in a complicated Gatsby app it is where a lot of logic live & will benefit from ts. As a work around, it can be built with tsc independently, in a script in package.json or somehow in gatsby's pre-init hook.
Gatsby's global variable like __PATH_PREFIX__ can be handled by declaring this code somewhere:

1// src/global.d.ts
2declare const __PATH_PREFIX__: string

Code generation

By default, this plugin will build typing for your queries automatically to graphql-types.d.ts on every edit. Please note that the definition file should not be placed inside src since this triggers a never ending loop during development.

In order to take advantage of the generated code, user needs to name their query:

1// src/pages/index.tsx
2
3  export const pageQuery = graphql`
4-   query {
5+   query BlogIndex {
6      site {
7        siteMetadata {
8          title
9        }
10      }
11  ...

...and import it from the generated type file:

1// src/pages/index.tsx
2
3import { BlogIndexQuery } from '../graphqlTypes'
4
5interface IBlogIndexProps {
6  data: BlogIndexQuery;
7  location: Location;
8}
9
10const BlogIndex: React.FC<IBlogIndexProps> = ({ data, location }) => {
11  ...
12}

Disable type checking in production

Previously this plugin disable type checking in production by default, which can be changed by setting alwaysCheck to true. Since 2.0.0 it no longer does this. If you want to preseve the previous behavior, please set the typeCheck option like below:

1{
2  resolve: 'gatsby-plugin-ts',
3  options: {
4    // Disable type checking in production
5    typeCheck: process.env.NODE_ENV !== 'production',
6  }
7}

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

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

106 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
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-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
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-44fp-w29j-9vj5
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
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-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
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-x7hr-w5r2-h6wg
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-76p7-773f-r4q5
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-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
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 2025-06-30

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

Developer Guide

No

CommonJS

16.13.1

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

Pull Requests

21

97

28

48

Issues

32

74

42

Releases

Unable to fetch releases

Languages

Developer

d4rekanguok

Download Statistics

GitHub Statistics

Bundle Size

142.00 B

129.00 B

Maintainers

Package Meta Information

Total Downloads

647,345

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Gatsby Typescript Plugin

Installation

Options

Example Setup

Basic

Custom Output Path

I need to change everything

Gatsby files

Code generation

Disable type checking in production

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10