Learn GraphQL through Contributing to StepZen

#hacktoberfest #opensource #graphql

StepZen filed an issue about writing a GraphQL schema to integrate SpaceX REST API into their React application. I found this as an excellent opportunity for me to learn GraphQL.

Stepzen

If you haven't heard of StepZen, StepZen Docs has a concise and accurate self-introduction:

StepZen provides an easy way to create your entire backend API and connect it to any combination of data sources (e.g. databases, REST APIs). In addition, because StepZen uses GraphQL, you can easily connect your StepZen API to any frontend.

Despite having no previous experience with connecting a GraphQL API to a REST API, I was pretty confident that I could resolve the issue thanks to their clear and well-documented tutorial.

Upon my request to take on the issue, I was welcomed with a comment on how I could get started. Once I got assigned, I was ready to complete these objectives:

Create a GraphQL schema for a SpaceX launch
Create all necessary GraphQL queries for fetching launches from the REST API

GraphQL

Thankfully, GraphQL Docs was pretty straightforward, so it was an enjoyable experience working with it. However, I did encounter an issue that delayed my work for a day.

After a few hours of playing around with GraphQL, I got this schema for a SpaceX Launch:

type LaunchREST {
  details: String
  flight_number: Int
  is_tentative: Boolean
  launch_date_local: Date
  launch_date_unix: Int
  launch_date_utc: Date
  launch_site: LaunchSite
  launch_success: Boolean
  launch_window: Int
  launch_year: String
  links: LaunchLinks
  mission_id: [String]
  mission_name: String
  rocket: LaunchRocket
  static_fire_date_unix: Int
  static_fire_date_utc: Date
  tbd: Boolean
  telemetry: LaunchTelemetry
  tentative_max_precision: String
  timeline: LaunchTimeline
  upcoming: Boolean
  ships: [String]
}

Unfortunately, while testing my query for getting all SpaceX launches by year, I got CEL runtime error. It got even worse since I couldn't find either the solution or even the error itself anywhere on the Internet. I decided to ask for help out of desperation from the StepZen team on Discord. Luckily, I got a super helpful reply from one of their team members:

"What this usually means is that the JSON coming out of the call does not match how you've configured the @rest connector. I would start by confirming that the rest call results in the json you expect, then i'd check my resultroot and any setters, etc. to see where the problem might lie."

Indeed, after rebuilding my Launch schema iteratively, I caught the field that caused the error: launch_date_unix. It was, for some reason, set to Date in my original schema. However, it's supposed to be a large positive number whose conversion is not supported by Date type.

A small fix was immediately applied:

type LaunchREST {
  ...
  launch_date_unix: Int
  ...

After replacing Date with Int, my query finally worked. The best thing about StepZen is that I don't have to write any resolver in order to connect to a data source. For instance, I could connect to SpaceX REST API and fetch the next launch by using @rest connector:

launchNextRestApi: LaunchREST
    @rest(
      endpoint: "https://api.spacexdata.com/v3/launches/next"
    )

After testing my code carefully with StepZen's GraphiQL thoroughly, I made a final commit before squashing all of the previous ones. Finally, my pull request was ready to be reviewed. The moment it got merged was one of the best moments I've had throughout Hacktoberfest 2021.