Sign in

Image by LogRocket
Image byLogRocket

A guide to writing your gatsby config files in typescript and auto-generate interfaces from your graphql queries

If you’re anything like me you probably love using Gatsby.js for React front end web development and love using Typescript for all of it’s type safe goodness.

Here’s a few tips I recently figured out for a more complete typescript setup

Write your Gatsby files in Typescript

I always thought it was annoying writing 99% of my website in Typescript then having to go and write the Gatsby createPages() functions in js

The solution for this is gatsby-plugin-ts-config

This plugin is pure greatness.

To get started run

npm install…

My favorite extensions, themes, tips for a beautifully productive development environment


Programs I use on a daily basis

  • Visual Studio Code
  • Alfred 4
  • Insomnia
  • TablePlus
  • GraphQL IDE
  • CleanMyMac

VS Code Setup

Create a dynamic dark-mode theme in gatsby using redux, and styled components

gatsby darkmode codesandbox

Getting Starting

In your Gatsby project run

npm install --save react-redux redux styled-components


yarn add redux react-redux styled-components

Step 1.

Create a new folder in your src/ directory called state Within this folder create the following files

└── state/
├── reducers.js
├── actions.js
└── ReduxWrapper.js

Step 2.

Create redux reducer

// reducers.js
import { combineReducers } from "redux"
import { TOGGLE_THEME } from "./actions"

const initialState = {
isDarkMode: false,

const theme = (state = initialState, action) => {
switch (action.type) {
return {
isDarkMode: !state.isDarkMode,
return state

export default combineReducers({ theme })

Step 3.


First things first you’re going to need to install the styled-components node package.

npm install — save styled-components

The way I like to structure my files for something like this is to create a Theme.js file in my sr/ directory.

Now we are able to start creating our Theme object.

This will act like sass / scss / less variables and we will be able use them across all of our components.


Simple Navbar Component using React, TypeScript, and styled-components.

In this project we will create a simple little Navbar component that has a logo or brand name and features horizontal scrolling.


Building something

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store