Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of how to use Gatsby's StaticQuery with Typescript
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} />}
/>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment