GraphQL London 1/23/2018

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Johannes Schickling • Based in Berlin/San Francisco • Work @graphcool @_schickling @schickling

Slide 3

Slide 3 text

• Prisma Overview • Building GraphQL servers with Prisma • Demo

Slide 4

Slide 4 text

PRISMA

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Prisma turns your database into a GraphQL API

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Option 1: Connect directly from frontend app • Great approach for trusted/internal applications & prototypes • Easy to incrementally migrate to intermediate GraphQL server

Slide 10

Slide 10 text

Option 2: Build your own GraphQL server • Used Prisma as foundation for resolvers • Advanced use case: GraphQL microservice gateway

Slide 11

Slide 11 text

Prisma Architecture Overview Prisma Server MySQL Database Prisma CLI

Slide 12

Slide 12 text

Services & Stages /my-service/dev /other-app/test /other-app/dev

Slide 13

Slide 13 text

prisma.yml • Service conﬁguration • 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

Slide 14

Slide 14 text

Data Model • Use GraphQL SDL as deﬁnition 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] }

Slide 15

Slide 15 text

Generated GraphQL API • Intuitive Query API • Compatible with all GraphQL clients • Transactional mutations • Aggregations • Relational ﬁlters • 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 } } }

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Building GraphQL servers with Prisma

Slide 19

Slide 19 text

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'))

Slide 20

Slide 20 text

A more complex example…

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Resolvers are the hard part…

Slide 23

Slide 23 text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Slide 24

Slide 24 text

Observations • Mapping between GraphQL API <> database is diﬃcult • Problem 1: Resolve all data in root resolver or for every resolver • Problem 2: Overfetching via SELECT * or manual ﬁeld selection • Possible solution: ORM

Slide 25

Slide 25 text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Beneﬁts • Intuitive API • Maps seamless to your programming language • You only need to implement query entry points • Lightweight & eﬃcient execution (solves typical ORM problem)

Slide 28

Slide 28 text

Bonus: Static bindings • Type-safe code generation • Awesome IDE integration: auto-completion, error messages • Compile-time error detection

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Usage Overview 1. Prisma 1. Deﬁne data model 2. Deploy service to get GraphQL API endpoint 2. GraphQL Server 1. Add `prisma-binding` package & conﬁgure endpoint 2. Implement resolvers

Slide 31

Slide 31 text

Example Project Structure

Slide 32

Slide 32 text

`.graphql` ﬁles • datamodel: Deﬁne 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

Slide 33

Slide 33 text

`.graphqlconﬁg.yml`

Slide 34

Slide 34 text

Resolvers using `prisma-binding`

Slide 35

Slide 35 text

Resolvers using `prisma-binding`

Slide 36

Slide 36 text

Demo

Slide 37

Slide 37 text

Steps 1. Use `prisma init` to bootstrap new app 2. Try out API 3. Explore code base 4. Extend app 5. Run it

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Get started with Prisma • `npm install -g prisma` • `prisma init` • Learn more: www.prismagraphql.com

Slide 40

Slide 40 text

Notes on Prisma • Currently supports MySQL/Aurora (more DBs coming soon) • Upcoming release: Connect to your existing database • Roadmap: https://github.com/graphcool/prisma