Discover the 💯 toolings and learnings from creating a production ready modern API, made on 🌎 by & for humans!
 🌖](https://res.cloudinary.com/practicaldev/image/fetch/s--_9NfY8Gx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/3840/1%2AixnzMP6t4Iot9nZpBmr1Vw.png)
Next destination: SpaceX Land 🌖
Did you ever 🤔 yourself…
How tall is a rocket? How many launches have already successfully landed-back?, What’s the maximum crew capacity of a capsule?
If you did so, I might have great news for you!
🥁 I’m pleased to announce…
The SpaceX 🚀 GraphQL API is now live 🎉
An API for
👩💻👨🏫 Techies
👴👩🌾 & no techies
🌏🌖 from everywhere
💻📱 with any device
also,
for those
👩🚀 little dreamers 👨🚀
Open the link & just enjoy interacting with real SpaceX data ✨
Discover all the interesting details about capsules, cores, landpads, launches, missions, payloads, rockets, ships & much more. You could even check if Elon’s 🚗 Roadster has finally arrived to Mars!
Before going into technical details, let me be gentle with the 90% of people who don’t know what an API is, just telling an anecdote…
During the traditional 2018 🎄Christmas dinner, I was having a talk with my physics fanatic uncle about the work I was doing with the SpaceX API (he had never hear about what’s an API, but he does like rocket stuff so was willing to listen), I picked up my 💻, opened the browser and with a few button presses, we got all the SpaceX rocket’s name, description & engine details, he was surprised of how easy it was (now you could even do it with your📱, it’s just mind blowing).
After that, yep, I lost my laptop for the next hour 😂, he knows a lot about thrusters & such, thus, he started to explore the API meanwhile I was playing with the little ones. At some point, he fetched some launches images and genuinely, my 5yo cousin asked if I was inside of that 🚀 (I love those kiddo’s life perspective, they do believe anything is possible). By then, it had already happened, thanks to such accessible technology & their incredible features, we, the three of us, spent part of the evening just being amazed about rocket missions, capsules & other SpaceX data!
Moral: Let’s build accessible software to keep motivating people passions & dreams!
For humans & everyone else 👽
P.S.: The little one already know more about SpaceX than me (as he was playing around with the API during all this month). I’m so 😃 just because of the fact he’s curious to learn.
Developer’s space
Ok, now, let’s dig into the technical details. As I strongly believe that accessibility & a great U/DX are essentials in order for a Software to have adoption, you’ll probably have to deal with other concerns as I had when I discovered the existing SpaceX API implementation…
Motivations
When I found it, I was really excited to look into the available data but… within a few minutes I was already** dealing with versions, docs & 3rd party SWs**, basically, I gave up then I decided to start the migration!
In this post you’d find in detail the main reasons about why it happened.
Migrating SpaceX API to GraphQL 🚀
*As another lover of physics, astronomy and rockets, when I found the SpaceX Public API (thanks to Full Stack Apollo…*medium.com
Benefits
Tons of articles have been written by experts about the pros/cons of GraphQL & REST APIs. I’m not going to repeat those here but I’d totally encourage you to research about it, you could also check the GraphQL official website to get introduced to it main features!
GraphQL: A query language for APIs.
*GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they…*graphql.org
Implementation
Let’s talk about project structure, type-safety & security showing the main tools & best practices used:
⚫️ It follows the Schema-First approach using a domain modular **schema **structure.
The schema is splitted by the different data collections (capsule, company, core, dragon, history, landpad, launch, launchpad, mission, payload, roadster, rocket & ship), also contains the global type definitions (*composed by both, commons & primitive GraphQL type definition*s)
All of them are subdivided into the following:
🔘 typeDefs
It contains the data collection type definitions modularized by concerns.
🔘 resolvers
Functions responsible for fetching & filtering the desired data.
🔘 utils
Composed by parse functions or any operation that the returned data could need!
Even knowing that the current GraphQL API implementation is not too complex, it might/will grow, that means we have to care about modularity in order to avoid code refactors, having said that…
💡 Break your schema by concern, not by types!
It’ll allow you to easily identify your trivial resolvers & reuse the logic functions within them 👌
❌ By types
Even if you’d split your resolvers, you could mess everything up whenever you’d have to import functions from other data collections 👎
✅ By concern
Identify smartly your trivial resolvers & reuse their functions, it’d be a huge win if you’d have to scale in the future 👍
⚫️ It provides Type-Safety auto generating typeDefs & resolvers TypeScript types.
Having our GraphQL schema as Single Source of Truth, **we might want to **auto-generate all our types in order to keep the data structures in sync over the whole application. Here is where the **GraphQL Code Generator** (created by Dotan Simha) comes in!
GraphQL Code Generator *Generate code from your GraphQL schema with a single function call*
graphql-code-generator.com
⚙️ It generates all the typeDefs & resolver functions (including args & returned data) TypeScript types.
Don’t miss the following post if you’d like to more about it implementation & benefits!
Type-Safe GraphQL Servers 🔎
*This post exhibits the motivations & steps for adding Type-Safety into GraphQL Servers*medium.com
⚫️ It’s protected from infinite **& complex requests** providing custom error messages.
Thinking in GraphQL as a huge endpoint where all the data is available, not having the right protections might cause vulnerabilities such as being affected by DoS (Denial of Service) attacks.
It can be easily avoided with tooling like graphql-rate-limit, graphql-depth-limit & graphql-validation-complexity
If you’re interested on securing your GraphQL API, don’t miss this Max Stoiber article where it gives a 💯 overview about the main problems & its respective solutions!
Securing Your GraphQL API from Malicious Queries
*Working with GraphQL is amazing, but also has complex security implications. Let’s dig into some essential protections…*blog.apollographql.com
Data
You’ve probably wondered about where the data is coming from, before dig into that, you have to know that the data exposed over the API…
⚠️ Is not official data
Although, IT IS REAL DATA provided by several SpaceX information sources where the **main **is the Reddit SpaceX forum
It Wiki section is full of data written by the community members, also, there’re more coming from the following sites:
-
All the data from these platforms is parsed & collected in a public Mongo database from where the information is obtained.
This incredible work was done by the most popular non official SpaceX REST API (which is running already for 2 years). I wanna give them a great shout-out for such a work giving us the capabilities to access all this interesting data.
r-spacex/SpaceX-API 🚀Open Source REST API for rocket, core, capsule, pad, and launch data
I’d totally encourage you to help them proposing new features or fixing existing bugs, they’ll definitely appreciate it!
The SpaceX GraphQL API
You might want to take a 👀 at the codebase where you’ll find all the implementation about the mentioned topics, here it is!
👉 The Repo & The API & The Docs & The Everything👇
✋, there’s more…
What if you don’t wanna use GraphQL? That’s fair, but… What if you could generate a REST API based on your GraphQL implementation to get all the benefits from both worlds? 🤔, does it even make sense?
It really does, you’d want to get all the advantages of GraphQL while using & exposing REST, such as:
🔘 Fully up-to-date generated documentation.
🔘 Runtime data validation **ensuring type-safety.
🔘 No more** painful versioning.
🔘 Forget write manually routes & controllers.
➕ much more
Now, this is possible 🤯 , just Rest with Sofa (Kamil Kisiela's invention) auto-generating a REST API based on your GraphQL schema!
😉sofa — The best way to REST (is GraphQL). Ending the REST vs GraphQL debate once and for all
Speaking of which, 🥁 I also gotta announce…
The SpaceX REST API is also UP 🎊
Open the link & try the available endpoints out💫
If you’re a REST API fan, you can fetch the data exposed through the documented endpoints. In addition you’ll be able to get all the mentioned benefits from GraphQL, such as, up-to-date typed Docs!
Although, if you’re looking for performance, I’d recommend you use the existing REST API!
If you’ve already implemented a GraphQL API, within a few minutes you could also have a REST one, check how you could implemented it!
⚪️ Use ‘express’ and share your schema (composed by typeDefs & resolvers), as well as your context over the servers!
⚪️ Use sofa & OpenAPI in order to generate a* REST API* based on your GraphQL implementation. You might also wanna use ‘swagger-ui-express’ to serve the docs!
⚪️ Use ‘apollo-server-express’ & apply the ‘app’ express instance to the GraphQL server!
That’s it! GraphQL💜 REST, stop arguing & take advantage from both worlds!
PRs are more than welcome 🤗
There’re still a lot of work to do, starting from error handling, testing, etc… I’d love to receive any proposal/issue in order to improve the existing!
spacexland/api 🚀GraphQL & REST APIs to explore rockets, launches & other SpaceX’s data*github.com
Also I’d animate you to contribute with all the mentioned technologies, they’ve already done such an incredible work but I’m pretty sure that they’d appreciate some help!
Build cool 🚀 stuff
It was never easier to create & share 💯 web application projects using your favs FE libraries, thanks to Codesanbox Ives van Hoorne’s creation. Whether you’re starting with GraphQL or not, give a 👀 at the differents live examples, you could discover interesting ways of use!
❤️ Angular
Learn how to interact with a GraphQL API using TypeScript within a MVVM architecture.
💙 React
Hooks are already here (not kidding, check this out)and you can use them together with GraphQL client libraries as ‘react-apollo-hooks’ 🤩
💚 Vue
You might want to use learn how to write Queries & fetch data with the coolest Progressive JavaScript Framework!
Pick whichever programming language & FE library you feel confident with, schedule some ⏳ in your calendar & enjoy coding 👌 webapps!
If self-learning wasn’t a enough reason to build something, you might wanna know that there’re people from all over the 🌍 willing to learn from your projects, speaking off…
If Elon couldn’t convince you, do it for them, the OSS community will really appreciate your work! Anyways I’ve got great plans for every single SpaceX CodeSandbox created, in special for the 💡 ones, help me out with that!
Credits
First I want to encourage anybody to begin writing blog posts, you’re totally capable to do that 💪, I’ve just started a couple months ago (I don’t even write a proper English) and I cannot be happier about it, you’ll get better, it’s just matter of time. Share whatever you 💜, people will learn, like & thank it!
If you’re a GraphQL enthusiast as I am, I’d definitely recommend post on Open GraphQL. It’s a publication open to anything & everything GraphQL related runned by Nader Dabit, message him!, surely he’ll be willing to have you on board!
Also, I’d want to give a shout-out to The Guild Urigo’s foundation for supporting the GraphQL community with tooling like GraphQL Code Generator, 😉 sofa, GraphQL Modules & GraphQL Inspector among others, it really changes the DX!
To wrap it up, just wishing that you could learn something from this post, in addition to, please, keep contributing with the incredible OSS community 🤗
We are approaching our next destination 🌖, stay tuned not to miss the landing!
Please, consider🙏🏻ing, contribut♻️ing and shar💜ing it!
Top comments (0)