An example of how to use Gatsby's StaticQuery with Typescript

StaticQuery-and-typescript.tsx

import { graphql, StaticQuery } from 'gatsby';
import * as React from 'react';

interface HeaderProps {
  className: string;
}

interface HeaderPropsWithData extends HeaderProps {
  data: {
    site: {
      siteMetadata: {
        title: string;
      },
    },
  };
}

const Header: React.SFC<HeaderPropsWithData> = ({
  className,
  data,
}) => {
  return (
    <header>
      <h1 className={className}>{data.site.siteMetadata.title}</h1>
    </header>
  );
};

export default (props: HeaderProps) => (
  <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    // tslint:disable-next-line jsx-no-lambda
    render={(data) => <Header data={data} {...props} />}
  />
);