DEV Community

Cover image for NASA PLACE
Andrés Jiménez Arias
Andrés Jiménez Arias

Posted on

NASA PLACE

andresjiar image

Welcome to Nasa Place 💃🎉

Discover curious and interesting data provided by NASA through the facilities provided by the GraphQL toolAlt Text

Launching of NASA GraphQL API

To access the App, you just have to put nasa.place in the bar of your browser and you will access the client or you can also click [here][https://www.nasa.place/].

Alt Text

🎇✨Nasa Place API ✨🎇
NASAPLACE API is now available!!!🎉
Nasa Place API is made up of a GraphQL API, which is the default, and a Rest API that you can access by putting /rest in the bar where the page address is located.
In this API where you can explore some curious data that NASA offers.
In this API you can explore:

  • Natural events 🌎
  • Photos of astronomical events 🌌
  • Exoplanets
  • The time recorded by NASA's InSight Mars module 🌦
  • Photos taken by the Curiosity, Opportunity and Spirit rovers 🤖📸
  • Information about near-Earth asteroids ☄
  • Information about some objects that orbit the Earth 🛰
  • Some of the projects that NASA is working on 💻📋

Click on the link and navigate between the API data

Before this blog gets a bit more technical, I'm going to explain why this API was created.
I am a self-taught student of Web Developer and when I have completed several courses in GraphQL, TypeScript, React, etc ... I decided to venture to make an app with REST APIs and GraphQL. Looking for free APIs, I found a page in which there were many free NASA APIs and I decided to take one of them and start migrating to GraphQL, in this case I think I remember that the first was the Exoplanets. After a short time I managed to finish it and I did not see too much difficulty, so, I decided to take several of these APIs that I consider to be interesting data and that we have free access to them and put them all together in a single GraphQL application to have a easy access to them.

Migration

I decided to make the migration, apart from to test my knowledge, it is because to be able to access this curious data I had to look for the URL that would give me the correct JSON, long loading times until my browser was able to load a quantity of data huge when I just wanted to explore the data

The steps I followed were:

1️⃣ Configure the server and Schema
2️⃣ Create the Typedef's and resolvers
3️⃣ Implement solving trivials
4️⃣ Fix mistakes and apply lessons learned
5️⃣ Launch it 🚀

Benefits

Alt Text

I'm not going to get into all the pros / cons between GraphQL and REST as there are many articles written by experts on this topic. But if I can leave you to the official page of GraphQL if you want to know about this query language (Query language)

Alt Text

Implementation

Let’s talk about project structure and type-safety
showing the main tools & best practices used:

🟣 It follows the Schema-First approach using a domain modular schema structure.

Alt Text

🟣 The schema is splitted by the different data collections (apod, eonet, epic, exoplanet, insight, marsroverphoto, neo, techport, tle), also contains the global type definitions (composed by both, commons & primitive GraphQL type definitions)
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!

typeDefs Alt Text resolvers

🟣It provides Type-Safety auto generating typeDefs & resolvers TypeScript types.

CodeSandbox

I decided to make three CodeSandboxes with a simple version with React, Angular and Vue, so that you can see easier how I get the data from the different APIs for the client.
💫Angular Starter ❤ (CodeSandbox)[https://codesandbox.io/s/angular-starter-nasa-place-iuf5t]

💫React Starter 💙 (CodeSandbox)[https://codesandbox.io/s/react-starter-nasa-place-h660w]

💫Vue Starter 💚 (CodeSandbox)[https://codesandbox.io/s/vue-starter-nasa-place-ms93w]

Documentation

All the information that is available in NASAPLACE API comes from NASA's open APIs, which you can find on this page page.
I also leave you my social networks and the links of the client's github repositories, and the API.
You can ask me any questions about nasa place on twitter
💻Client 💻API

👉Twitter (https://twitter.com/AndresJiAr)
👉Linkedin (https://www.linkedin.com/in/andresjiar/)
👉Github (https://github.com/AndresJiAr)

Top comments (0)