Explicitly define the return of menu

Author: chrisflatley

theme/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ export interface SidebarProps {
 }
 
 export const Sidebar = ({ location, current }: SidebarProps) => {
+  // The GraphQL query is limited by hard coded recursion.
   const {
     menu: { data: data },
     site: {
@@ -21,7 +22,56 @@ export const Sidebar = ({ location, current }: SidebarProps) => {
     graphql`
       query MenuQuery {
         menu(id: { eq: "menu" }) {
-          data
+          data {
+            id
+            label
+            info {
+              id
+              url
+              order
+              title
+            }
+            items {
+              id
+              label
+              info {
+                id
+                url
+                order
+                title
+              }
+              items {
+                id
+                label
+                info {
+                  id
+                  url
+                  order
+                  title
+                }
+                items {
+                  id
+                  label
+                  info {
+                    id
+                    url
+                    order
+                    title
+                  }
+                  items {
+                    id
+                    label
+                    info {
+                      id
+                      url
+                      order
+                      title
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
         site {
           siteMetadata {

theme/src/components/Tree.tsx

@@ -81,7 +81,7 @@ export const Tree = ({
           items={[]}
         />
       )}
-      {data.items.map((item, index) => (
+      {(data.items || []).map((item, index) => (
         <TreeNode
           key={`${item.label}-${item.info && item.info.url}`}
           navigate={navigate}

theme/src/components/TreeNode.tsx

@@ -1,6 +1,5 @@
 import {
   Collapse,
-  Icons,
   List,
   ListItem,
   ListItemText,
@@ -13,6 +12,8 @@ import React from 'react'
 import { Info, Item } from '../types'
 import { firstUrl } from '../util/tree'
 import { useLayout } from '@committed/layout'
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 export interface TreeNodeProps extends Item {
   isActive: (id: string) => boolean
@@ -34,9 +35,9 @@ export const TreeNode = React.memo(
     level,
     label,
     info,
-    items,
     ...rest
   }: TreeNodeProps) => {
+    const items = rest.items || []
     const theme = useTheme<Theme>()
     const { navVariant, setOpen } = useLayout()
     const url = firstUrl({ id, label, items, info })
@@ -76,9 +77,9 @@ export const TreeNode = React.memo(
                 aria-label={isCollapsed ? 'expand' : 'collapse'}
               >
                 {!isCollapsed ? (
-                  <Icons.KeyboardArrowDown />
+                  <KeyboardArrowDownIcon />
                 ) : (
-                  <Icons.KeyboardArrowRight />
+                  <KeyboardArrowRightIcon />
                 )}
               </IconButton>
             </ListItemSecondaryAction>

theme/src/types/index.d.ts

@@ -31,6 +31,8 @@ export interface Info {
 export interface Item extends Node {
   id: string
   label: string
+  info?: Info
+  items: Item[]
 }
 
 export interface Link {