GRANDstack - Pulling in data with relationships from Neo4j in to React use Apollo

[Seraphits]

Following along with Full Stack GraphQL Book Club - Chapter 6/

I am able to show the data in the log.

And I am able to get the language to show on the page.  However, I can not get to the lesson to put the on the page.  Below is my code.  How can I get the lesson on the page?

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { gql, useQuery } from '@apollo/client';

const GET_LESSON__QUERY = gql`
  query LessonsByLaguageId($pageLanguage: ID!) {
    languages(where: { languageId: $pageLanguage }) {
      languageId
      name
      Lesson {
        id
        name
      }
    }
  }
`;

export const LanguagePage = (props) => {
  const params = useParams();
  const navigate = useNavigate();
  const pageLanguage = params.langauge;

  const { loading, error, data } = useQuery(GET_LESSON__QUERY, {
    variables: { pageLanguage }
  });
  if (error) return <p>Error Getting Data</p>;
  if (loading) return <p>Loading</p>;

  const langauge = data.languages[0];
  console.log('langauge');
  console.log(langauge);
  // const lesson = langauge.$pageLanguage;
  // console.log(lesson);
  console.log(data.languages.lesson);

  return (
    <div>
      <h1>{langauge.name}</h1>
      <button onClick={() => navigate('/langauges')}>Choose a New Language</button>
      <h2>WordWalls</h2>
      {/* {lesson.map((l, i) => {
        <tr key={i}>
          <td>{l.name}</td>
        </tr>;
      })} */}
    </div>
  );
};

@William_Lyon #GRANDstack #GraphQL #React #Apollo 

[Seraphits]

I figured it out.   I had a typo.  

Should be....

const lesson = data.languages[0].Lesson;
  console.log(lesson);