Differences in Lesson Loading GraphQL Requests

[jbranchaud]

As part of trying to understand what attributes and associated data we need when loading a Lesson for a lesson page, I compared and contrasted the loadLesson and loadBasicLesson graphql queries that appear in src/lib/lessons.ts.

I'll summarize my findings and then reproduce the entire annotated queries.

Headline

The headline for me is that I think we can make a couple (4) small adjustments to the loadLesson function for all our needs and then throw away the loadBasicLesson function. For starters, this will reduce confusion about which to use and when. There is no way to make that decision at a quick glance because both are loading most of the kitchen sink. From here, there is probably additional trimming down and clarifying that we can do.

Summary

After doing a side-by-side comparison of the two queries, I was able to rearrange a few attributes and then add comments on both sides for the ones that were missing (annotated by """ some_attr """).

For loadLesson, the only attributes that loadBasicLesson requests that it doesn't already request are:

• lesson.updated_at
• lesson.published_at
• collection.playlist.lesson[].media_url
• collection.course.lesson[].media_url

For loadBasicLesson, they are still quite similar but it is missing a few more attributes:

• lesson.duration
• lesson.transcript_url
• lesson.next_up_url
• lesson.dash_url
• lesson.http_url
• lesson.lesson_view_url
• lesson.download_url
• collection.playlist.lesson[].thumb_url
• collection.course.lesson[].thumb_url
• lesson.course.title
• lesson.course.square_cover_480_url
• lesson.course.slug
• lesson.repo_url
• lesson.code_url

Annotated Queries

""" loadLesson """
const query = /* GraphQL */ `
  query getLesson($slug: String!) {
    lesson(slug: $slug) {
      slug
      title
      duration
      transcript
      transcript_url
      description
      free_forever
      subtitles_url
      media_url
      next_up_url
      hls_url
      dash_url
      http_url
      thumb_url
      lesson_view_url
      path
      icon_url
      download_url
      created_at
      """ updated_at """
      """ published_at """
      staff_notes_url
      collection {
        ... on Playlist {
          title
          slug
          type
          square_cover_480_url
          path
          lessons {
            slug
            type
            path
            title
            completed
            duration
            """ media_url """
            thumb_url
          }
        }
        ... on Course {
          title
          slug
          type
          square_cover_480_url
          path
          lessons {
            slug
            type
            path
            title
            completed
            duration
            thumb_url
            """ media_url """
          }
        }
      }
      tags {
        name
        label
        http_url
        image_url
      }
      instructor {
        full_name
        avatar_64_url
        slug
        twitter
      }
      comments {
        comment
        commentable_id
        commentable_type
        created_at
        id
        is_commentable_owner
        state
        user {
          avatar_url
          full_name
          instructor {
            first_name
          }
        }
      }
      course {
        title
        square_cover_480_url
        slug
      }
      repo_url
      code_url
    }
  }
`

---

""" loadBasicLesson """
const query = /* GraphQL */ `
  query getLesson($slug: String!) {
    lesson(slug: $slug) {
      slug
      title
      """ duration """
      transcript
      """ transcript_url """
      description
      free_forever
      subtitles_url
      media_url
      """ next_up_url """
      hls_url
      """ dash_url """
      """ http_url """
      thumb_url
      """ lesson_view_url """
      path
      icon_url
      """ download_url """
      created_at
      updated_at
      published_at
      staff_notes_url
      collection {
        ... on Playlist {
          title
          slug
          type
          square_cover_480_url
          path
          lessons {
            slug
            type
            path
            title
            completed
            duration
            media_url
            """ thumb_url """
          }
        }
        ... on Course {
          title
          slug
          type
          square_cover_480_url
          path
          lessons {
            slug
            type
            path
            title
            completed
            duration
            """ thumb_url """
            media_url
          }
        }
      }
      tags {
        name
        label
        http_url
        image_url
      }
      instructor {
        full_name
        avatar_64_url
        slug
        twitter
      }
      comments {
        comment
        commentable_id
        commentable_type
        created_at
        id
        is_commentable_owner
        state
        user {
          avatar_url
          full_name
          instructor {
            first_name
          }
        }
      }
      """
      course {
        ...
      }
      """
      """ repo_url """
      """ code_url """
    }
  }
`