# 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