{"id":13727340,"url":"https://github.com/d4rekanguok/gatsby-typescript","last_synced_at":"2025-05-07T22:31:07.612Z","repository":{"id":34932046,"uuid":"191909518","full_name":"d4rekanguok/gatsby-typescript","owner":"d4rekanguok","description":"Alternative typescript support plugin for Gatsbyjs. Aims to make using typescript in Gatsby as painless as possible","archived":true,"fork":false,"pushed_at":"2023-03-07T05:36:43.000Z","size":9059,"stargazers_count":122,"open_issues_count":53,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T02:49:02.055Z","etag":null,"topics":["codegen","gatsby","gatsby-plugin","graphql","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d4rekanguok.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-06-14T08:52:23.000Z","updated_at":"2024-04-03T11:55:54.000Z","dependencies_parsed_at":"2024-01-06T08:08:49.625Z","dependency_job_id":null,"html_url":"https://github.com/d4rekanguok/gatsby-typescript","commit_stats":{"total_commits":139,"total_committers":15,"mean_commits":9.266666666666667,"dds":"0.25899280575539574","last_synced_commit":"094b1422bc88195ec0365b79480dcf9c681d6b1a"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rekanguok%2Fgatsby-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rekanguok%2Fgatsby-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rekanguok%2Fgatsby-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rekanguok%2Fgatsby-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d4rekanguok","download_url":"https://codeload.github.com/d4rekanguok/gatsby-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251302782,"owners_count":21567601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codegen","gatsby","gatsby-plugin","graphql","typescript"],"created_at":"2024-08-03T01:03:50.627Z","updated_at":"2025-05-07T22:31:07.056Z","avatar_url":"https://github.com/d4rekanguok.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Gatsby Typescript\n\nAn alternative to the official typescript plugin, with [`ts-loader`](https://github.com/TypeStrong/ts-loader) \u0026 automatic type generation for your graphql queries (using [`graphql-code-generator`](https://github.com/dotansimha/graphql-code-generator))\n\n---\n\n\u003e Hi there 👋 \n\u003e Are you just looking for a way to generate graphql types for your graphql queries?\n\u003e\n\u003e `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](https://github.com/cometkim/gatsby-plugin-typegen) which does almost the same thing \u0026 better maintained.\n\u003e Still, ideas \u0026 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!\n\n---\n\n\nThis monorepo houses 2 packages:\n\n| npm package | Description | Docs |\n|---|---|---|\n| gatsby-plugin-ts | alternative typescript support with `ts-loader` \u0026 automated graphql codegen via `graphql-code-generator` | [`docs`](./packages/gatsby-plugin-ts/readme.md)\n| gatsby-plugin-graphql-codegen | automated graphql codegen via `graphql-code-generator` | [`docs`](./packages/gatsby-plugin-graphql-codegen/readme.md)\n\n---\n\nQuick links: [Acknowledgement](https://github.com/d4rekanguok/gatsby-typescript#acknowledgment) • [General Q\u0026A](https://github.com/d4rekanguok/gatsby-typescript#general-qa) • [Contribute](https://github.com/d4rekanguok/gatsby-typescript#contribute-to-this-repo)\n\n---\n\n## Acknowledgment\n\nSpecial thanks to the contributors, who have improved this project with code, bug reports \u0026 suggestions:\n\n### Code\n\n[@ricokahler (maintainer)](https://github.com/ricokahler),\n\n[@kije](https://github.com/kije),\n\n[@Js-Brecht](https://github.com/Js-Brecht), \n\n[@Kerumen](https://github.com/Kerumen), \n\n[@olee](https://github.com/olee),\n\n[@Tielem](https://github.com/Tielem)\n\n### Bugs \u0026 Suggestions\n\n[@frantic1048](https://github.com/frantic1048), \n\n[@cometkim](https://github.com/cometkim), \n\n[@FrobtheBuilder](https://github.com/FrobtheBuilder), \n\n[@aswinckr](https://github.com/aswinckr), \n\n[@mshick](https://github.com/mshick), \n\n[@joewood](https://github.com/joewood),\n\n[@Jdruwe](https://github.com/Jdruwe)\n\n\u003csmall\u003e\n\nDo you want to send a PR? [see this section](https://github.com/d4rekanguok/gatsby-typescript#contribute-to-this-repo)\n\n\u003c/small\u003e\n\n### Powered By\n\nThis project is built upon these awesome projects:\n\n- TypeStrong projects: \n  - [TS Loader](https://github.com/TypeStrong/ts-loader)\n  - [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)\n\n- [The Guild](https://the-guild.dev/)'s projects:\n  - [Graphql Code Generator](https://github.com/dotansimha/graphql-code-generator)\n  - [Graphql Toolkit](https://github.com/ardatan/graphql-toolkit)\n\nAnd of course, [Gatsbyjs](https://github.com/gatsbyjs/gatsby) and [Typescript](https://github.com/microsoft/typescript)\n\n---\n\n## General Q\u0026A\n\nHere'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!\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Why use \u003ccode\u003egatsby-plugin-ts\u003c/code\u003e?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  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](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats) of `babel-preset-typescript` or (2) use an IDE / code editor that can typecheck for you.\n\n  It also generate typings for your graphql queries, make it easier to strengthen your code.\n\n  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.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  What's the difference between \u003ccode\u003egatsby-plugin-ts\u003c/code\u003e and \u003ccode\u003egatsby-plugin-graphql-codegen\u003c/code\u003e?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  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`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Should I check the generated type definition into git?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  It's up to your preference.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  What is up with all the \u003ccode\u003eMaybe\u0026lt;T\u0026gt;\u003c/code\u003e?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  It's due to Gatsby internal. There's an effort to [make typing more strict here](https://github.com/gatsbyjs/gatsby/issues/20069).\n\n  You also may find the new optional chaining \u0026 nullish coalescing operator in typescript 3.7 helpful to deal with this.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Can I turn off type checking and/or type generating?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  Yes! You can also use node env to determine whether to enable these features.\n\n  ```js\n  // gatsby-config.js\n  {\n    resolve: `gatsby-plugin-ts`,\n    options: {\n      codegen: false,\n      typeCheck: process.env.NODE_ENV === 'development',\n    }\n  },\n  ```\n\n\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  My graphql queries returns \u003ccode\u003enull\u003c/code\u003e\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  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` \u0026 make sure you have a setting similar to this:\n\n  ```js\n  \"compilerOptions\": {\n    \"target\": \"ES2018\",    /* or at least ES2015 */\n    \"module\": \"ESNext\",    /* or at least ES2015 */\n    \"lib\": [\"dom\"],             /* \u003c-- required! */\n    \"jsx\": \"preserve\",          /* \u003c-- required! */\n    \"moduleResolution\": \"node\", /* \u003c-- required! */\n    /* other options... */\n  }\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  What if I have a mixed ts/js codebase?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  You'd have to update your `tsconfig` with the below options:\n\n  ```json\n    \"allowJs\": true,\n    \"outDir\": \"./build\"\n  ```\n\n  The `outDir` option won't be used by ts-loader, but you may need it to satisfy vscode.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Babel doesn't understand the new optional chaining \u0026 nullish coalescing syntax even though my IDE shows no errors\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  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`).\n  \n  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.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Can I write `gatsby-node` in typescript \u0026 have its queries typing generated as well?\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  Yes, but it's not easy at the moment. We're working on it; stay tuned!\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Typechecking causes `gatsby develop` to crash.\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  We're trying to pin down why this happens, please share your experience in [#36](https://github.com/d4rekanguok/gatsby-typescript/issues/36)\n\n\u003c/details\u003e\n\n### Common warning \u0026 errors\nGatsby recently moved plugins' fragments from `.cache` to `node_modules`. We currently support both paths, but sometimes it may cause conflict warnings \u0026 errors:\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  `warning: Unable to find any GraphQL type definitions for the following pointers ...`\n  \u003c/strong\u003e\u003c/summary\u003e\n  \n  If you are annoyed by this warning, set the `documentPaths` options as below:\n\n  ```js\n  // gatsby-config.js\n  {\n    resolve: 'gatsby-plugin-graphql-codegen',\n    options: {\n      documentPaths: [\n        './src/**/*.{ts,tsx}',\n        './node_modules/gatsby-*/**/*.js',\n      ],\n    }\n  },\n  ```\n\n  ~~We will remove the `.cache/fragments` path and bump gatsby peer dependency version in a later release.~~\n\n  **Update**: Since 2.4.0, we've removed `.cache/fragments` \u0026 bump up gatsby peer dep.\n  \n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Duplicate identifier error: \u003ccode\u003eDuplicate identifier 'GatsbyImageSharpFixedFragment'\u003c/code\u003e\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  If you see this error please run a `gatsby clean` to remove fragments in `.cache`, or set the `documentPaths` options as below:\n\n  ```js\n  // gatsby-config.js\n  {\n    resolve: 'gatsby-plugin-graphql-codegen',\n    options: {\n      documentPaths: [\n        './src/**/*.{ts,tsx}',\n        './node_modules/gatsby-*/**/*.js',\n      ],\n    }\n  },\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n  Missing definition \u003ccode\u003eUnknown identifier 'GatsbyImageSharpFixedFragment'\u003c/code\u003e in a yarn/lerna monorepo\n  \u003c/strong\u003e\u003c/summary\u003e\n\n  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 \u0026 yarn. Here's an example with yarn workspace, where `gatsby-transformer-sharp` is always installed in its project's `node_modules`.\n\n  in your root's `package.json`\n  ```json\n  \"workspaces\": {\n    \"packages\": [\"packages/*\"],\n    \"nohoist\": [\n      \"**/gatsby-transformer-sharp\"\n    ]\n  }\n  ```\n\n\u003c/details\u003e\n\n## Contribute to this repo\n\nAll PRs / issues are welcomed.\n\nSteps to run in development:\n\n```bash\n# 0\ngit clone https://github.com/d4rekanguok/gatsby-typescript.git \u0026\u0026 cd gatsby-typescript\n\n# 1 Install deps\nyarn\n\n# 2 Hook up dependencies\nyarn bootstrap\n\n# 3 Build binaries\nlerna run build\n\n# 4 Run test\nyarn test\n```\n\nYou 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](https://github.com/whitecolor/yalc) to test the plugins in your own Gatsby project:\n\n```bash\n# 1 Install yalc\nnpm i yalc -G\n\n# 2 cd into, say, gatsby-plugin-ts\ncd packages/gatsby-plugin-ts\n\n# 3 Publish to yalc\nyalc publish\n\n# 4 cd into your gatsby project\ncd ../../my-gatsby-project\n\n# 5 Install yalc \u0026 re-install deps\nnpm uninstall gatsby-plugin-ts \u0026\u0026 yalc add gatsby-plugin-ts\n\nnpm install\n\n# 6 Subsequent update\nyalc update\n\n# 7 Done? remove yalc deps\nyalc remove --all\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4rekanguok%2Fgatsby-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd4rekanguok%2Fgatsby-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4rekanguok%2Fgatsby-typescript/lists"}