GraphQL London 1/23/2018

Introducing Prisma 🎉 (by Johannes Schickling)

Prisma is an open-source GraphQL API layer that turns your database into a GraphQL API. It is also the core technology powering the Graphcool Framework and now available for everyone to build their own GraphQL servers. Together with GraphQL bindings, it drastically improves developer experience for developing backends that are based on GraphQL.

In this talk, you’ll learn more about what Prisma actually is, how it works, why we built it and of course how you can use to build your own GraphQL servers!

Transcript

2. Johannes Schickling • Based in Berlin/San Francisco • Work @graphcool @_schickling @schickling
3. • Prisma Overview • Building GraphQL servers with Prisma • Demo
4. PRISMA
6. Prisma turns your database into a GraphQL API
7. What is Prisma? • GraphQL Database Proxy • Generates CRUD GraphQL API based on your data model • API can be used for build GraphQL server or directly from frontend • Helps you to migrate & instrument your database
8. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 type User { id: ID! @unique name: String! @unique posts: [Post] } type Post { id: ID! @unique author: User! createdAt: DateTime! title: String! @unique text: String tags: [String] } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { users( where: { name_starts_with: "Edgar" } ){ name posts( first: 10 orderBy: createdAt_DESC ) { title text } } } Data Model GraphQL API
9. Option 1: Connect directly from frontend app • Great approach for trusted/internal applications & prototypes • Easy to incrementally migrate to intermediate GraphQL server
10. Option 2: Build your own GraphQL server • Used Prisma as foundation for resolvers • Advanced use case: GraphQL microservice gateway
11. Prisma Architecture Overview Prisma Server MySQL Database Prisma CLI
12. Services & Stages /my-service/dev /other-app/test /other-app/dev
13. prisma.yml • Service configuration • Service & stage name • Authentication • Data model & seeding • … 1 2 3 4 5 6 7 8 9 service: hello-world stage: dev cluster: local secret: so-secure datamodel: datamodel.graphql seed: import: seed.graphql
14. Data Model • Use GraphQL SDL as definition language • Easy to express relations • Primitives: • type, enum, interface, union, directives 1 2 3 4 5 6 7 8 9 10 11 12 13 14 type User { id: ID! @unique name: String! @unique posts: [Post] } type Post { id: ID! @unique author: User! createdAt: DateTime! title: String! @unique text: String tags: [String] }
15. Generated GraphQL API • Intuitive Query API • Compatible with all GraphQL clients • Transactional mutations • Aggregations • Relational filters • Realtime GraphQL Subscription API 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { users( where: { name_starts_with: "Edgar" } ){ name posts( first: 10 orderBy: createdAt_DESC ) { title text } } }
18. Building GraphQL servers with Prisma
19. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { GraphQLServer } from 'graphql-yoga' const typeDefs = ` type Query { hello(name: String): String! } ` const resolvers = { Query: { hello: (_, { name }) => `Hello ${name || 'World'}`, }, } const server = new GraphQLServer({ typeDefs, resolvers }) server.start(() => console.log('Server is running on localhost:4000'))
20. A more complex example…
21. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 type Query { users(where: Where): [User!]! } type User { id: ID! @unique name: String! @unique posts: [Post] } type Post { id: ID! @unique author: User! createdAt: DateTime! title: String! @unique } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { users( where: { name_starts_with: "Edgar" } ) { name posts( first: 10 orderBy: createdAt_DESC ) { title text } } } GraphQL Schema GraphQL Query
22. Resolvers are the hard part…
23. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
24. Observations • Mapping between GraphQL API <> database is difficult • Problem 1: Resolve all data in root resolver or for every resolver • Problem 2: Overfetching via SELECT * or manual field selection • Possible solution: ORM
25. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
26. How does this work? • Based on GraphQL Binding (dynamic or static) • Uses schema stitching/query delegation behind the scenes • Takes the incoming query and sends it to GraphQL database layer
27. Benefits • Intuitive API • Maps seamless to your programming language • You only need to implement query entry points • Lightweight & efficient execution (solves typical ORM problem)
28. Bonus: Static bindings • Type-safe code generation • Awesome IDE integration: auto-completion, error messages • Compile-time error detection
30. Usage Overview 1. Prisma 1. Define data model 2. Deploy service to get GraphQL API endpoint 2. GraphQL Server 1. Add `prisma-binding` package & configure endpoint 2. Implement resolvers
31. Example Project Structure
32. `.graphql` files • datamodel: Define Prisma data model • seed: Mutations to seed data • prisma: Generated GraphQL schema by Prisma • Also called: Database schema • schema: GraphQL schema of your server • Also called: Application schema
33. `.graphqlconfig.yml`
34. Resolvers using `prisma-binding`
35. Resolvers using `prisma-binding`
36. Demo
37. Steps 1. Use `prisma init` to bootstrap new app 2. Try out API 3. Explore code base 4. Extend app 5. Run it
38. Recap 1. Prisma turns your database into a GraphQL API 2. API can be used from frontend or to build your GraphQL server 3. GraphQL bindings massively improve resolver implementation
39. Get started with Prisma • `npm install -g prisma` • `prisma init` • Learn more: www.prismagraphql.com
40. Notes on Prisma • Currently supports MySQL/Aurora (more DBs coming soon) • Upcoming release: Connect to your existing database • Roadmap: https://github.com/graphcool/prisma
42. Talk to us
43. Thank you GRAPHCOOL