2022-04-13
2745
#gatsby#graphql#typescript
Yomi Eluwande
4770
Apr 13, 2022 ⋅ 9 min read

Setting up a TypeScript and Gatsby project with GraphQL

Yomi Eluwande JavaScript developer. Wannabe designer and Chief Procrastinator at Selar.co and worklogs.co.

Recent posts:

Automate Repetitive Tasks With The Pinion Code Generator

Automate repetitive tasks with the Pinion code generator

Discover how the Pinion code generator automates repetitive tasks and boosts productivity compared to tools like Yeoman, Plop, and Hygen.

Joseph Mawa
May 21, 2024 ⋅ 7 min read
Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 min read
View all posts

8 Replies to "Setting up a TypeScript and Gatsby project with GraphQL"

  1. Hi i am sorry if this a dumb question, but i am getting a cannot find ‘__PATH_PREFIX__’ in the layout.tsx. Is this something we are supposed to replace with a value, or does gatsby replace this value? When i clone the repo, this value doesnt seem to play well with typescript.

    1. I don’t believe that’s what Yomi is suggesting. You need to change the extension of blog-post.js to .tsx in line 7 of the gatsby-node.js file.

  2. Hey! Great article. Really easy to follow and understand. I managed to get setup and using TypeScript in a matter of minutes.

    Only problem I ran into was the `”type-check”: “tsc –noEmit”` was running checks on `node_modules` even although it was excluded! What fixed it for me was adding `”skipLibCheck”: true` to the `tsconfig.json` under `compilerOptions`.

    “`
    {
    “compilerOptions”: {
    “module”: “commonjs”,
    “target”: “esnext”,
    “jsx”: “preserve”,
    “lib”: [“dom”, “esnext”],
    “strict”: true,
    “noEmit”: true,
    “isolatedModules”: true,
    “esModuleInterop”: true,
    “noUnusedLocals”: false,
    “allowJs”: true,
    “skipLibCheck”: true //NEW
    },
    “exclude”: [“node_modules”, “public”, “.cache”]
    }
    “`

    Not sure if this will cause further issues down the line, but in the mean time I hope this helps anyone who runs into the same issue!

Leave a Reply