DEV Community: Henry Arbolaez

Compiling a Apollo Federated Graph with esBuild 🚀

Henry Arbolaez — Tue, 02 Nov 2021 18:49:58 +0000

Introduction

At Course Hero, we are starting to build our Apollo Federated Graph Services. For our local environment, we use Kubernetes to deploy our code. Keeping the advantages/disadvantages on the side, when it comes to building our local code it's going to take time due that we need to bundle the binary and sync it to K8 to be able to see it.

Our goal is to bundle and ship that local code as soon as possible to reduce the waiting time. Saving seconds here are goals here.

Below we're going go into details about how we were able to save around ~21 seconds when it comes to building the app binary, with esbuild 🚀

EsBuild build: Done in around 313ms
Webpack build: Done in around 21.07sec

Current Setup

To give a background on the current setup of the project;

Monorepo setup using Lerna
Using Typescript, Node, and Express
Gulp
Apollo Federation

Current Local Build Process

The current process of building a package locally is by running through a gulp task, using ttypescript to compile the TS and @vercel/ncc to build the binary:

npx gulp graph-accounts:local

Stats of the build, without esBuild:

[19:46:41] Starting 'graph-accounts:compile'...
[19:46:45] Finished 'graph-accounts:compile' after 4.07s

// ttypescript.gulp.compile.js

const project = ts.createProject(`packages/${projectName}/tsconfig.json`, {
  typescript: require("ttypescript"),
});

return project
  .src()
  .pipe(project())
  .pipe(gulp.dest(`packages/${projectName}/lib`));

[19:46:45] Starting 'graph-accounts:binary'...
[19:47:02] Finished 'graph-accounts:binary' after 17s

npx @vercel/ncc build ./packages/graph-accounts/lib/index.js -o ./build/graph-accounts/bin/

// binary.gulp.non-esbuil.js

const { spawnSync } = require("child_process");

const result = spawnSync(
  "npx",
  [
    "@zeit/ncc",
    "build",
    `./packages/${projectName}/lib/index.js`,
    "-o",
    `./build/${projectName}/bin/`,
  ],
  { stdio: "inherit" }
);

The total time spent in the compile and binary tasks were around 21.07sec.

Bundling with Esbuild

With the esbuild, we were able to reduce time on the compile and binary tasks to a stunning 313ms that is a 20.7sec 🚀 reduction.

Below are the stats for the two tasks, but before we go into details let's see how our esbuild is setups.

[19:53:10] Starting 'graph-accounts:compile'...
[19:53:10] Finished 'graph-accounts:compile' after 289 ms
[19:53:10] Starting 'graph-accounts:binary'...
[19:53:10] Finished 'graph-accounts:binary' after 24 ms

Esbuild Setup

First, let start by installing esbuild as a dev dependency:

yarn add -D esbuild

Below is a sample of our Monorepo folder structure:

graphql-services
├── packages
│   ├── graph-accounts
│   │   ├── ...
│   │   └── esbuild.config.server.js
│   └── graph-gateway
│       ├── ...
│       └── esbuild.config.server.js
├── scripts
│   ├── gulp
│   └── esbuild.config.base.js // base configs for esbuild
├── gulpfile.js
├── package.json
├── package.json
└── tsconfig.settings.json

Let dive into the esbuild.config.base.js configs. These are the default base config that we want esbuild to build off. We want to set the format of our build to commonjs and the platform to node . The external property can come in handy when you want to exclude a file or package from the build.

// esbuild.config.base.js

module.exports = {
  external: ['express', 'newrelic'],
  platform: 'node',
  target: 'node16.13.0',
  bundle: true,
  minify: true,
  format: 'cjs'
}

Now that we have the base config that we can extend. Let go over the esbuild.config file for each of the underlying services. One key thing here is how we look up the env variables that we want to send over with the esbuild bundle.

// esbuild.config.server.js 

const path = require('path')
const baseConfig = require('../../scripts/esbuild.config.base')

const define = {}
// lookup all the env in process.env, to be sent to the esbuild bundle
const keys = Object.assign({}, process.env)
for (const k in keys) {
  define[`process.env.${k}`] = JSON.stringify(keys[k])
}

const config = Object.assign({}, baseConfig, {
  entryPoints: [path.resolve(__dirname, 'src/index.ts')],
  outfile: path.resolve(__dirname, 'lib', 'index.js'),
  define,
  // TSConfig, normally esbuild automatically discovers tsconfig.json, but we can specified here
})

module.exports = config;

Our compile gulp task reads the underlying service esbuild.config.server.js to compile the code.

// compile.task.js 

{
  ...
  compile: (projectName) => {
    return new Promise(async (resolve, reject) => {
      const esbuildConfig = require(`../../packages/${projectName}/esbuild.config.server.js`)
      try {
        esbuild.buildSync(esbuildConfig)
      } catch (error) {
        reject()
      }
      resolve()
    })
  }
}

Now we can run npx gulp graph-accounts:compile and 🎉 🎉

[19:53:10] Starting 'graph-accounts:compile'...
[19:53:10] Finished 'graph-accounts:compile' after 289 ms

// bundle.esbuild.js

spawnSync(
  'cp',
  [
    '-a',
    `./packages/${projectName}/lib/.`,
    `./build/${projectName}/bin/`,
  ], { stdio: 'inherit' },
)

Summary

Setting esbuild was very easy and the developer experience that we were able to get was stunning, without adding many dependencies. It saved us a tremendous amount of development time trying to build the apps, so give it a try!

Follow-up; Doing a comparison with Webpack and investigating devspace and telepresence for hot reloading experience between our local K8.

We’re hiring!

My 3 GraphQL favorite things 🚀

Henry Arbolaez — Sat, 18 Sep 2021 05:35:51 +0000

I keep thinking what make GraphQL so special. Here are three of my favorite GraphQL things.

Self Documented
Client describe the shape of the data it need
Schema define the data shape

What are your favorites #graphql things? 🙂

Zero to App Store in 30 Days 🚀

Henry Arbolaez — Tue, 02 Mar 2021 18:00:35 +0000

This post is a high-level technical overview of how we integrated React Native (RN) into Course Hero's flagship iOS app. Our first RN app, for our Textbook Solutions product, is now out in the wild.

The idea to implement RN came from a Course Hero internal hackathon project done by myself and Ernesto Rodriguez. We saw the opportunity to introduce Course Hero to this great technology, already in use at Shopify, Facebook, Instagram, Tesla, and more.

Though Course Hero currently uses React for web development, we also have separate mobile teams who maintain our mobile native apps. Using RN allowed web developers with good knowledge of React to apply their expertise towards building a mobile app. This flexibility allowed us to scale our textbook product to native platforms in order to give our customers a great experience.

Deep dive on the integration

RN Dependencies

When we started, we had a separate repository on GitLab: one for our web app, and another for our iOS app. We created a separate repository for the RN integration, which had the build file. There is no easy way of creating the two links, other than having them in a remote somewhere and fetching the build from a script inside the iOS repo or adding the RN inside the iOS repo. But we didn't want the iOS team needing to clone any RN dependencies, and this was our first iteration anyway.

We started by adding the RN dependencies to the iOS Podfile. We then forked the RN project to our Course Hero Github Repo and then used the source method to clone the RN project to our local ~/.cocoapods/repos/coursehero dir. Now everyone who clones the iOS repo will automatically have the RN dependencies when doing pod install.

In Github, we made 0.63-stable our default branch. This helped us keep the RN project in sync with the Podfile. To change the default branch in GitHub: [repo] -> Settings -> Branches

# Podfile
def react_native_pods
  source 'https://github.com/coursehero/react-native.git'
  source 'https://github.com/CocoaPods/Specs.git'
  rn_path = '~/.cocoapods/repos/coursehero'
  # Default RN depencences
  pod 'React', :path => "#{rn_path}/"
  pod 'React-Core', :path => "#{rn_path}/"
  pod 'React-Core/DevSupport', :path => "#{rn_path}/"
  pod 'React-Core/RCTWebSocket', :path => "#{rn_path}/"
  …
  # 3rd party
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  # … all the other depencies that your project needs
end

def main_pods
  # … additional pods
  react_native_pods
end

abstract_target 'All Targets' do
  target 'Course Hero' do
    project 'Course Hero.xcodeproj'
    main_pods
  end
end

Our Podfile will start to look something like this - react_native_pods been the method that encapsulates all the RN dependencies

Intro to RCTRootView

Doing the integration between the two sides is fairly simple. In iOS, we can use the subclass RCTRootView from the UIView class, which we can use in any location of our iOS app.

Most of all the Swift and the Obj-c code below is under the CourseHero iOS folder. CourseHero/ReactNative/Textbooks/

// RNViewManager.swift
class RNViewManager: NSObject {
  static let sharedObject = RNViewManager()
    var bridge: RCTBridge?
    // crating the bridge if is necesary, avoding creating multiple instances

  func createBridgeIfIsNeeded() -> RCTBridge {
    if bridge == nil {
      bridge = RCTBridge.init(delegate: self, launchOptions: nil)
    }
    return bridge!
  }

  func viewForModule(_ moduleName: String, initialProperties: [String : Any]?) -> RCTRootView {
    let viewBridge = self.createBridgeIfIsNeeded()
    let sourceURL = Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #if DEBUG
      sourceURL = URL(string: "http://localhost:8081/index.bundle?platform=ios")
    #endif

    let rootView: RCTRootView = RCTRootView(
      bundleURL: sourceURL,
      bridge: viewBridge,
      moduleName: moduleName, // the module name, this is the name of the React Native App
      initialProperties: initialProperties
    )
    return rootView
  }
}

RNViewManager is going to a swift reusable class

// CourseHeroHomeController
extension CourseHeroHomeController {
  func openTextbookApp() {
    let textbookRNView = RNViewManager.sharedObject.viewForModule(
    "TextbookApp", // the RN app name
    initialProperties: nil)
    let reactNativeVC = UIViewController()
    reactNativeVC.view = textbookRNView
    // differnt settings for our need case
    reactNativeVC.modalPresentationStyle = .fullScreen
    self.present(reactNativeVC, animated: true, completion: nil)
  }
}

Calling RNViewManager class

How do the two worlds communicate?

For the RN and native applications to communicate, we need a bridge - a way to send JSON data bidirectionally and asynchronously.

In our case, the RN app had a few modules that we needed to implement. From sending user information to sending callbacks and executing some business logic on the native side.

RN To Native

A key step in the process was creating a Native Module, which is a 3 step process.

The first step is to tell our native app about the RN bridge (we only need to perform this once), and then add the data below to the header.h file in our project. Note that there should only be one header file per project and it should conform to the standard naming convention, ProjectApp-Bridging-Header.h

// CourseHero-Bridging-Header.h
//...
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>
#import <React/RCTUIManager.h>
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

Can be found in the Build Settings tab too

Next, we create our Modules. We started with TrackingModule.swift which allowed us to access the Native code from the RN side and report some tracking metrics to our internal tracking service.

import Foundation
import React

@objc(RNTrackingModule)
class RNTrackingModule: NSObject {

  @objc static func requiresMainQueueSetup() -> Bool {
    // true will initialized the class on the main thread
    // false will initialized the class on the background thread 
    return true
  }

  // all method that will need to be accessed by Obj-C
  // needs to add the `@objc` directive
  @objc func logEvent(_ eventName: String, withTrackInfo: [String: Any]) -> Void {
    // log events to your tracking service
    CHTrackingService.logEvent(eventName, withValues: withTrackInfo)
  }


  @objc
  // constantsToExport: A native module can export constants that are immediately available to React Native at runtime. 
  // This is useful for communicating static data that would otherwise require a round-trip through the bridge.
  // this data is on runtime, you won't get updated values.
  func constantsToExport() -> [AnyHashable: Any]! {
    return [
      "inititalData": ["userId": 1],
    ]   
  }
}

Finally, we exposed the Swift class Module to RN by creating another file, typically the same name of the module above but with a .m extension representing Objective-C. This is typically referred to as an RN Macro.

//
//  RNTrackingModule.m
//  Course Hero
//
//  Created by Henry Arbolaez on 01/25/21.
//  Copyright © 2021 Course Hero. All rights reserved.
//

#import <React/RCTBridgeModule.h>

// RCT_EXTERN_REMAP_MODULE allow to rename the exported module under a different name
// first arg is the name exposed to React Native
// second arg is the Swift Class
// third arg is the superclas
@interface RCT_EXTERN_REMAP_MODULE(TrackingModule, RNTrackingModule, NSObject)

RCT_EXTERN_METHOD(logEvent: (NSString *)eventName withTrackInfo:(NSDictionary *)withTrackInfo)

@end

Accessing the Swift module from React Native

With the native side set up, we moved to the RN project/App.js file, where we imported NativeModules from the react-native package. Any module exported from the Obj-C Macros will be available using the NativeModules object.

// App.js
import { NativeModules } from 'react-native'

// now we should have access to the logEvent and initialData
console.log(NativeModules.TrackingModule)

To recap, the process of creating a Native Module and exposing it to RN goes like this:

1. Create the Swift Module Class
2. Obj-C Macro which expose the Swift Module Class
3. NativeModules which is used in RN app, to access the module or methods exported from Objective-C

* @objc in the top of a swift method, is to export them to the Objective-C Class
* RCT_EXTERN_MODULE or RCT_EXPORT_MODULE (from objective-c code) - to export the module or methods to the RN

Native To React Native

When we instantiate RCTRootView, we can pass data into the initialProperties parameter. The data needs to be an NSDictionary, which then gets converted to a JSON object that we can access in the root component.

let textbookRNView = RNViewManager.sharedObject.viewForModule(
  "TextbookApp", // the RN app name
  initialProperties: [ "currentUser": currentUser];
)

when we load the RN app, it adds a rootTag, which allows us to identifier the RCTRootView

import React from 'react'
import { View, Image, Text } from 'react-native'

interface Props {
  currentUser: User
  rootTag: number
}

const App = ({ currentUser, rootTag }: Props) => {
  return (
    <View>
      <Text>Hi, {currentUser.name}!</Text>
      <Image source={{ uri: currentUser.profileUrl }} />
    </View>
  )
}

Destrcuring props, which have current

UserRCTRootView exposes another way of sending messages by using appProperties, which is helpful if you want to update the properties initialized in your RCTRootView and trigger a rerender of the root component.

We didn't have a use case for using the RCTEventEmitter subclass, but this is the preferred way of emitting some events to signal that something has changed to the RN side.

Iteration Speed

RN allowed us to build, integrate and deploy the textbook app to the existing iOS app in less than a month. While doing the integration, we took advantage of hot reloading which allowed us to see the changes being made in RN almost instantly, compared to >20 seconds that native code would typically take to build.

Summary

By putting just a little effort to integrate React Native into our application stack, we quickly realized the advantages it would bring to our organization. There may be cases where React Native is not the right choice, but for us, it works great for our Textbook Solutions product and we look forward to building others using this technology. We hope this summary helps you get started on your React Native integration journey.

Originally posted at Course Hero Engineering Blog

We're hiring!

GraphQL Arguments & Variables 🚀

Henry Arbolaez — Sat, 15 Aug 2020 19:05:32 +0000

When writing a GraphQL Query, Mutation or Subscription you'll need to pass dynamic data to the query when making the request, to be able to make the app dynamic and respond to different data set.

Basic GraphQL Query

query currentUser {
  id
  firstName
  lastName
  email
}

The above GraphQL query will fetch the authenticate the user. This query does not require any argument, due that the server should know how to return the authenticated user. Not a GQL thing, but in general good practice not to allow end-users to call a user endpoint and pass an i.e. user_id.

GraphQL query with arguments, without variables

query {
  educators(first: 25, ids: [1,2]) {
    edges {
      node {
        id
        firstName
        lastName
        schools {
          id
          name
          location {
            id
            name
            address
          }
        }
      }
    }
  }
}

educators take two arguments first of type Int and ids of type ID in a collection. This is how we define the arguments and assign the type to them (note: this could be named anything, it will be the response key name).

The SQL statement that matches the above GraphQL Query

SELECT * FROM educators
WHERE id in (1,2)
LIMIT 10;

GraphQL query with variables

Now the same as the query above, with dynamic variables that we can pass to the query in execution time. This is great now because now this query can be reuse around multiple clients.

query educators($first: Int, $ids: [ID!]) {
  educators(first: $first, ids: $ids) {
    edges {
      node {
        id
        schools {
          id
          name
          location {
            id
            name
          }
        }
      }
    }
  }
}

Varaibles definition

{
  "first": 25,
  "ids": [1,2]
}

i.e. with Apollo Client hook example

import { useQuery } from '@apollo/client'

// GET_EDUCATORS_QUERY is the above query
useQuery(GET_EDUCATORS_QUERY,
  { variables: { first: 25, ids: [1,2] } }
);

Conclusion

To help explore GraphQL Variables, you can use the GraphQL Playground. GraphQL variables give the flexibly of sending dynamic variables to the query and at the same time the ability to use the query in multiple clients that require to fetch the same data.

GraphQL Introspection ❤️ 🚀

Henry Arbolaez — Fri, 17 Jul 2020 01:50:34 +0000

GraphQL has many superpowers that's putting REST to rest nowadays. With its increase in popularity, adoption, and all the other great things GraphQL has to offer. Developer Experience and the ability to introspect the GraphQL Schema in real-time is just fascinating but sometimes overlooked.

Introspection

This is a powerful tool! It allows you to query your latest GraphQL Schema without writing any Front-End code in real-time. It will validate the query, mutation, or subscription against the running GraphQL Schema before it even hits the server layer, otherwise known as Schema Validation.

For Front-End engineers trying to investigate what fields the Schema has to offer is easy. Therefore, eliminating needless slack conversations that go on forever with the backend engineer, or taking a deep dive into the rabbit hole on what the REST API is going to return. Productivity and efficiency increase ten-fold when we have a tool such as GraphQL at our disposal.

Ohh, and not to mention, the exact shape of the query that was sent to the server will be in the same shape as the response. In addition, since GraphQL Schemas are Type Static, we can make some predictions when writing our Front-End code based on the type of fields that are going to be returned.

{
  me {
     id
     firstName
     lastName
  }
}

{
  "me": {
     "id": 1,
     "firstName": "Herny",
     "lastName": "Arbolaez",
  }
}

But wait, there’s more!! Not only do developers have the power of inspection, Product teams, Analytics, and other teams trying to get data on a specific product need can query against the latest graphQL schema. Also, the product team can now collaborate with engineers to design the products, through the GraphQL Schema before writing new features.

We're going to do the introspection, using this GraphQL server setup with an example of the
Star Wars Schema API.

When you open the GraphQL playground by clicking on the DOCS button on the right side of the playground, you will be presented with the latest schema and the different types of queries/mutations you can execute against the API. This DOCS is built-in into GraphQL with ZERO configuration, which is just amazing!!

You can start with the queries below on the left panel and start introspecting the graph. i.e.:

# 1. How many episodes did 'Luke Skywalker' appear in?
{
  human(id: 1000) {
    id
    name
    appearsIn // a collection of the episodes that he appear
  }
}

# 2. What starships 'Luke Skywalker' had?
{
  human(id: 1000) {
    id
    name
    appearsIn
    starships { // a collection of he's starships
       id
       name
    }
  }
}

# 3. How many friends did 'Luke Skywalker' had?
{
  human(id: 1000) {
    id
    name
    appearsIn
    starships { // a collection of he's starships
      id
      name
    }
    friends { // Luke's friends
      id
      name
    }
  }
}

After introspecting the schema, we were able to answer those three different questions, all through the GraphQL Playground. Now product teams, stakeholders, and engineers can collect feedback on a new feature on the real-time schema and make their final decisions.

Intro to GraphQL ❤️

Henry Arbolaez — Thu, 09 Jul 2020 23:39:15 +0000

It's been around 5 years since GraphQL was released by the Facebook Engineering team back in 2015. Since then, GraphQL has risen in popularity. Besides Facebook, companies like Airbnb, Netflix, Coursera, and many more have adopted GraphQL and it seems that have played very well from them not just in productivity but scalability.

What is GrapQL?

GraphQL is just a query language for fetching data
It serves as a specification, not an implementation. That being said, GraphQL does not tell you how to implement your solution that you can adapt to your needs.
It only exposes a single endpoint to the client that consists of queries, mutations and subscriptions.
The client only queries the data that it needs and the data is returned in the shape that it was requested.

Schema

We start by defining the schema in the server.

type User {
   id: ID!
   firstName: String!
   lastName: String!
   """
   company that the user is associated with
   """
   company: Company
}

type Company {
   id: ID!
   name: String
   """
   where is this company located
   """
   location: String
}

input UserInput {
   firstName: String!
   lastName: String!
   company: CompanyInput
}

input CompanyInput {
   name: String!
   location: String!
   userID: ID!
}

type Query {
   """
   fetch the current user
   """
   currentUser: User
}

type Mutation {
   userCreate(userInput: UserInput!): 
}

Schemas are the core of the GraphQL server implementation. It describes everything that your API can do. All the queries the client can execute will be run against the scheme definition.

Query is the type where all your queries will be encapsulated.
Mutation is the type where your update-create-delete actions will happen.
input is normally used when mutating any data to defined the argument passed

As you noticed, this is how we comment in GraphQL :

"""
Comment here
"""

Resolvers for the Schema

After defining the schema, we need to define the “Resolvers”. A Resolver is basically a function that knows how to resolve the type that the client is asking for.

const user = { id: 1, firstName: "Henry", lastName: "Arbolaez" };
const Query = {
  currentUser: (parent, args, context) => {
    /**
     in the real world you would connect to some database.
     return context.db.User.findById(context.userId);
    */
    return user;
  }
}

That's how we defined a resolver for the currentUser.

Querying for the current user

query {
  currentUser {
    id
    firstName
    lastName
  }
}

When we query for the current user using the above query, we will return the data in the exact shape that it was requested.

 {
   "currentUser": {
       "id": 1,
       "firstName": "Henry",
       "lastName": "Arbolaez",
    }
 }

But, let’s say, we want to query for the company of the current user.

query {
  currentUser {
    id
    firstNmae
    lastName
    company {
      id
      name
      location
    }
  }
}

When we execute the company query, null will be returned because there are no resolvers that know how to resolve the company type inside the user type

We can get around this by resolving the company in the currentUser resolver extending the currentUser resolver above

const user = { id: 1, firstName: "Henry", lastName: "Arbolaez" };
const companies = { 1: { id: 1, userID: 1, name: "Course Hero", location: "Redwood City" } };

const Query = {
  currentUser: (parent, args, context) => {
    // const company = context.db.Company.findById(parent.id);
    const company = companies[user.id];
    return {
      ...user,
      company,
    }
  }
}

Note There is a problem with this approach. We cannot guarantee that whenever the client asks for currentUser, it will always ask for the company that the user is associated with. A better approach is to have a resolver for the company type, and only resolve if the client asks for it.

const companies = { 1: { id: 1, userID: 1, name: "Course Hero", location: "Redwood City" } };

const Query = {
  currentUser: ....,
  User: {
    company: (parent, args, context) => {
      /**
        parent: is the user object in this case. Think as the parent, as the Type that is wrapping this resolver. In this case the User type.
      */
      // return context.db.Company.findById(parent.id)
      return companies[parent.id]
    }
  }
}

We added the company resolver under the User type to match our schema definition. If we were to put the company in the Query type, it wouldn’t know what it’s going to resolve for, since the schema explicitly said that the company belongs to the User type.

By doing this - it’s quite an optimization since the client doesn’t have to ask for the company type when asking for the current user. The extra request to fetch the company is eliminated and our server is happy!!

Why Graphql?

GraphQL limits the number of requests being made to the server, enabling multiple queries simultaneously in one expansive query.
- Usually, in REST, you will have different RESTful endpoints to do X operation.

-- users
GET https://example.com/users
CREATE https://example.com/users
GET https://example.com/users/1
DELETE https://example.com/users/1
PUT https://example.com/users/1

-- companies
GET https://example.com/companies
CREATE https://example.com/companies
GET https://example.com/companies/1
DELETE https://example.com/companies/1
PUT https://example.com/companies/1

-- companies associated with the user
GET https://example.com/user/1/companies
GET https://example.com/user/1/companies/1

i.e. if we want to fetch all the companies for a given user, we will need to:
1. Fetch the user endpoint to get the userId
2. Fetch the companies for the given userId
Also, in REST, we aren’t aware of the shape of the data is coming back and the type of it.
in GraphQL this could be simply be sent to the server as one query while reusing code that is already there, and we would know beforehand what is the shape and type of that data.

query currentUser {
  companies {
    id
    name
  }
}

Improve developer experience and productivity
- GraphQL is a strong type and has validation
- There are a lot of tools around GraphQL, that increase productivity. One of them is the GraphQL Playground, which lets you introspect the query before having to write any code.
- GraphQL will help standardized and simplify complexity in our API's. In the example above for the REST API, we wouldn't need to worry about creating those many resources.

Wrapping

I hope this intro to GraphQL has helped you to understand the basics of what a schema, resolvers, and the client request are. There are quite a few other topics that we can cover, but with this brief introduction of GraphQL, you can build a simple graph and dive deeper into more advanced topics. Here are some resources that I find useful.

Here are some resources that I find that are going to be useful:

Object entries && fromEntries

Henry Arbolaez — Mon, 08 Jul 2019 13:33:36 +0000

Learn about the Object.entries() and Object.fromEntries() object method.

/**
 * Object.entries()
 *
 * @return method returns a two-dimensional array of a given object's.
*/

/**
 * Object.fromEntries()
 *
 * @return methods return a object given a two-dimensional array.
*/

Using entries():

const person = { firstName: "henry", lastName: "arbolaez" }
const personArray = Object.entries(person)
/**
 * @return [["firstName", "henry"], ["lastName", "arbolaez"]]
 * 
*/

for(let [key, value] of personArray) {
  console.log(`${key}: ${value}`);
}

/**
 * @return
 *   firstName: henry
 *   lastName: arbolaez
*/

Using fromEntries():

/**
 * If we ever want to turn that 2D array back into a object 
 * we could use now Object.fromEntries(2dArray)
*/

const personArray = [["firstName", "henry"], ["lastName", "arbolaez"]];
Object.fromEntries(personArray);

/**
 * @return { firstName: "henry", lastName: "arbolaez" } 
*/

String padEnd() method

Henry Arbolaez — Sun, 07 Jul 2019 23:49:50 +0000

String padEnd()

Learn about the padEnd() string method. Which will apply some pads to the current string. The padding will be applied from the end of the string.

/**
 * targetLength => The length of the current string that will include the padding.
 *
 * paddingString` => The string to add to the current string as padding.
 * By default it will be empty string.
 */

str.padEnd(targetLength, paddingString);

const name = 'My name is Henry';

// We want to add to the end of the name three dots ...
// for that we need to get the length of the string plus dynamic and add 3
const nameLen = name.length;
name.padEnd(nameLen + 3, '.');

/**
 * @return "My name is Henry..."
 */

Function to add endPad dynamic:

/**
 * @param {String} string
 * @param {Number} extraPad=0
 * @param {String} delimeter=""
 * @return string
 */

const endPad = (str, extraPad = 0, delimeter = '') => {
  if (!str) return '';

  // get string length dynamic to add end pad
  const strLen = str.length;

  // return padded string with the extra pad and it delimeter
  return str.padEnd(strLen + extraPad, delimeter);
};


// example using endPad():
endPad('123', 3, '.');
/**
 * @return "123..."
 */

String charAt() method

Henry Arbolaez — Sun, 07 Jul 2019 23:10:43 +0000

String charAt() method

Learn about the charAt() string method. Which will return a new string consisting of the single character located base on it index.

Note: If no index is proved to charAt() it will fallback to 0

Using charAt() without index

const city = 'Miami';
console.log(city.charAt());
// charAt() using default index => 0
/**
 * @return 'M'
 */

Using charAt() index

const country = 'USA';
country.charAt(1);
/**
 * @return 'U'
 */

Using charAt() with a outbound index

// note: if the index pass to chartAt(999) is not in the string length
// this will return empty string

const country = 'USA';
country.charAt(999);
/**
 * @return ""
 */

JS Spread syntax

Henry Arbolaez — Sun, 07 Jul 2019 20:33:18 +0000

JS Spread syntax

Learn the basics of the JavaScript Spread Operator

The spread syntax was introduced with ES6. Is a great tool to make your javascript code a little more clean and readable.

MDN definition:

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Let start with object cloning them:

const person = {
  firstName: 'Henry',
  lastName: 'Arbolaez',
};

const personWithAge = { ...person, age: 27 };

Merging two objects:

const profession = {
  career: 'Software Engineer',
  work: 'Lavu',
};

const personalInformation = { ...personWithAge, ...profession };

/**
 * personalInformation becomes
  age: 27;
  career: 'Software Engineer';
  firstName: 'Henry';
  lastName: 'Arbolaez';
  work: 'Lavu';
*/

We can also utilize the spread syntax to copy array's:

const numbers = [1, 2, 3, 4, 5];
const copiedNumbers = [...numbers];

// copiedNumbers becomes [1, 2, 3, 4, 5]

A better way merging array's

const numbers = [1, 2, 3];
const numbers2 = [6, 7, 8];

const numbers3 = [...numbers, ...numbers2];

// numbers3 becomes [1, 2, 3, 6, 7, 8]

We can also assign some remining values using ...rest:

// note `rest` can be name anything you'll like
const [a, b, ...rest] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

// a    => "a"
// b    => "b"
// rest => ['c', 'd', 'e', 'f', 'g']

Passing parameters with spread syntax

const dateArray = [2019, 1, 15];
const date = new Date(...dateArray);
// @return Fri Feb 15 2019 00:00:00 GMT-0500 (Eastern Standard Time)

Keyword make with map & slice

Henry Arbolaez — Sun, 07 Jul 2019 16:32:17 +0000

Go provides a built-in map type that implements a hash table.

There are a few advantages of using the keyword make

can creates slices, maps and channels
create a map or slice with space pre-allocated
slice can be with len != capacity
zero value of a map is nil

CRU a map with make

  // instantiate a map implicit
  // this will allocated and initialize a hash map
  myMap := make(map[string]string)

  // adding key and value to map
  myMap["city"] = "Miami"

  // retrieving value base on key
  city := myMap["city"]
  // fmt.Println(city) // == "Miami"

CRU a slice with make

  // instantiate a slice implicit
  // this will allocated and initialize a slice with 5 spaces
  mySlice := make([]int, 5) // len(mySlice) == 5

  // you can specify a capacity, pass a third argument to make:
  myCapSlice := make([]int, 3, 5) // len(myCapSlice) == 3, cap(myCapSlice) == 5