NASA PLACE
Published: 2021-05-09 15:44:36

{% user andresjiar %}

# Welcome to Nasa Place 💃🎉
Discover curious and interesting data provided by NASA through the facilities provided by the GraphQL tool![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/088h0xfqka3590uigphj.png)
# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tbbpffa0y4qi4f24ch6.jpg)

**🎇✨Nasa Place API ✨🎇**
[NASAPLACE API](http://api.nasa.place/graphql) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjiitzdc05ngfkxtvyzu.png)

 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](https://graphql.org/) if you want to know about this query language (Query language)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj25ibkl8jruhh6zap7w.jpg)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km2jyqey60lck841xcg8.png)

🟣 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmxde3kj0kmyimh21bzx.png) ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e0n9rwmed6h8irizhmq.png) ![resolvers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixq4782io2l95pfdv2zx.png)

🟣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] (http://api.nasa.place/graphql) comes from NASA's open APIs, which you can find on this page [page] (https: // api.nasa.gov/).
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](https://github.com/nasaplace/client) 💻[API](https://github.com/nasaplace/api)

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