Graphql

Open-Source

Released 2015 from Facebook

Whats Graphql?

and how it differs from REST?

🍕 Pizza service

Rest Service

Graphql Service

Basics

• Types
• Querys
• Mutations
• Subscriptions
• Variables

Types

              type Pizza {
                id: ID!
                name: String!
                toppings: [Topping!]!
              }

              type Topping {
                id: ID!
                name: String!
              }
            
          

Querys

Define Querys

               
            type Query {
              getPizzaById(pizzaId: ID!): Pizza!
              getToppingById(toppingId: ID!): Topping!
              getPizzaByName(pizzaName: ID!): Pizza!
              getToppingByName(toppingName: ID!): Topping!
              listPizza: [Pizza]!
              listTopping: [Topping]!
            }
            
          

Querys

              {
                listPizza {
                  id
                  name
                }
              }
            
          

Querys

              
              {
                getPizzaById(pizzaId: "0") {
                  id
                  name
                  toppings {
                    name
                  }
                }
              }
              
            
          

Mutations

Define Mutations

              type Mutation {
                createPizza(createPizzaDto: ChangePizzaDto): Pizza!
                updatePizza(pizzaId: ID!, updatedPizzaDto: ChangePizzaDto!): Pizza!
                createTopping(createToppingDto: ChangeToppingDto): Topping!
                updateTopping(toppingId: ID!, updatedToppingDto: ChangeToppingDto!): Topping!
              }
            
          

Mutations

              
              mutation {
                createPizza (createPizzaDto: {
                  name: "My Awesome Pizza"
                  toppingIds: "1"
                }) {
                  id
                  name
                  toppings {
                    id
                    name
                  }
                }
              }
            
            

Subscriptions

Define Subscription

              
            type Subscription {
              pizzasChanged: [Pizza]!
              toppingsChanged: [Topping]!
            }
          
          

Subscriptions

            
          subscription PizzaChanged {
            pizzasChanged {
              id
              name
            }
          }
            
          

benefits

No more Over- and Underfetching

Type/Schema System

• Graphql uses an strict Type and Schema
• The Client can be sure about what it get
• aswell as the server

Growing Community and Integrations

• Good Client side Integrations Angular/React/VueJs and more.
• Server side Integrations in Typescript/Java and more.
• Well working code-generator for client and server
• Alot of well writen Documentation

Self Documenting

Faster API Development

Live Demo

graphql-codegen

apollo-angular

Requirements

• npm
• nodejs
• tsc
• npx
• git

Setup Server

Init nodejs

            
              $ mkdir server && cd server
              $ npm init
              # entry point: build/index.js
              $ npx tsc --init --rootDir src --outDir build \
              --esModuleInterop --resolveJsonModule --lib es6 \
              --module commonjs --allowJs true --noImplicitAny true
              $ npm i --save-dev uuid @types/uuid nodemon ts-node typescript
            
          

Create nodemon

            
              $ touch nodemon.json
            
             
              {
                "watch": ["src"],
                "ext": ".ts,.js",
                "ignore": [],
                "exec": "ts-node ./src/index.ts"
              }
            
          

add script commands to package.json

              
                "scripts": {
                  "prebuild": "npm run generate",
                  "prestart": "npm run generate",
                  "generate": "graphql-codegen --config codegen.yml",
                  "start": "nodemon",
                  "build": "rimraf ./build && tsc"
                }
              
            

Init graphql

            
              $ npm add --save-dev graphql
              $ npm add --save-dev @graphql-codegen/cli
              $ npm add --save-dev @graphql-codegen/typescript
              $ npm add apollo-server  
              $ npm i --save-dev apollo-link-ws
              $ npx graphql-codegen init
              # (x) Backend
              # schema: ./src/schema/*.ts
              # plugins:  
                ◉ TypeScript (required by other typescript plugins)
                ◉ TypeScript Resolvers (strongly typed resolve functions)
              # output: skip
              # introspection: n
              # config: skip
              # script: generate
              $ npm i
              $ mkdir src && touch src/index.ts
            
          

Setup Frontend

Init Project

            
              $ git clone git@ziermach.de:cziermann/angular-demo-template.git
              
              $ git checkout graphql-template
              or
              $ cd angular-demo-template
              $ npm add apollo-angular
              $ ng add apollo-angular
              $ npm add graphql
              $ npm add --save-dev @graphql-codegen/cli
              $ npm i
              $ npx graphql-codegen init
              # with Angular
              # skip all
              # script: generate
              $ npm i
              
            
            move the graphql.module.ts in src/