MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
1 like977 views
The document outlines the process of building a GraphQL API using MongoDB, Prisma, and TypeScript, highlighting the advantages of GraphQL over traditional REST APIs. It details the architecture of a GraphQL server, including schema definition, resolver functions, and server setup, along with practical code examples. Additionally, it discusses how Prisma enhances database access and management, providing type-safe interactions and simplifying workflows.
![query {
user(id: “user123”) {
name
posts {
title
}
}
}
HTTP POST
{
"data" :{
"user": {
"name": "Sarah",
"posts": [
{ "title": "Join us for GraphQL Conf 2019” },
{ "title": "GraphQL is the future of APIs" },
]
}
}
}](https://image.slidesharecdn.com/matthiasoertelbuildingagraphqlapiwithmongodbprismatypescript-190627160933/85/MongoDB-World-2019-Building-a-GraphQL-API-with-MongoDB-Prisma-TypeScript-9-320.jpg)
![“Hello World”
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts](https://image.slidesharecdn.com/matthiasoertelbuildingagraphqlapiwithmongodbprismatypescript-190627160933/85/MongoDB-World-2019-Building-a-GraphQL-API-with-MongoDB-Prisma-TypeScript-15-320.jpg)
![“Hello World”
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
type Query {
hello(name: String!): String!
}
index.ts schema.graphql (generated)](https://image.slidesharecdn.com/matthiasoertelbuildingagraphqlapiwithmongodbprismatypescript-190627160933/85/MongoDB-World-2019-Building-a-GraphQL-API-with-MongoDB-Prisma-TypeScript-16-320.jpg)
![“Hello World”
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
type Query {
hello(name: String!): String!
}
index.ts schema.graphql (generated)](https://image.slidesharecdn.com/matthiasoertelbuildingagraphqlapiwithmongodbprismatypescript-190627160933/85/MongoDB-World-2019-Building-a-GraphQL-API-with-MongoDB-Prisma-TypeScript-17-320.jpg)
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
- 1. Building a GraphQL API with MongoDB, Prisma & TypeScript
- 2. Matthias Oertel Based in Berlin Engineer at @prisma @oertel_matthias@do4gr
- 3. GraphQL Introduction Understanding GraphQL Servers Building GraphQL Servers with MongoDB, Prisma & TypeScript Agenda 1 2 3
- 5. ● A query language for APIs (alternative to REST) ● Language-agnostic on backend and frontend ● Developed by Facebook, now led by GraphQL Foundation What is GraphQL?
- 6. GraphQL has become the new API standard
- 7. Benefits of GraphQL ✓ Query exactly the data you need (in a single request) ✓ Declarative & strongly typed schema ✓ Schema as cross-team communication tool (decouples teams)
- 8. REST ● Multiple endpoints ● Server decides what data is returned GraphQL ● Single endpoint ● Client decides what data is returned
- 9. query { user(id: “user123”) { name posts { title } } } HTTP POST { "data" :{ "user": { "name": "Sarah", "posts": [ { "title": "Join us for GraphQL Conf 2019” }, { "title": "GraphQL is the future of APIs" }, ] } } }
- 11. Demo
- 13. Three parts of a GraphQL server ● API definition: GraphQL schema ● Implementation: Resolver Functions ● Server: Network (HTTP), Middleware, Auth ...
- 15. “Hello World” const Query = queryType({ definition(t) { t.string('hello', { args: { name: stringArg() }, resolve: (_, args) => { return `Hello ${args.name}` } }) }, }) const schema = makeSchema({ types: [Query] }) const server = new GraphQLServer({ schema }) server.start(() => console.log(`Running on http://localhost:4000`)) index.ts
- 16. “Hello World” const Query = queryType({ definition(t) { t.string('hello', { args: { name: stringArg() }, resolve: (_, args) => { return `Hello ${args.name}` } }) }, }) const schema = makeSchema({ types: [Query] }) const server = new GraphQLServer({ schema }) server.start(() => console.log(`Running on http://localhost:4000`)) type Query { hello(name: String!): String! } index.ts schema.graphql (generated)
- 17. “Hello World” const Query = queryType({ definition(t) { t.string('hello', { args: { name: stringArg() }, resolve: (_, args) => { return `Hello ${args.name}` } }) }, }) const schema = makeSchema({ types: [Query] }) const server = new GraphQLServer({ schema }) server.start(() => console.log(`Running on http://localhost:4000`)) type Query { hello(name: String!): String! } index.ts schema.graphql (generated)
- 18. `User` model: Query const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('name') } }) const Query = queryType({ definition(t) { t.field('user', { type: 'User', args: {id: idArg()}, resolve: () => userCollection.findOne(id) }) }, }) index.ts
- 19. const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('name') } }) const Query = queryType({ definition(t) { t.field('user', { type: 'User', args: {id: idArg()}, resolve: () => userCollection.findOne(id) }) }, }) index.ts `User` model: Query
- 20. const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('name') } }) const Query = queryType({ definition(t) { t.field('user', { type: 'User', args: {id: idArg()}, resolve: () => userCollection.findOne(id) }) }, }) index.ts type User { id: ID! name: String! } type Query { user(id: ID): User } schema.graphql (generated) `User` model: Query
- 21. const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('name') } }) const Mutation = mutationType({ definition(t) { t.field('createUser', { type: 'User', args: { name: stringArg() }, resolve: (_, args) => userCollection.insertOne({name: args.name}) }) }, }) index.ts `User` model: Mutation
- 22. const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('name') } }) const Mutation = mutationType({ definition(t) { t.field('createUser', { type: 'User', args: { name: stringArg() }, resolve: (_, args) => userCollection.insertOne({name: args.name}) }) }, }) index.ts type User { id: ID! name: String! } type Mutation { createUser(name: String): User! } schema.graphql (generated) `User` model: Mutation
- 23. Demo
- 24. Building GraphQL Servers with Prisma 3
- 25. GraphQL resolvers are hard ✗ A lot of CRUD boilerplate ✗ Deeply nested queries ✗ Performant database access & N+1 problem ✗ Difficult to achieve full type-safety ✗ Implementing realtime operations
- 26. What is Prisma? Database Access (ORM) Type-safe database access with the auto-generated Prisma client Migrations Declarative data modeling and datamodel migrations Admin UI Visual data management with Prisma Studio Prisma replaces traditional ORMs and simplifies database workflows Query Analytics Quickly identify slow data access patterns
- 27. Prisma is the database-interface for application developers
- 28. Prisma is the database-interface for application developers
- 29. Demo Architecture with Prisma
- 30. How Prisma works with MongoDB
- 31. Demo
- 32. GraphQL Recap ● Flexibility ● High Scalability ● Embedded Documents ● Powerful primitives ● Auto-Completion ● Typesafety ● Multi-Language ● Flexible APIs ● Get what you need ● Schema decouples teams MongoDBPrisma