3/6/2018 Spectacle Presentation @ chrisbiscar di P ARALLELIZING - - PDF document

▶
3 6 2018 spectacle presentation
SMART_READER_LITE
LIVE PREVIEW

3/6/2018 Spectacle Presentation @ chrisbiscar di P ARALLELIZING - - PDF document

Nov 29, 2022 344 likes •834 views

3/6/2018 Spectacle Presentation @ chrisbiscar di P ARALLELIZING PR ODUC T DEVEL OPMENT WITH GRAPHQL http://localhost:3000/#/6?export 1/48 3/6/2018 Spectacle Presentation CHRISBISC ARDI hone y comb . io coff ee @ chrisbiscar di

slide-1
SLIDE 1

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 1/48

@chrisbiscar di

P ARALLELIZING

PR ODUC T DEVEL OPMENT

WITH GRAPHQL

slide-2
SLIDE 2

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 2/48

CHRISBISC ARDI hone y comb.io coff ee @chrisbiscar di biscar ch

slide-3
SLIDE 3

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 3/48

APPLIC A TION

AR CHITE C TURE

slide-4
SLIDE 4

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 4/48

slide-5
SLIDE 5

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 5/48

slide-6
SLIDE 6

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 6/48

slide-7
SLIDE 7

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 7/48

slide-8
SLIDE 8

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 8/48

SCHEMA DEFINITION LANGU A GE

slide-9
SLIDE 9

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 9/48

slide-10
SLIDE 10

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 10/48

Queries

drafts title { { } }

slide-11
SLIDE 11

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 11/48

R esults

{ "data" { "drafts": [{ "title": "Solving World Hunger" }] } }

slide-12
SLIDE 12

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 12/48

blog schema

type Post String String DateTime Int Blog type Blog String String String Post { id: ! title: ! publishedAt: ! likes: ! @default(value: 0) blog: @relation(name: "Posts") } { id: ! name: ! description: , posts: [ !]! @relation(name: "Posts") }

slide-13
SLIDE 13

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 13/48

Arra y s

Post type Post { String id: ! String title: ! DateTime publishedAt: ! Int likes: ! @default(value: 0) Blog blog: @relation(name: "Posts") } type Blog { String id: ! String name: ! String description: , } posts: [ !]! @relation(name: "Posts")

slide-14
SLIDE 14

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 14/48

DIRE C TIVES

EVER YTHING ELSE

slide-15
SLIDE 15

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 15/48 RESOL VERS

slide-16
SLIDE 16

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 16/48

T rivial R esolv er s

Human

  • bj args context
  • bj name

: { name( , , ) { return . } }

slide-17
SLIDE 17

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 17/48

Async R esolv er s

  • bj args context

context db args id userData userData human( , , ) { return . .loadHumanByID( . ).then( => new Human( ) ) }

slide-18
SLIDE 18

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 18/48

directive

  • n FIELD_DEFINITION

type Query String

Dir ectiv e R esolv er s

@upper { hello: @upper }

slide-19
SLIDE 19

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 19/48

next src args context str str str str

Dir ectiv e R esolv er s

upper( , , , ) { return next().then(( ) => { if (typeof( ) === 'string') { return .toUpperCase(); } return ; }); }

slide-20
SLIDE 20

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 20/48

SCENARIO 1

A Ne w P r

  • duct
slide-21
SLIDE 21

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 21/48

slide-22
SLIDE 22

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 22/48

slide-23
SLIDE 23

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 23/48

mysql query accounts posts id authorId id ${obj id} isPublished ${args skip}

R esolving with SQL

return . (`SELECT "user"."id" AS "id", "posts"."id" AS "postId", "posts"."title" AS "postTitle", "posts"."body" AS "postText", "posts"."tags" AS "postTags", "posts"."created" AS "postCreated", FROM AS "user" LEFT JOIN ON "user". = "posts". WHERE "user". = . AND = 1 LIMIT . , 1000`)

slide-24
SLIDE 24

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 24/48

  • bj args ctx info

ctx prisma query where author id obj id isPublished skip args skip info

SQL with P risma

publicPosts( , , , ) { return . . .posts( : { : { : . }, : true, }, : . , // enables schema stitching ) }

slide-25
SLIDE 25

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 25/48

prisma init

➜ prisma init full-03

? How to set up a new Prisma service? Minimal setup: database-only

❯ GraphQL server/fullstack boilerplate (recommended)
slide-26
SLIDE 26

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 26/48

prisma init

➜ prisma init full-03

? How to set up a new Prisma service? Running $ graphql create ... ? Choose GraphQL boilerplate project:

❯ node-basic Basic GraphQL server (incl.

database) node-advanced GraphQL server (incl. database & authentication) typescript-basic Basic GraphQL server (incl. database) typescript-advanced GraphQL server (incl. database & authentication) react-fullstack-basic React app + GraphQL server (incl. database )

slide-27
SLIDE 27

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 27/48

prisma deplo y

[graphql create] Running boilerplate install script... Running $ prisma deploy... ? Please choose the cluster you want to deploy "full-03@dev" to prisma-eu1 Public development cluster prisma-us1 Public development cluster

❯ local Local cluster (requires Docker)
slide-28
SLIDE 28

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 28/48

prisma deplo y

Changes: Post (Type) + Created type `Post` + Created field `id` of type `GraphQLID!` + Created field `isPublished` of type `Boolean!` + Created field `title` of type `String!` + Created field `text` of type `String!` + Created field `updatedAt` of type `DateTime!` + Created field `createdAt` of type `DateTime!` Applying changes 1.1s Hooks: Importing seed dataset from `seed.graphql` 498ms Writing database schema to `src/generated/prisma.graphql` 0ms

slide-29
SLIDE 29

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 29/48

tr ee . I node _modules

➜ tree . -I node_modules

. ├── README.md ├── database │ ├── datamodel.graphql │ ├── prisma.yml │ └── seed.graphql ├── package.json ├── src │ ├── generated │ │ └── prisma.graphql │ ├── index.js │ └── schema.graphql └── yarn.lock 3 directories, 9 files

slide-30
SLIDE 30

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 30/48

Schema

type Post ID Boolean String String { id: ! @unique isPublished: ! @default(value: false) title: ! text: ! }

slide-31
SLIDE 31

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 31/48

Seeds

createPost id createPost id createPost id mutation { first: (data: { title: "Hello World" text: "This is my first blog post ever!" isPublished: true }) { } second: (data: { title: "My Second Post" text: "My first post was good, but this one is better!" isPublished: true }) { } third: (data: { title: "Solving World Hunger" text: "This is a draft..." isPublished: false }) { } }

slide-32
SLIDE 32

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 32/48

pla y gr

  • und
➜ yarn playground

yarn run v1.3.2 $ graphql playground Serving playground at http://localhost:3000/playground

slide-33
SLIDE 33

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 33/48

pla y gr

  • und

brew cask install graphql-playground

slide-34
SLIDE 34

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 34/48

slide-35
SLIDE 35

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 35/48

Updating

type Post ID Boolean String String String { id: ! @unique isPublished: ! @default(value: false) title: ! @deprecated title2: text: ! }

slide-36
SLIDE 36

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 36/48

Updating

➜ yarn prisma deploy

Changes: Post (Type) + Created field `title2` of type `String` Applying changes 1.1s Your GraphQL database endpoint is live: HTTP: http://localhost:4466/full-03/dev WS: ws://localhost:4466/full-03/dev

slide-37
SLIDE 37

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 37/48

SCENARIO 2

Fr

  • ntend
slide-38
SLIDE 38

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 38/48

graphql-f ak er

slide-39
SLIDE 39

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 39/48

type Person String firstName String

F ak er Dir ectiv es

{ name: @fake(type: ) gender: @examples(values: ["male", "female"]) }

slide-40
SLIDE 40

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 40/48

slide-41
SLIDE 41

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 41/48

Apollo Boost

apollo-client apollo-cache-inmemory apollo-link

  • http

apollo-link

  • err
  • r

apollo-link

  • state

graphql- tag

slide-42
SLIDE 42

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 42/48

link

  • state

withClientState cache stateLink cache resolvers Mutation updateNetworkStatus _ isConnected cache data networkStatus __typename isConnected cache data import { } from 'apollo-link-state'; // This is the same cache you pass into new ApolloClient const = new InMemoryCache(...); const = withClientState({ , : { : { : ( , { }, { }) => { const = { : { : 'NetworkStatus', }, }; .writeData({ }); return null }, }, } });

slide-43
SLIDE 43

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 43/48

SCENARIO 3

Go is A w esome!

slide-44
SLIDE 44

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 44/48

sr c/schema.graphql

type Query Post Post post ID Post type Mutation createDraft String String Post deletePost ID Post publish ID Post # import Post from "./generated/prisma.graphql" { feed: [ !]! drafts: [ !]! (id: !): } { (title: !, text: ): (id: !): (id: !): }

slide-45
SLIDE 45

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 45/48

Query PostsID PostID PostsConnectionID NodeID PostWhereInput AND PostWhereInput OR PostWhereInput ID Id_not Id_in Id_not_in Id_lt

gqlgen -out generated.go -pack age main

type struct { int int int int } type struct { [] [] *string *string []string []string *string }

slide-46
SLIDE 46

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 46/48

slide-47
SLIDE 47

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 47/48

[pr esentation]: Spectacle [diagrams]: whims ical.co

CREDITS

slide-48
SLIDE 48

3/6/2018 Spectacle Presentation http://localhost:3000/#/6?export 48/48

Q & A