API Days Paris 2018 – GraphQL server development

Transcript

1. A practical introduction to GraphQL server development
2. Agenda 2 Introduction to Nexus + Demo 1 Overview: GraphQL server development 3 Type-safe DB access with Prisma + Demo
3. Johannes Schickling San Francisco/Berlin Co-founder & CEO @prisma @schickling @schickling
4. Building the data layer for modern applications OUR MISSION
5. Auto-generated, type-safe database client library Prisma Client ACCESS Visual database tooling and management Prisma Admin MANAGE Declarative data modeling and migrations Prisma Migrate MIGRATE
6. GraphQL server development
7. • HTTP Server – Extracts GraphQL query and invokes GraphQL engine • GraphQL Exec Engine – Calls resolvers in right order & builds response • Schema & Resolvers – Defined and implemented by user to fetch data How GraphQL servers work RECAP
8. TLDR: How to build a GraphQL server 2 Main task: Define and implement schema 1 Pick a GraphQL server framework
9. What’s a GraphQL schema? • Defines the structure of your GraphQL API (Ask: What can I query for?) • Foundation for resolver functions • Intuitive representation as GraphQL SDL • Defined programmatically or declaratively type Query { posts: [Post!]! } type Post { id: ID! title: String! content: String! }
10. The history of GraphQL servers GraphQL released with graphql.js 2015
11. graphql-js type Query { posts: [Post!]! } type Post { id: ID! title: String! content: String! }
12. graphql-js const Query = new GraphQLObjectType({ name: "Query", fields: () => ({ posts: { type: new GraphQLNonNull( new GraphQLList( new GraphQLNonNull(Post) ) ) } }) }) const Post = new GraphQLObjectType({ name: "Post", fields: () => ({ id: { type: new GraphQLNonNull(GraphQLID) }, title: { type: new GraphQLNonNull(GraphQLString) }, content: { type: new GraphQLNonNull(GraphQLString) } }) }) type Query { posts: [Post!]! } type Post { id: ID! title: String! content: String! }
13. graphql-js GraphQL reference implementation for JavaScript AST-like API to construct schema → foundation for tooling Verbose API when building applications
14. The rise of schema-first GraphQL released with graphql.js 2015 Schema-first with graphql-tools 2016
15. Schema-first Handwritten expressive schema as “contract" for resolvers Schema (SDL) SOURCE OF TRUTH EXAMPLES Apollo Server (JS), graphql-java, gqlgen (Go) type Query { posts: [Post] } type Post { id: ID! slug: String! content: String! } const resolvers = { Query: { posts: () => [{ ... }] }, Post: { id: parent => parent.id, title: parent => parent.title, content: parent => parent.content } } Resolvers have to match SDL
16. const resolvers = { Query: { posts: (parent, args, context) => { return context.prisma.posts({ where: { published: true } }) }, }, Post: { author: ({ id }, args, context) => { return context.prisma.post({ id }).author() }, }, User: { posts: ({ id }, args, context) => { return context.prisma.user({ id }).posts() }, }, } schema.graphql resolvers.js type Query { posts: [Post!]! } type Post { title: String! content: String published: Boolean! author: User! } type User { email: String! name: String posts: [Post!]! }
17. But… Schema-first comes with other problems.
18. const resolvers = { Query: { posts: (parent, args, context) => { return context.prisma.posts({ where: { published: true } }) }, }, Post: { author: ({ id }, args, context) => { return context.prisma.post({ id }).author() }, }, User: { posts: ({ id }, args, context) => { return context.prisma.user({ id }).posts() }, }, } type Query { feed: [Post!]! } type Post { title: String! content: String published: Boolean! author: User! } type User { email: String! name: String posts: [Post!]! } Inconsistencies between SDL and Resolvers
19. schema { query: Query mutation: Mutation subscription: Subscription } # The query type, represents all of the entry points into our object graph type Query { hero(episode: Episode): Character reviews(episode: Episode!): [Review] search(text: String): [SearchResult] character(id: ID!): Character droid(id: ID!): Droid human(id: ID!): Human starship(id: ID!): Starship } # The mutation type, represents all updates we can make to our data type Mutation { createReview(episode: Episode, review: ReviewInput!): Review } # The subscription type, represents all subscriptions we can make to our data type Subscription { reviewAdded(episode: Episode): Review How to deal with large schemas?
20. “Fixing” schema-first GraphQL released with graphql.js 2015 Schema-first with graphql-tools 2016 More schema-first libraries / tooling 2017 / 2018
22. Schema-first problems & tools to fix them Inconsistencies: graphqlgen, graphql-code-generator, … Modularization: graphql-modules, schema stitching, … Importing: graphql-import, … Code reuse: Schema directives, … Tooling/IDE support: gql-tag, … Solution: Programming languages
23. Lessons learned: Resolver-first GraphQL released with graphql.js 2015 Schema-first with graphql-tools 2016 Schema-first “workarounds” 2017 / 2018 Resolver-first frameworks 2018 / 2019
24. Resolver-first Schema derived from language type-system or annotations Resolvers (code) SOURCE OF TRUTH EXAMPLES Nexus (JS/TS), Sangira (Scala), Graphene (Python) const Post = objectType('Post', t => { t.id('id') t.string(‘title') t.string(‘content') }) type Post { id: ID! slug: String! content: String! } SDL is auto-generated
25. Demo 2 Define & implement schema 3 Connect to database 1 Set up new project with Nexus
26. Example Requirements
27. Public Preview: github.com/graphql-nexus/nexus Nexus A type-safe, resolver-first GraphQL schema framework for TypeScript/JavaScript Example: bit.ly/nexus-example
28. Features of Nexus Smart schema-building (i.e. no-circular dependencies) Full type-safety in TypeScript & JavaScript (using VSC) Enables powerful module & plugin system
29. Schema building with Nexus • Concise & intuitive API • Type references expressed as type-safe strings (“literals”) • Supports custom scalars interfaces, unions & mixins const Query = objectType('Query', t => { t.field('posts', 'Post', { list: true }) }) const Post = objectType('Post', t => { t.id('id') t.string('title') t.string('content') })
30. Type-safety in Nexus • Provides predictability and extends GraphQL’s type system • Speeds up development (even in prototyping stage) • Based on built-in, self-updating type generation (disabled in prod) • Type-safe “areas” • Resolvers: Parent values, arguments, context, return values • Type <> Model mapping • Nexus API: Configuration & schema building
31. End-to-end type-safety ✨ Holy Grail ✨ Map safely from one system/language into another. Ideally from row in database up to props in React component. GOAL Use code-generation to avoid type mismatches. STRATEGY
32. Type-safe database access with Prisma
33. Removes one of the most common causes of downtime Fixes biggest bottleneck: API <> DB mapping Makes most DB integration tests obsolete Why type-safe DB access?
34. Access any DB from any language DB introspection-based or user-defined Auto-generated, type-safe client library High performance query engine
35. GraphQL servers with Prisma
36. How Prisma works Introspect schema 2 Generate client 3 Start building 4 1 Connect database
37. Demo 2 Define & implement schema 3 Connect to database 1 Set up new project with Nexus
38. Key Takeaways 3 Type-safe DB access prevents downtime and speeds up development with great DX Schema-first vs resolver-first 1 2 Nexus: Resolver-first GraphQL framework
39. We’re hiring prisma.io/jobs Berlin San Francisco
40. Thank you @nikolasburk @nikolasburk
41. Thank you @schickling @schickling