3/6/2018 Spectacle PARALLELIZING PRODUCT DEVELOPMENT WITH GRAPHQL.

Size: px

Start display at page:

Download "3/6/2018 Spectacle PARALLELIZING PRODUCT DEVELOPMENT WITH GRAPHQL."

Louisa Copeland
6 years ago
Views:

1 @chrisbiscardi PARALLELIZING PRODUCT DEVELOPMENT WITH GRAPHQL 1/48

2 honeycomb.io biscarch CHRISBISCARDI 2/48

3 APPLICATION ARCHITECTURE 3/48

4 4/48

5 5/48

6 6/48

7 7/48

8 SCHEMA DEFINITION LANGUAGE 8/48

9 9/48

10 Queries { drafts { title 10/48

11 Results { "data" { "drafts": [{ "title": "Solving World Hunger" ] 11/48

12 blog schema type Post { id: String! title: String! publishedat: DateTime! likes: 0) blog: "Posts") type Blog { id: String! name: String! description: String, posts: [ "Posts") 12/48

13 Arrays type Post { id: String! title: String! publishedat: DateTime! likes: 0) blog: "Posts") type Blog { id: String! name: String! description: String, posts: [ "Posts") 13/48

14 DIRECTIVES EVERYTHING ELSE 14/48

15 RESOLVERS 15/48

16 Trivial Resolvers Human : { name( obj, args, context ) { return obj. name 16/48

17 Async Resolvers human( obj, args, context ) { return context. db.loadhumanbyid( args. id ).then( userdata => new Human( userdata ) ) 17/48

18 Directive Resolvers on FIELD_DEFINITION type Query { hello: 18/48

19 Directive Resolvers upper( next, src, args, context ) { return next().then(( str ) => { if (typeof( str ) === 'string') { return str.touppercase(); return str ; ); 19/48

20 SCENARIO 1 A New Product 20/48

21 21/48

22 22/48

23 Resolving with SQL return mysql. query (`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 accounts AS "user" LEFT JOIN posts ON "user". id = "posts". authorid WHERE "user". id = ${obj. id AND ispublished = 1 LIMIT ${args. skip, 1000`) 23/48

24 SQL with Prisma publicposts( obj, args, ctx, info ) { return ctx. prisma. query.posts( where : { author : { id : obj. id, ispublished : true,, skip : args. skip, info // enables schema stitching ) 24/48

25 prisma init prisma init full-03? How to set up a new Prisma service? Minimal setup: database-only GraphQL server/fullstack boilerplate (recommended) 25/48

26 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 authentication) typescript-basic database) typescript-advanced authentication) react-fullstack-basic database ) GraphQL server (incl. database & Basic GraphQL server (incl. GraphQL server (incl. database & React app + GraphQL server (incl. 26/48

27 prisma deploy [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) 27/48

28 prisma deploy 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 28/48

29 tree. 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 29/48

30 type Post Schema { id: ispublished: false) title: String! text: String! 30/48

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

32 yarn playground yarn run v1.3.2 $ graphql playground playground Serving playground at /48

33 playground brew cask install graphql-playground 33/48

34 34/48

35 type Post Updating { id: ispublished: false) title: title2: String text: String! 35/48

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

37 SCENARIO 2 Frontend 37/48

38 graphql-faker 38/48

39 Faker Directives type Person { name: firstname ) gender: ["male", "female"]) 39/48

40 40/48

41 Apollo Boost apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link-state graphql-tag 41/48

42 link-state import { withclientstate from 'apollo-link-state'; // This is the same cache you pass into new ApolloClient const cache = new InMemoryCache(...); const statelink = withclientstate({ cache, resolvers : { Mutation : { updatenetworkstatus : (_, { isconnected, { cache ) => { const data = { networkstatus : { typename: 'NetworkStatus', isconnected, ; cache.writedata({ data ); return null,, ); 42/48

43 SCENARIO 3 Go is Awesome! 43/48

44 src/schema.graphql # import Post from "./generated/prisma.graphql" type Query { feed: [ Post!]! drafts: [ Post!]! post (id: ID!): Post type Mutation { createdraft (title: String!, text: String ): Post deletepost (id: ID!): Post publish (id: ID!): Post 44/48

45 gqlgen -out generated.go -package main type Query struct { PostsID int PostID int PostsConnectionID int NodeID int type PostWhereInput struct { AND [] PostWhereInput OR [] PostWhereInput ID *string Id_not *string Id_in []string Id_not_in []string Id_lt *string 45/48

46 46/48

47 CREDITS [presentation]: [diagrams]: Spectacle whimsical.co 47/48

48 Q & A 48/48

GraphQL in Python and Django. Patrick

GraphQL in Python and Django. Patrick GraphQL in Python and Django Patrick Arminio @patrick91 Who am I Patrick Arminio Backend Engineer @ Verve Chairperson at Python Italia @patrick91 online GraphQL? WEB 1.0 WEB 2.0 REST APIs While REST