---
# System prepended metadata

title: GraphQL outline

---

# GraphQL outline

# About this Book

- scope and goals

# Motivation

## Why GraphQL

### Problems and Solutions

- N+1 Problem
- frontend driven
- ...

## Why Typescript

## Why React

### Synergies between React & GraphQL

## Synergies between Angular & GraphQL?

- apollo watchQuery is an RXstream and angular's state managment is based on rx-streams

# To GraphQL or not? 

- GraphQL vs Rest vs gRPC


# GraphQL Playground

## queries and explainations 

- show Curl/Fetch


# Client Side GraphQL

## Paginated Github Search + Starring (without react?)


## Apollo Client Deconstructed

- Cache
- Link
- Queries & Scheduling
- GraphQL-Tag


# Apollo Server

## Pagination

## Directives and Middlewares

## Authorization

- First Manual resolvers
- then refactor to validator functions 
- GraphQL Shield
- GrpaQL Decorators

# GraphQL Server II

## Improve Performance with Dataloader

## Interact with RDBS with Sequelize

## Optimal SQL Queries with Join-Monster / Postgraphile / Hasura


# Schema Stiching

# Comparisons

## GraphQL Client Frameworks

- Fetch
- Relay
- Apollo
- ...

## GraphQL Backend Frameworks

- vanilla
- prisma
- graphcool
- hasura
- ...


# GraphQL with ...

## React
 
### Universal Apollo (SSR)

## Angular

### Example App with watchQuery / LiveQuery

## GraphQL with VueJS?


---------------

Nate's notes while talking

Persona:
Have a job to be done (not really interested in the edge cases / theoretical at first)
- either: 
- a) old API and they want to simplify w/ GraphQL (as quick as possible)
- b) new project and they're evaluating GraphQL / want a graphql server as quick as possible

# Ch: Motivation

# Ch: Client from GraphiQL / Playground Chapter
> At the end of this chapter you know how to use GraphiQL, you have an understanding of how to read and write graphQL queries
>
> And you have some basic mental model of how graphql thinks about the world. 
> 
> How to make a simple web request (via curl or whatever HTTP)
> Generate TypeScript types

    * basic types / queries / parameters
    * dip your toe in pagination / relay connections

# Ch: A Simple Front-end GraphQL App with React and Apollo Client
> A the end of this chapter you will know:
> How to create a simple front-end to a graphql endpoint using basic features of React and Apollo client

* Simple front-end GraphQL
* curl
    * Q: How do I use GraphQL from my browser without any frameworks (no React / Angular or Apollo)
    * A: However you make HTTP requests before -- send string, get JSON back
* create-react-app and apollo-client
    * create a SIMPLE react app that calls the github api
    * keep it super basic
    * how to setup apollo client
        * why use it, what it does
    * (Don't worry about apollo local state)

# Ch: Your first GraphQL server 
> At the end of this chapter you will know:
> How to setup a GraphQL server, write basic types, and resolve them to simple bits of data for queries
> (return a static string or number)

* How to build your own basic GraphQL server
        * apollo server right out of the gate or not?
    * schema
        * type definitions 
            * string w/ gql tag OR
            * programmatically w/ objects
        * resolvers
    * just queries
    * tips: structuring your code

# Ch: More advanced resolvers
> At the end of this chapter you will know:
> better about how resolvers work
> How to load your models from Query and how to resolve custom fields on types.
> Query.products(): Product
> Product.priceInDollars (it naturally has cents)
> Product.priceInCurrency (InputTypes)
> _Again, just queries_

# Ch: FE app that connects to our _own_ GraphQL server
    * You get this working...
> Is it the same app from earlier chapter? Probably not? Probably easier to do a new CRA, but your choice
> Create the basic structure of a new app that loads your data
> Design: use a popular CSS framework. Bootstrap/material - so it will look good without having to write much CSS

# Ch: Sharing code (or types)
> At the end: you'll know how to generate TypeScript types from your backend as well as query types from your FE
    * type generation
    * dealing w/ query types

# Ch: Changing your data with Mutations
    * (what's the database?)
> At the end of this chapter you will 
> Build Mutation queries.
> They're kind of like POST requests in REST, they change data.
> The resolvers are much the same. 

# Ch: Advanced backend - authentication
> At the end of this chapter you will have a simple login system

# Ch: Advanced backend - authorization
> At the end of this chapter you'll be able to distinguish users and model data access permissions in your resolvers.
    * Authorization / authentication?
    * protected fields
> Give reference to graphql-shield
> How do you pass the token through? 
> Accept the token via: either cookie or a header and then pass it through context to the resolver

# Ch: Integration w/ FE - auth
> At the end of the chap your FE app will log in and make authenticated queries
> 

# Ch: Advanced backend - performance
> At the end of this chapter you'll know how to resolve e.g. n+1 queries using dataloader for faster performance    
    * dataloader

# Ch: Real time applications (OPTIONAL)

# Ch: Tips: Server frameworks compared (BONUS MATERIAL)
    * comparing hasura / primsa / postgraphile

# CH: GraphQL and Angular (BONUS)
    * A guide to using Apollo client and Angular
plus the code examples in Angular





