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:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 ⋅ 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 ⋅ 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 ⋅ 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 ⋅ 12 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