# Graphql

Open-Source

Released 2015 from Facebook

# Rest vs. Graphql

## Pizza service

### Rest Service

### Graphql Service

# benefits

## No more Over- and Underfetching

fixed data structures provide to much or not enough data

## 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

## pros/cons

# disadvantages

### more complex

### no file uploading

# 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]!
                }

### Simple Query

                  {
                    listPizza {
                      id
                      name
                    }
                  }

### More Complex Query

                  {
                    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!
                  }

### Mutation

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

## Subscriptions

### Define Subscription

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

### Subscription

              subscription PizzaChanged {
                pizzasChanged {
                  id
                  name
                }
              }

# 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/