Как сделать компонент списка, чтобы перечислить мои содержательные сообщения

Я пытаюсь создать компонент списка, в котором перечислены примеры из моего проекта, поступающие из моей учетной записи Contentful. Я пытаюсь использовать компонент Static Query от Gatsby.

Я попытался ввести данные и сопоставить их с компонентом элемента списка, который в основном принимает заголовок и URL-адрес в качестве реквизита в компоненте ссылки следующим образом:

<li><Link to = {this.props.url} >{this.props.title}</Link></li>

Вот что у меня есть: (не обращайте внимания на опечатку в caseStudyTitile...)

import React from 'react'
import CaseItem from './caseItem/caseItem';

import { StaticQuery } from 'gatsby';

const Cases = () => (
    <StaticQuery
        query = {graphql`
        query CaseStudyQuery {
            allContentfulCaseStudy {
                edges {
                    node {
                        caseStudyTitile
                        slug
                    }
                }
            }
        }
        `}
        render = {data => (
            <div className = "Cases">
                <h3>Case Studies</h3>
                <ul>
                    {data.allContentfulCaseStudy.edges.map(node => (
                        <CaseItem 
                            title = {node.caseStudyTitile} 
                            url = {node.slug}/>
                    ))}
                </ul>
            </div>
        )}
    />

)

export default Cases

Я ожидаю получить список кликабельных ссылок на мои тематические исследования. Вместо этого я получаю список пустых элементов списка с пустыми ссылками.