Gatsby + TypeScript

apollo.config.js

// Root of Gatsby project

module.exports = {
  client: {
    tagName: 'graphql', // this tells Apollo Codegen to look for graphql tagged template literals
    includes: ['src/**/*.tsx', 'src/fragments.ts'], // see fragments.ts below
    service: {
      name: 'gatsby',
      url: 'http://localhost:8000/___graphql',
    },
  },
}

fragments.ts

import { graphql } from 'gatsby'

// put this file inside src folder
// declare your globally available GraphQL fragments here

export const fragments = graphql`
  fragment ContentfulFluid on ContentfulFluid {
    base64
    aspectRatio
    src
    srcSet
    srcWebp
    srcSetWebp
    sizes
  }

  fragment ContentfulFluidSVG on ContentfulFluid {
    tracedSVG
    aspectRatio
    src
    srcSet
    srcWebp
    srcSetWebp
    sizes
  }
`

HeaderLogo.tsx

// Example useStaticQuery
// this is src/components/HeaderLogo.tsx

import { graphql, Link, useStaticQuery } from 'gatsby'
import React from 'react'
import { HeaderLogoQuery } from '../types/__generated__/HeaderLogoQuery'

const query = graphql`
  query HeaderLogoQuery {
    contentfulCompanyMetadata {
      logoClean {
        file {
          url
        }
      }
    }
  }
`

export const HeaderLogo: React.FC = () => {
  const data: HeaderLogoQuery = useStaticQuery(query)
  const { logoClean } = data.contentfulCompanyMetadata

  return (
    <Link to="/">
      <img src={logoClean.file.url} alt="Company Logo" />
    </Link>
  )
}

index.tsx

// Example page query
// This is src/pages/index.tsx

import { graphql } from 'gatsby'
import React from 'react'
import { SEO } from '../components/SEO'
import { HomepageQuery } from '../types/__generated__/HomepageQuery'

export const query = graphql`
  query HomepageQuery {
    contentfulPageHome {
      metaDescription
    }
  }
`

interface Props {
  data: HomepageQuery
}

const Homepage: React.FC<Props> = ({ data }) => {
  const { metaDescription } = data.contentfulPageHome

  return (
    <>
      <SEO metaDescription={metaDescription} />
      <p>Hey I’m the homepage</p>
    </>
  )
}

export default Homepage

package.json

{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "remove-generated-types": "rimraf src/types/__generated__/",
    "generate": "apollo codegen:generate src/types/__generated__/ --outputFlat --target=typescript --watch",
    "clean-generate": "npm run remove-generated-types && npm run generate"
  },
  "dependencies": {
    "gatsby": "^2.6.0",
    "gatsby-plugin-typescript": "^2.0.14",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@types/react": "^16.8.18",
    "@types/react-dom": "^16.8.4",
    "rimraf": "^2.6.3"
  }
}

Steps:

1. Apollo Tooling (aka Apollo CLI) installed globally.
   npm i -g apollo
   Note: would’ve preferred to install this locally under devDependencies. But when I did that, I had problem with graphql package version conflicting with Gatsby’s. Let me know if anyone finds a fix.

2. Run Gatsby dev server

3. mkdir ./src/types (only have to do this once).

4. npm run clean-generate

As a bonus, you get auto-completion and error-checking with VSCode if you install VSCode Apollo extension.

Note: Open Command Palette and run Apollo: Reload Schema when you make changes to your Gatsby GraphQL schema.

you should really preface that this isn't real typescript, since it doesn't use the tsc or ts-loader.

I don’t remember where I shared this