TypeError: Cannot read property 'nodes' of undefined on Gatsby Develop

[ljdatasci]

I'm using the new File System API and I'm trying to render my blog index page with a GraphQL query:

import * as React from "react";
import Layout from "../components/layout"
import { 

, Link} from "gatsby";

type Frontmatter = {
  date: string;
  title: string;
}

type File = {
  name: string
}
type Post = {
  id: number;
  frontmatter: Frontmatter;
  parent: {File: File}
}
type AllMarkdownRemark = {
  nodes: Post[]; 
}
type IndexPageProps = {
  allMarkdownRemark: AllMarkdownRemark
}

const IndexPage: React.FC<IndexPageProps> = (data) => (
    <Layout>
        <h2>Hi people</h2>
        <p>Welcome to my blog.</p>
        <ul>
          {data.allMarkdownRemark.nodes.map((post) => 
            <li key={post.id}>
               <Link to={`/blog/${post.parent.File.name}`}></Link>
               {post.frontmatter.title}
            </li>
          )}
        </ul>
    </Layout>
)

export default IndexPage;

export const query = graphql`
  query {
    allMarkdownRemark {
      nodes {
        id
        frontmatter {
          title
        }
        parent {
          ... on File {
            name
          }
        }
      }
    }  
  }
`

When I run 'yarn start (gatsby develop)' I get the following error:

However, I can see the blog posts in the GraphQL Explorer:

{
"data": {
"allMarkdownRemark": {
"nodes": [
{
"parent": {
"id": "a54355b0-d52a-5763-95b4-9b573d654988",
"name": "blog1"
},
"frontmatter": {
"date": "2019-05-04",
"title": "My first blog post"
}
}
]
}
},
"extensions": {}

Is the File System API supported by the Gatsby TypeScript plugin? Are there issues with using TypeScript with Gatsby?

[ljdatasci]

Fixed.