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

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

Or

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

src/
└── 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) {
case TOGGLE_THEME:
return {
...state,
isDarkMode: !state.isDarkMode,
}
default:
return state
}
}

export default combineReducers({ theme })

Step 3.


Setup

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.

Usage


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.

glweems

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