Forem: Carlos Rufo

Launching SpaceX GraphQL API 🚀

Carlos Rufo — Fri, 09 Aug 2019 11:54:44 +0000

Discover the 💯 toolings and learnings from creating a production ready modern API, made on 🌎 by & for humans!

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:

https://www.spacex.com
https://www.space-track.org
https://ssd.jpl.nasa.gov
https://www.marinetraffic.com

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!

Type-Safe GraphQL Servers 🔎

Carlos Rufo — Fri, 09 Aug 2019 11:54:40 +0000

This post exhibits the motivations & steps for adding Type-Safety into GraphQL Servers 🎆

TL;DR

👉 The Repo & The API & The Docs & The Everything👇

Why should I add type-safety to my codebase?

Types enable developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript projects.

Building large scale applications, a static type checker can help safeguard your program, as well as helping you to eliminate existing errors (typos, misspellings, etc). TypeScript and Flow are both fantastic ways to limit technical debt in your JavaScript codebases, because folks,

JavaScript is DIFFICULT 🔥

At the same time it might be the best programming language to start with, since it doesn’t require to install and configure, but it doesn’t mean that it’s really hard to master and definitively, error prone!

JavaScript being weakly typed (in addition to being dynamically typed) poses a lot of problems. Note that a language is either statically or dynamically typed, let’s compare the differences between them.

Static 💥 Dynamic Typed

Static
A language is statically typed if the type of a variable is known at compile-time. For some languages this means that you as programmer must specify what type each variable is (e.g.: Java, C, C++).

Dynamic
A language is dynamically typed if the type is associated with run-time values. This means that you as programmer can write a little quicker because you do not have to specify types every time (e.g.: JavaScript, Python, Perl)

Remember❗️

Static 👉 Compile-Time 👉 Java

Dynamic 👉 Run-Time 👉 JavaScript

Speaking of these languages, in order to clarify their similarities, I’ve gotta mention one of my favorite JavaScript quotes written at the hands of the author of You Don’t Know JS saga (which I 💯 recommend to read):

“JavaScript is as related to Java as Carnival is to Car.” — Kyle Simpson

Definitely, they do not look alike. Let’s put focus on the most popular dynamically typed language…

Your 😑when you’re trying for 1st time JS coming from statically typed languages

Note that a language can be dynamically typed but also strongly typed, thus producing a much better language. How we could do that in JavaScript?

Type-Safety in JavaScript

Let’s review the most known tools for adding static typing into our JS codebases!

TypeScript

Typed superset of JavaScript that compiles to plain JavaScript on any browser, any host & any OS.
Microsoft/TypeScript
*TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - Microsoft/TypeScript*github.com

Pros & Cons
👌 Community & Tooling
👍 Sub-second response times
👎 Learning curve

Flow

Static type checker for your JavaScript code. It does a lot of work to make you more productive, making you code faster, smarter, more confidently, and to a bigger scale.
Facebook/Flow
*Adds static typing to JavaScript to improve developer productivity and code quality. - Facebook/Flow*github.com

Pros & Cons
👌 Out-of-the-box utility
👍 Zero config
👎 Slower and buggier

TypeScript vs Flow

No matter if you are using TypeScript or Flow be aware of *you’re not writing plain JavaScript. **TypeScript implements both a *type checker and a transpiler that emits plain JavaScript. Flow only does type checking and relies on *Babel* (or other tools) to remove type annotations.

If you’d like to know more about the differences regarding syntax and usability, I totally recommend to read this comparison!

In this post we will use **TypeScript** in our examples, it has better support for type generation that we’ll need later on.

GraphQL as API

GraphQL is well know for being a strongly-typed specification for building APIs, it comes with a lot of benefits and we should take advantage of them.

Whether you’re following a Schema-First *or Resolver-first approach, you’d love to end up having a **Single Source of Truth **with which develop an *End-to-end Type-Safe Application.

Avoiding manual static typing because it can get too time-consuming as well as hard to keep in sync through versions, we might want to auto-generate all our types based on that Single Source of Truth.

In this post we’ll use the** Schema-First** approach, thus the static types will be generated based on our *GraphQL Schema *instead of from our resolvers!

In order to remove friction between type definitions we might introduce automation. Here is where the GraphQL Types Generators come in!

GraphQL Types Generators

Let’s review the most known tools for auto generating types based on our GraphQL Schema.

GraphQL Code Generator

Tool that generates different types code outputs of your GraphQL Schema & Documents whether you are developing client, server or database.
GraphQL Code Generator *Generate code from your GraphQL schema with a single function call*
graphql-code-generator.com

Pros & Cons
👌 Client, Server & DB support
👍 Docs & Community
👎 Early stage of development

GraphQLGen

Generate & scaffold type-safe resolvers based on your GraphQL Schema in TypeScript, Flow & Reason.
GraphQLGen
*Programming in type-safe environments provides a lot of benefits and gives you confidence about your code*oss.prisma.io/graphqlgen/

Pros & Cons
👌 Defaults resolvers generation
👍 Integrable with Prisma
👎 Only Server support

GraphQL Code Generator vs GraphQLGen

Both are great for generating TypeScript & Flow types although GraphQLGen doesn’t provide you the ability to generate them for the Client. Instead, GraphQL Code Generator does, also it provides you a tons of plugins/configurations & the possibility to create your custom type generation templates. I found out this really useful in order to have a modular GraphQL Schema configured as you wish!

In this post we will use **GraphQL Code Generator **in our examples, it has better customization that we’ll need later on.

Ok, I know, too much theory…

… let’s set this up 🚀

Setup TypeScript

TypeScript main features

Install it

yarn add -D typescript

Install Run libraries

In order to execute TypeScript with Node, you have to add the following tools:

*TS-Node: TypeScript execution and REPL for Node.js, with source map support.
*Nodemon: Monitor for any changes in your Node.js application restarting automatically the server.

yarn add -D ts-node nodemon

You might want to use other configuration, setup whatever fits better for your app!

Include @types

Add your high quality type definitions of the libraries that you’re currently using over your codebase, such as graphql, lodash, etc. If you’re 🤨 about this, check the *DefinitelyTyped docs*!

yarn add -D @types/graphql

Create TypeScript config

This way TypeScript will include all the .ts files in your directory (and sub directories) as a part of the compilation context. It will also select a few sane default compiler options, you could check them out here!

**// tsconfig.json
**{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}

Create Run config

Nodemon supports local configuration files located in the current working directory where you have to specify things like which path to watch & the command to execute after any reload, which is your server. Check the sample config!

**// nodemon.json
**{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts", "src/types/**/*.d.ts"],
  "exec": "ts-node ./src/index.ts"
}

Add Run config

**// package.json
**{
  ...
  "scripts": {
    ...
    "start": "nodemon",
    ...
  }
  ...
}

Rename .js files 👉 .ts

Modify all your JavaScript filename extensions to .ts, it’ll allow you take advantage of the all TypeScript features

Test your app

Run your GraphQL Server, as JavaScript is 100% compatible with TypeScript (not the opposite, TS types are not allowed on JS compilers), it should work!

yarn start

Weeding out Errors

It’s not unexpected to get error messages after conversion. The important thing is to actually go one by one through these and decide how to deal with the errors. Often these will be legitimate bugs, but sometimes you’ll have to explain what you’re trying to do a little better to TypeScript. Don’t hesitate to check this migration guide for help to fix the possible errors!

Setup GraphQL Code Generator

GraphQL Code Generator main features

Install it

yarn add -D graphql-code-generator

Install Plugins

We’ll setup the common, server & *resolvers TypeScript *plugins, you might want to use others, check the plugins available!

yarn add -D graphql-codegen-typescript-common graphql-codegen-typescript-server graphql-codegen-typescript-resolvers

Create Context type

If you wish to use a custom type for your GraphQL context *and you don’t want to specify it each time that you declare your resolvers, you can create it manually and add it to the run config* file (as we’ll do it in the next step):

**// types/context.d.ts
**export type MyContext = {
  db: any;
  find: any;
  limit: any;
  order: any;
  project: any;
  sort: any;
};

Create Run config

The CLI will automatically detect the defined config file and will generate code accordingly, you could check the available options here!

**// codegen.yml***
*schema: src/schema/**/*.ts
overwrite: true
watch: true
require:
  - ts-node/register
generates:
  ./src/types/types.d.ts:
    config:
      contextType: ./context#MyContext
    plugins:
      - typescript-common
      - typescript-server
      - typescript-resolvers

Add Run config

**// package.json
**{
  ...
  "scripts": {
    ...
    "generate": "gql-gen",
    ...
  }
  ...
}

Generate Types ⚙️

Everything is setup for getting our desired static types 😍, let’s make that happen!

yarn generate

Add Resolver Types!

Now, you just have to include your *TypeScript *generated static types into your *GraphQL Resolvers *as here

Adding TypeScript types into GraphQL Resolvers & 🔎the Resolvers Data Types

It’s not 😂, take a look to your types.d.ts generated!

Recapping

In order to add Type-Safety into your GraphQL Server using Schema-First approach you could:

⚫ Setup TypeScript
↳ Install TypeScript, run libraries & @types
↳ Create TypeScript config & run config
↳ Add run config
⚫️ Rename .js 👉.ts files
⚫️ Setup GraphQL Code Generator
↳ Install GraphQL Code Generator & plugins
↳ Create context type & run config
↳ Add run config
⚫️ Generate Types ⚙️
⚫️ Add Resolver Types!

👀 the benefits

Discover some of the use cases where you’d take advantage of using TypeScript *together with *GraphQL!

Evolve your schema

Carlos Rufo

@swcarlosrj

Evolve your schema without worrying about changes, be a rebel 🤘, pull all your new commits! The generated #TypeScript types based on your #GraphQL type definitions & resolvers will 🔎 all possible errors for you!

16:23 PM - 01 Jan 2019

1 3

🔎 the arguments

Carlos Rufo

@swcarlosrj

Don't waste your ⏳ looking into your self-documented API, don't leave the IDE 🙌, don't leave @vscode. Explore all your #GraphQL arguments with the generated #TypeScript resolvers types!

16:23 PM - 01 Jan 2019

0 1

Catch Misspellings

Carlos Rufo

@swcarlosrj

"I just spent like 30 minutes trying to figure out why something I was writing went to the catch statement and it turns out I wrote `.toLowerCase()` wrong 🤦‍♀️" by @NikkitaFTW

Even great devs do misspellings, avoid them using #TypeScript into your #GraphQL resolvers 🚀

16:23 PM - 01 Jan 2019

0 2

🔎 the context

Carlos Rufo

@swcarlosrj

If you didn't know it, DRY ♻️, use context! for having access to your needed functions inside of your #GraphQL resolvers. The generated #TypeScript types will help you to know which ones are available as well as their respective types ✨

16:23 PM - 01 Jan 2019

0 1

Discover your data

Carlos Rufo

@swcarlosrj

Not sure 🤨 about your resolvers returned data? Destructure it, mock it, change it 😲, you'll be able to do so thanks to the generated #TypeScript types based on your #GraphQL schema 😍

16:23 PM - 01 Jan 2019

0 1

The Future

In order to talk about what the new era holds 😬, you cannot miss the motivations for which GraphQL was created, Dan Schafer resumed them perfectly 👇

Schema💥Resolver First approach,
Types💥Classes/Decorator generators,
Readability💥Composability,

… 2019 aims to be busy for GraphQL 😅,
read the first impressions about its future,
it’s as exciting as overwhelming,
but really, don’t miss it, 💯 thread!

Johannes Schickling

@schickling

🔮 GraphQL prediction for 2019: Resolver-first server frameworks will begin to replace the currently popular schema-first approach.

Main reasons:
◆ No code redundancy (i.e. single definition of resolvers and types)
◆ Better code reuse & type-safety
◆ Superior DX

09:49 AM - 02 Jan 2019

110 510

I’ll be following this post up 🔜 with the respective Type-Safe GraphQL Clients 🔎 post, stay tuned!

Please, consider🙏🏻ing, contribut♻️ing and shar💜ing it!

Lessons Learned Migrating APIs to GraphQL 📝

Carlos Rufo — Fri, 09 Aug 2019 11:54:34 +0000

This post shows best practices 💫 of migrating APIs to GraphQL. Add your thoughts, collabore asking/resolving concerns 🤗, show them your folks, but 🙏🏻, share knowledge 💜

Lessons Learned

Modularize 👌 your typeDefs & resolvers 👇

// Detect dark theme var iframe = document.getElementById('tweet-1067288762810535936-625'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1067288762810535936&theme=dark" }

“Break your schema by concern, not by types“ — Martijn Walraven 👇

// Detect dark theme var iframe = document.getElementById('tweet-1067290487684571137-706'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1067290487684571137&theme=dark" }

DRY ♻️, use context! 👇

// Detect dark theme var iframe = document.getElementById('tweet-1067497253294747650-395'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1067497253294747650&theme=dark" }

Evaluate whether your schema is feature or domain based 👇

// Detect dark theme var iframe = document.getElementById('tweet-1067727612233928704-651'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1067727612233928704&theme=dark" }

Show what’s important 👀 first 👇

// Detect dark theme var iframe = document.getElementById('tweet-1068048289755475968-551'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1068048289755475968&theme=dark" }

Decouple global typeDefs! 👇

// Detect dark theme var iframe = document.getElementById('tweet-1068432024371789824-946'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1068432024371789824&theme=dark" }

Take advantage 🚀 of ESNext 👇

// Detect dark theme var iframe = document.getElementById('tweet-1068983561934516227-176'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1068983561934516227&theme=dark" }

Return several types using Union Types!👇

// Detect dark theme var iframe = document.getElementById('tweet-1072132577631309824-581'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1072132577631309824&theme=dark" }

Use Aliases 🔥 to rename the result of a field 👇

// Detect dark theme var iframe = document.getElementById('tweet-1072147677318651906-926'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1072147677318651906&theme=dark" }

Don’t over-engineer, you can query with fetch👇

// Detect dark theme var iframe = document.getElementById('tweet-1072242050249166848-564'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1072242050249166848&theme=dark" }

DRY ♻️, use fragments!

// Detect dark theme var iframe = document.getElementById('tweet-1072876237301932032-886'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1072876237301932032&theme=dark" }

Get rid off your variables using Input Types 👇

// Detect dark theme var iframe = document.getElementById('tweet-1073229966219862016-520'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1073229966219862016&theme=dark" }

Extra 🌟

Don’t miss the 1st part of a series resuming PayPal’s best practices for building GraphQL APIs 👇

GraphQL Resolvers: Best Practices
*GraphQL resolvers can be easy to build, but difficult to get right. Here’s a look at PayPal’s best practices for…*medium.com

Recapping

👉 Modularize 👌 **your typeDefs & resolvers
👉 “Break your schema by concern, not by types“ — Martijn Walraven
👉 DRY ♻️, use context!
👉 Evaluate whether your schema is feature or domain based
👉 Show what’s **important 👀 **first
👉 Decouple global typeDefs!
👉 Take advantage 🚀 of **ESNext
👉 Return several types using **Union Types!
👉 Use Aliases 🔥 to rename the result of a field
👉 Don’t over-engineer, you can query with **fetch
👉 DRY ♻️, use fragments!
👉 Get rid off your variables using Input Types

⭐️ GraphQL Resolvers: Best Practices

Already waiting to add yours 🤗, contribute adding more lessons learned 👇

// Detect dark theme var iframe = document.getElementById('tweet-1067288761585799169-841'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1067288761585799169&theme=dark" }

Or even better…

Create posts 😀, courses 😄, meetups 😍, anything!, just be 🤗 and curious for teaching & learning 🚀

I’ll be following this post up 🔜 with more lessons learned, stay tuned!

Please, consider🙏🏻ing, contribut♻️ing and shar💜ing it!

Migrating SpaceX API to GraphQL 🚀

Carlos Rufo — Fri, 09 Aug 2019 11:54:28 +0000

As another lover of physics, astronomy and rockets, when I found the SpaceX Public API (thanks to Full Stack Apollo tutorial 👏), I was really intrigued for looking into the available data.

I immediately accessed to the SpaceX API GitHub and …

🐵s would be the future Animoji’s Hand Tracking UX tests

REST? External docs? Postman?? 😅 The SpaceX API journey didn’t start well but I was still excited for digging into the resources that make up the API, I continued my way to the Docs 😬

As always I’ve skipped the introduction and went straight to the resources in search of the holy grail, the data and their respective type definitions, let’s review what there is inside of it 👇

✅ Endpoint, 😒 v3?, is there a v2? where’re the docs? 😕

✅ Types, I dunno what QueryStrings is but we have some type definitions 😍

🔲 Data, no data, no 😭. Let’s keep looking, the data model should be around!

As a accustomed GraphQL user, the experience wasn’t being great but it deserved a chance 🤞

Eureka, I’ve found it 🎉

✋ a sec, original_launch_unix doesn’t look like familiar, let’s check the “type definitions” again,
🤔 it’s not there and the description always says “Filter…”
😓 that wasn’t the data type definitions,
😫 where could they be then?

*scrolling trying to find the type definitions… *

**My brain:
**Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it

*Me: *“Keep calm, let’s see if we can find them over the API collection provided”

running Postman collection…

installing, signing up, setting up…

**My brain:
**Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it
Don’t say it

*Me: *“What are you waiting to use GraphQL?”

Yep, I gave up 😓, right after that I started the API migration…

Why?

Because,

I just want to explore data & their types

without the need of setting anything up, and because of…

👉 Overfetching: 90% of the responses exceeds the app’s data need, I just wanna ask for what I want!

👉 Underfetching: Multiple requests are a bad performance solution, I’d love to request all the data in one

👉 Typing, documentation, versioning, *ecosystem, *…♾, are always tricky

How?

What?

It’s not a framework, neither a library, is a **Query Language **for APIs and as specification itself, it’s compatible with any programming language 💫

GraphQL: A query language for APIs

Master it 👩‍🎓👨‍🎓 with “Learning GraphQL” by Eve Porcello & Alex Banks

🌒🌔 The Migration 🌖🌘

What could I say about the GraphQL techs & tooling? Simply that I had deployed an API being able to interactively, fetch real data & explore full-updated docs (and much more), **within a couple hours*, just fast & fun!

Steps

1️⃣ Setup server & modular schema ⚙️
2️⃣ Include DB & builders into the context
3️⃣ Create domain’s typeDefs & resolvers 💪
4️⃣ Implement trivial resolvers
5️⃣ Apply lessons learned 💡
6️⃣ Deploy 🚀 it

Doesn’t look like difficult right?, actually it’s not thanks to the brilliant GraphQL Community 🙌, don’t miss the changes made!

Conclusions

Draw them yourself… (fork it, break it, improve it but especially, enjoy it 😄)

👉 The Repo & The API & The Docs & The Everything👇

Don’t miss the GraphQL best practices & conclusions based on SpaceX GraphQL API

👉 Lessons Learned Migrating APIs to GraphQL 📝 👈

Please, consider🙏🏻ing, contribut♻️ing and shar💜ing it!

Why we should care about the community?

Carlos Rufo — Wed, 10 Jul 2019 06:42:07 +0000

April 14th, 2018 @ Amsterdam 🇳🇱 GraphQL Day
1st event ever, I met @nikolasburk , @_marktani, helped by @nikkitaftw with some #HowToGraphQL stuff & introduced myself to @manjula_dube with fun results.
Props to @prisma for organizing such event!

September 8th, 2018 @ San Francisco 🇺🇸 Reactathon
1st conf ever, I had great time with @eveporcello , @jnwng & @benghamine . Remember being hacking with @Saeris trying to make @codesandbox his IDE, now he's working there
Props to @reactathon for organizing such event!

October 13th, 2018 @ San Jose 🇺🇸 SV Code Camp
1st code-camp ever, I talked with @paulweveritt & @nebrius . Got to listen Douglas Crockford arguing about all the JS stuff I was believing in, blowed my mind!
Props to @PayPalEng for hosting such event!

October 25th, 2018 @ Las Vegas 🇺🇸 React Conf
1st React conf ever, I met @dan_abramov , @jakedawkins & @jsjoeio . Definitely, we all were hooked that day!
Props to @reactjs for organizing such event!

November 7th, 2018 @ San Francisco 🇺🇸 GraphQL Summit
1st GraphQL conf ever, met @UriGoldshtein & @moontahoe . Remember talking about the cmty with @jaydenseric, few months later he created @graphqlmelb
Props to @apollographql for organizing such event!

December 8th, 2018 @ Lisbon 🇵🇹 GDG
Met personally @dabit3 , he encouraged to jump on public speaking, without those words couldn't be writing this. If you're a DevRel/TechLead, please keep inspiring people!
Props to @GDGLisbon for organizing such event!

February 20th, 2019 @ Sevilla 🇪🇸 TypeScript Meetup
1st workshop ever, having your first workshop in your native language helps but having attendees willing to listen & learn, helps even more.
Props to @SVQTypeScript for running such meetup!

February 23rd, 2019 @ NYC 🇺🇸 GraphQL Patterns
1st podcast ever, 1st talk in a foreign language too. I had the pleasure to join @jimmy_jia at his office, he knows lots of GraphQL!
Props to @dabit3 for organizing such podcast!

February 26th, 2019 @ NYC 🇺🇸 TypeScript Meetup
1st talk ever, I got to meet @jevakallio , he showed me the hidden gems of Manhattan, 3$ beer + shoot combo (btw all the best with restlessldn.dev)
Props to @orta for running such meetup!

February 27th, 2019 @ NYC 🇺🇸 Nordic APIs Livecast
1st livecast ever, shared screen with @motleydev & @lyonwj . Funny the Internet didn't work that day at my hotel, had to figure an office the same day.
Props to @nordic_apis for organizing such livecast!

March 4th, 2019 @ London 🇬🇧 JavaScript Community
1st recorded talk ever. Because I wanted to ensure the recording was setup properly, something was wrong & during the talk my slides wouldn't show up!
Props to @london_js for organizing such event!

April 7th, 2019 @ Delhi 🇮🇳 JSLovers
1st large workshop ever, with 2h sleep, 20h flights & 7h difference, with the love of @hellonehha & attendees, we had a blast!
Props to @jslovers_del for organizing such event!

April 12th, 2019 @ Bangalore 🇮🇳 GraphQL Asia
1st conf talk ever, finally met @rajoshighosh , @tanmaigo , @leeb , @rbzhu & @swyx . Also @sidharta, @shruti & @tanay who will be speaking at @GraphQLHongKong
Props to @HasuraHQ for organizing such conf!

April 14th, 2019 @ Bangalore 🇮🇳 JSLovers
1st 6h-workshop ever, had to be tired enough to get suggested for an attendee to take a break during one session. That break really helped me to recover & finish it!
Props to @hellonehha for organizing such event!

May 22nd, 2019 @ NYC 🇺🇸 Modern Web Online
1st dropout talk ever, couldn't join @ladyleet , @knitcodemonkey & @TatianaTMac. Paid off all previous effort with a well deserved burnout, couldn't barely move.
Props to @moderndotweb for organizing such event!

Sept 29th, 2019 @ Hong Kong 🇭🇰 GraphQL Hong Kong
1st conf organizer ever, 1.5 years later, the cycle is complete!
Props to y'all for inspiring us to organize such event!

It's not coincidence the people I've mentioned they're successful & contribute to the community as well. Shout out to every single person who has collaborated with it, you're all incredible. Let's never miss the main goal of all of this, enjoy what we love!

Sincerely,
Carlos

Forem: Carlos Rufo

Launching SpaceX GraphQL API 🚀

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!

Moral: Let’s build accessible software to keep motivating people passions & dreams!

Developer’s space

Motivations

Benefits

Implementation

💡 Break your schema by concern, not by types!

❌ By types

✅ By concern

⚙️ It generates all the typeDefs & resolver functions (including args & returned data) TypeScript types.

Data

⚠️ Is not official data

All the data from these platforms is parsed & collected in a public Mongo database from where the information is obtained.

The SpaceX GraphQL API

👉 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:

Now, this is possible 🤯 , just Rest with Sofa (Kamil Kisiela's invention) auto-generating a REST API based on your GraphQL schema!

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!

That’s it! GraphQL💜 REST, stop arguing & take advantage from both worlds!

PRs are more than welcome 🤗

Build cool 🚀 stuff

❤️ Angular

💙 React

💚 Vue

Pick whichever programming language & FE library you feel confident with, schedule some ⏳ in your calendar & enjoy coding 👌 webapps!

Credits

We are approaching our next destination 🌖, stay tuned not to miss the landing!

Type-Safe GraphQL Servers 🔎

TL;DR

👉 The Repo & The API & The Docs & The Everything👇

Why should I add type-safety to my codebase?

JavaScript is DIFFICULT 🔥

Static 💥 Dynamic Typed

Remember❗️

Static 👉 Compile-Time 👉 Java

Dynamic 👉 Run-Time 👉 JavaScript

Type-Safety in JavaScript

TypeScript

Flow

TypeScript vs Flow

GraphQL as API

GraphQL Types Generators

GraphQL Code Generator

GraphQLGen

GraphQL Code Generator vs GraphQLGen

Ok, I know, too much theory…

… let’s set this up 🚀

Setup TypeScript

Install it

Install Run libraries

Include @types

Create TypeScript config

Create Run config

Add Run config

Rename .js files 👉 .ts

Test your app

Weeding out Errors

Setup GraphQL Code Generator

Install it