Our Tech Journal
  • Introduction
  • Overview
    • Introduction
  • Javascript
    • JS Runtime, Env Context, Scopes, Hoisting & Execution Cycle, var/let/const, this
    • Javascript Runtime Env
      • Event loops
    • What are WebVitals
    • Module Patterns in JS - CommonJS, AMD and ES6 classes
    • Lexical Environment in JS
    • var vs let/const
    • Temporal Dead Zone (TDZ)
    • Execution Context
    • 'this' keyword
    • undefined value in JS
    • Function expressions vs Function statements
    • Javascript Code Execution
    • Closures
    • JS : Object Oriented Programming
    • Prototypal Inheritance
      • Creating Object in Javascript
    • NaN
    • Objects
      • Ways to create
      • ways to check if Object is empty
      • Object's own properties
    • use strict mode
    • typeof vs instanceof
    • Promise
    • localStorage and SessionStorage
    • Event handlers
    • Event bubbling
    • Event Delegation
    • XHR Request
    • Promise Error: Catch vs Error Function in Then
    • Immutability
    • Useful Code samples
    • window, document, screen
    • window.innerheight, outer height, screen.height
    • JS Design Patters
    • Interview Questions
    • Encapsulation - Module Patterns in JS
    • Redesigning services using Entity framework approach
  • JS Functions
    • JS Array - Slice vs Splice
  • PWA
    • What is PWA
  • ES6
    • Sets
    • Maps
    • spread vs destructure operator
  • Web
    • http / https
    • CORS
    • CSRF
    • XSS Attack
    • What is SPA
    • Semantic Elements in HTML
  • Angular 4
    • Angular vs React
    • Change Detection
    • Lazy Loading of modules
    • Preloading
    • AOT Compilation
    • Route Guards
    • Shared Modules
    • Tree Shaking
    • LifeCycle Hooks
    • ngRx
    • Observables
    • Observable vs Subject
      • BehaviorSubject
    • Observables vs Promises
    • Builtin Directives
      • Temp
      • Structural Directives
        • ngForTemp
        • ngSwitch
        • ngFor
        • ngIf
      • Attribute Directives
        • temp
        • ngClass
        • ngStyle
    • Routing
      • Routing in Angular
      • Setting up basic routing
      • routerLink and routerLinkActive
      • router.navigate and ActivatedRoute
      • Route Params as Observables
      • redirectTo
      • relativeTo
      • pathMatch
      • ActivatedRoute
      • Routing in Angular
      • Passing Data with Route
      • Route Parameters
    • Intercept HTTP request
    • Custom Directives
    • Communication between components
    • Angular Modules
    • Reactive Forms
    • Unit Testing
      • TestBed and component fixture
      • Testing HttpClient requests
      • Testing fakeAsync
  • GraphQL
    • Introduction
    • Server
    • Client Side
    • GraphQL in Angular
    • Queries
      • temp
      • query with parameters
      • aliases
      • fragments
      • @include directive
      • @skip directive
      • variables
      • Inline Fragments
  • CSS
    • What is Box model?
    • display: block, inline or inline-block
    • CSS Selector: Combinators
    • CSS Pseudo-classes
    • CSS Pseudo-elements
    • CSS3 Filter
    • CSS3 Transitions
    • Media Queries
    • Flex vs Grid
    • CSS 3 Grids
    • What is Flexbox?
    • position: relative vs absolute
  • SASS
    • Mixins
    • Lists
    • Maps
  • RxJS
    • throttle vs debounceTime
    • distinctUnitChange
    • reduce vs scan
  • Typescript
    • Typeguards
    • Pattern Matching with Typescript
    • TS Decorators
    • Using LINQ in TS
  • NodeJS
    • NodeJS Security Checklist
    • What is Node.js
  • REACT
    • React - VDOM - Under the hood
    • Synthetic events in React
    • Routing - React Router 4
    • React Custom hook
    • Higher-Order Component
    • REDUX
    • Redux Thunk vs Redux Saga
    • forceUpdate()
    • Storing Data in React
    • Error Handling
    • React Context
    • How React-Native works
    • refs
    • Server-side Rendering
    • Jest setup file
    • React-test-renderer
    • Lifecycle
    • React Testing Library
    • React Query
  • JWT
    • What is JWT and How it works
Powered by GitBook
On this page
  • GraphQL
  • Comparing to REST
  • My Scribblings
  • References
  1. GraphQL

Introduction

GraphQL

GraphQL is a query language that provides a new way of coding your API layer end points which is more flexible and efficient compared to REST.

With GraphQL:

  • client can specify exactly what data it needs and in what format it needs the data

  • you can specify your data model schemas with strongly typed data types using GraphQL's Schema Language

  • its easy to aggregate data from multiple sources with just one call compared to multiple calls that may be needed with REST

  • returns JSON

Comparing to REST

  • Requires continuous upgrading of documentation

  • Code Redundancy and increased complexity could easily get introduced if endpoints need to be configured to send different properties of same data

    e.g * an endpoint for basic User Profile

    • an endpoint for detailed user profile with email and profile pic

with REST, you client would receive a response like below:

"user": {
    "id": "AA0001",
    "email" : "user1@test.com",
    "createdOn": "12324982132",
    "servicePlan": "Premium"
}

But what if client is only interested in id and servicePlan. With REST, your client has to filter the needed data on the client side or else server has to create another endpoint to return only those properties. With graphQL, client can specify exactly what data it needs in the query and will get response accordingly

{
    "data": {
      "user": {
        "id": "AA0001",
        "servicePlan": "Premium"
      }
    }
}

My Scribblings

- from what I have understood so far, GraphQL is the next generation of ORM framework. It allows you to set a layer between your API and client that helps the client application to query the data with one single endpoint, with a very simple JSON like query syntax.

- it makes it easier to aggregate data from multiple sources and it also queries the dependent or the joined data entities/data

- when we define the schema of the various entities , we sort of creating type system of our data. we are creating the documentation , so it becomes like its auto documented

- parts to set up GraphQL - schema, query, mutations, resolvers

- on the client side, with frameworks like Angular or react, we can build queries very easily in the components itself thereby minimizing the need of services or libraries like redux.

GraphQL can massage the queried data in the structure client wants it.

- with graphQL-subscription, you can have subscribe your data for events thereby the consumers always have the the latest data always

References

PreviousTesting fakeAsyncNextServer

Last updated 4 months ago

http://graphql.org/blog/rest-api-graphql-wrapper/
https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b
https://www.howtographql.com/
http://graphql.org/learn/schema/
http://dev.apollodata.com/react/