Pursuing Singularity

Overview of tools that provide end-to-end type safety across database, API and client in GraphQL ecosystem.

Transcript

1. PURSUING SINGULARITY 1
2. Singularity is a small change that can cause a large effect — James Maxwell 2
3. Don't repeat yourself — Andy Hunt and Dave Thomas 3
4. ROMAN PARADEEV 4
5. ROMAN PARADEEV ▸ Writing code for ≈10 years 4
6. ROMAN PARADEEV ▸ Writing code for ≈10 years ▸ New to GraphQL 4
7. ROMAN PARADEEV ▸ Writing code for ≈10 years ▸ New to GraphQL ▸ Software engineer at Klarna 4
12. PROBLEM 1 TYPES 9
13. // packages/server/lib/resolvers.ts interface User { id: number name: string } const resolvers = { Query: { users(): Promise<User[]> { return db.getUsers() } }, Mutation: { createUser(_, args: { name: string }): Promise<User> { return db.createUser(args.name) } } } 10
14. // packages/client/lib/queries.ts const query = gql`{ users { id name } }` // packages/client/lib/types.ts interface Response { users: Array<{ id: number name: string }> } // packages/client/lib/datasource.ts function getUsers() { return client.query<Response>({ query }) } 11
15. CODE GENERATORS 12
16. CODE GENERATORS: GETTING STARTED # both client and server npm install @graphql-codegen/cli npm install @graphql-codegen/typescript # only client npm install @graphql-codegen/typescript-operations # only server npm install @graphql-codegen/typescript-resolvers 13
17. CODE GENERATORS: SERVER CONFIGURATION # packages/server/codegen.yml generates: ./generated/types.ts: schema: ./lib/schema.ts plugins: - typescript - typescript-resolvers 14
18. CODE GENERATORS: CLIENT CONFIGURATION # packages/client/codegen.yml generates: ./generated/types.ts: documents: ./lib/queries.ts schema: ../server/lib/schema.ts plugins: - typescript - typescript-operations 15
19. CODE GENERATORS: SCRIPT EXECUTION npx lerna exec graphql-codegen # or if you don't trust lerna: # > cd packages/client && npx graphql-codegen # > cd packages/server && npx graphql-codegen 16
20. . !"" client # #"" generated # # $"" types.ts # $"" lib # $"" datasources.ts $"" server !"" generated # $"" types.ts $"" lib #"" resolvers.ts $"" schema.ts 17
21. // packages/server/lib/resolvers.ts interface User { id: number name: string } const resolvers = { Query: { users(): Promise<User[]> { return db.getUsers() } }, Mutation: { createUser(_, args: { name: string }): Promise<User> { return db.createUser(args.name) } } } 18
22. // packages/server/lib/resolvers.ts import { Resolvers } from "../generated/types" const resolvers: Resolvers = { Query: { users() { return db.getUsers() } }, Mutation: { createUser(_, args) { return db.createUser(args.name) } } } 19
23. // packages/client/lib/queries.ts const query = gql`{ users { id name } }` // packages/client/lib/types.ts interface Response { users: Array<{ id: number name: string }> } // packages/client/lib/datasource.ts function getUsers() { return client.query<Response>({ query }) } 20
24. // packages/client/lib/queries.ts const query = gql` query GetUsers { users { id name } } ` // packages/client/lib/datasource.ts import { GetUsersQuery } from "../generated/types" function getUsers() { return client.query<GetUsersQuery>({ query }) } 21
26. PROBLEM 2 CLIENTS 23
27. // packages/server/lib/datasources.ts interface DbUser { id: number name: string } function getUsers() { return knex.select().from<DbUser>("user") } function createUser(name: string) { return knex<DbUser>("user").insert([{ name }]) } 24
28. // packages/client/lib/queries.ts const query = gql` query GetUsers { users { id name } } ` // packages/client/lib/datasource.ts import { GetUsersQuery } from "../generated/types" function getUsers() { return client.query<GetUsersQuery>({ query }) } 25
29. MORE CODE GENERATORS 26
30. CLIENT GENERATORS 27
31. CLIENT GENERATORS: GETTING STARTED # only client npm install graphql-zeus # only server npm install prisma2 28
32. CLIENT GENERATORS: CONFIGURATION // packages/server/prisma/schema.prisma datasource db { provider = "sqlite" url = "file:dev.db" } generator photon { provider = "photonjs" } model User { id String @default(cuid()) @id @unique name String } 29
33. CLIENT GENERATORS: SCRIPT EXECUTION # server npx prisma2 dev # client npx zeus ../server/generated/schema.graphql ./generated --ts 30
34. . !"" client # $"" generated # $"" graphql-zeus.ts $"" server !"" generated # $"" schema.graphql $"" node_modules # $"" @generated # $"" photon $"" prisma $""schema.prisma 31
35. // packages/server/lib/datasources.ts interface DbUser { id: number name: string } function getUsers() { return knex.select().from<DbUser>("user") } function createUser(name: string) { return knex<DbUser>("user").insert([{ name }]) } 32
36. // packages/server/lib/datasources.ts import Photon from "@generated/photon" const photon = new Photon() function getUsers() { return photon.users.findMany() } function createUser(name: string) { return photon.users.create({ data: { name } }) } 33
37. CLIENT GENERATION: RETURN TYPE INFERENCE 34
38. // packages/client/lib/queries.ts const query = gql` query GetUsers { users { id name } } ` // packages/client/lib/datasource.ts import { GetUsersQuery } from "../generated/types" function getUsers() { return client.query<GetUsersQuery>({ query }) } 35
39. // packages/client/lib/datasource.ts import { Api, User } from "../generated/graphql-zeus" const client = Api("http://localhost:5000") export async function getUsers() { const users = await client.Query.users([{}, { id: true, name: true }]) return users as Required<User>[] } 36
41. // packages/server/lib/schema.ts const schema = gql` type Query { users: [User!]! } ` // packages/server/lib/resolvers.ts const resolvers: Resolvers = { Query: { users() { return db.getUsers() } } } 38
42. CODE FIRST 39
43. CODE FIRST: GETTING STARTED # only server npm install nexus 40
44. // packages/server/lib/schema.ts const schema = gql` type Query { users: [User!]! } ` // packages/server/lib/resolvers.ts const resolvers: Resolvers = { Query: { users(): Promise<User[]> { return db.getUsers() } } } 41
45. // packages/server/lib/resolvers.ts import { objectType, queryType, makeSchema } from "nexus" const Query = queryType({ definition(t) { t.crud.users() } }) const User = objectType({ name: "User", definition(t) { t.model.id() t.model.name() } }) const schema = makeSchema({ types: [Query, User] }) 42
48. PRISMA 2 IS NOT PRODUCTION READY HTTPS://ISPRISMA2READY.COM 45
49. N + 1 PROBLEM photon.users.findMany({ first: 3, include: { comments: true } }) will result in N + 1 SQL queries SELECT * from users SELECT * from comments where user_id = 1 SELECT * from comments where user_id = 2 SELECT * from comments where user_id = 3 46
50. BEST OF BOTH WORLDS 47
51. // packages/server/lib/datasources.ts import Photon from "@generated/photon" const photon = new Photon() function getUsers() { return photon.users.findMany() } function createUser(name: string) { return photon.users.create({ data: { name } }) } 48
52. // packages/server/lib/datasources.ts import Photon, { User } from "@generated/photon" const photon = new Photon() function getUsers() { return knex.select().from<User>("user") } function createUser(name: string) { return photon.users.create({ data: { name } }) } 49
55. TREAT EVERY TOOL AS DISPOSABLE 52
56. SEPARATE YOUR CONCERNS! 1. Separate database schema from API schema 2. Separate data sources from resolvers 3. Write integrational tests 53
57. HTTP://TINY.CC/SINGULARITY-TALK 54
58. CODE GENERATION TOOLS - type - Apollo CLI - GraphQL Generator - SQL client - Prisma / Prisma 2 - Hasura - PostGraphile - GraphQL client - GraphQL Zeus 55
59. ROMAN PARADEEV @SAMEOLDMADNESS HTTP://TINY.CC/SINGULARITY-TALK 56