Learn GraphQL through Contributing to StepZen
Oliver Pham
Posted on October 31, 2021
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 myresultroot
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.
Posted on October 31, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.