Data Management with Next.js & GraphQL (Zeit Day Berlin 2017)

Transcript

1. GRAPHCOOL Data Management with Next.js & GraphQL
2. Johannes Schickling • Based in Berlin/San Francisco • @graphcool (GraphQL Backend Platform) • Love cutting-edge technology @_schickling @schickling
4. • GraphQL Basics • Data Management in Next.js • Introduction to Graphcool • Live Demo • Resources
5. GraphQL Basics
7. Use Case: Webshop • An Item has the following fields: • id: ID • name: String • price: Float • ratingInfo: Object { "id": "cj1s966c8hudb0139bg5qjmna", "price": 2500, “name": "Macbook Pro 2016", "ratingInfo": null }
8. Status Quo: RESTful APIs GET https://api.shop.com/items [{ "id": "cj1s966c8hudb0139bg5qjmna", "price": 2500, "name": "Macbook Pro 2016" }, { "id": "cj1s96cpohufg0139keoewq22", "price": 800, "name": "iPhone" }, { "id": "cj1s97mpwhuo10139salvx5wn", "price": 1700, “name": "Macbook Air 2015" }]
9. Problem: Related data?
10. Problem: Related data? • Strategy 1: Flat endpoints
11. Problem: Related data? • Strategy 1: Flat endpoints GET https://api.shop.com/items GET https://api.shop.com/items/42/rating
12. Problem: Related data? • Strategy 1: Flat endpoints N+1 query problem
13. Problem: Related data? • Strategy 1: Flat endpoints N+1 query problem • Strategy 2: Nested endpoints
14. Problem: Related data? • Strategy 1: Flat endpoints N+1 query problem • Strategy 2: Nested endpoints GET https://api.shop.com/items-with-ratings
15. Problem: Related data? • Strategy 1: Flat endpoints N+1 query problem • Strategy 2: Nested endpoints Data overfetching
16. Solution: GraphQL “A query language for your API” HTTP POST GRAPHQL QUERY RESPONSE DATA
17. GraphQL Query query { allItems { name } }
18. GraphQL Query query { allItems { name ratingInfo { count averageRating } } }
19. GraphQL Query query { allItems { name ratingInfo { count averageRating } } } { "data": { "allItems": [{ "name": "iPhone 6", "ratingInfo": { "count": 115, "averageRating": 4.7 } }, { “name": "Macbook 2016", "ratingInfo": { "count": 29, "averageRating": 4.9 } }] } }
20. GraphQL Mutation mutation { createItem( name: "iPhone 7" price: 900 ) { id } }
21. GraphQL Mutation mutation { createItem( name: "iPhone 7" price: 900 ) { id } } { "data": { "createItem": { "id": "cj1sbo2phrmpq0124t63uyo5f" } } }
22. GraphQL Subscription subscription { Item { operation node { id name } } }
23. GraphQL Subscription subscription { Item { operation node { id name } } } […]
24. GraphQL Subscription subscription { Item { operation node { id name } } } [{ "data": { "Item": { “operation": "CREATED”, "node": { "id": 115, "name": "Macbook 2016" } } } }]
25. GraphQL Playground • GraphQL Query IDE • Auto-completion • Interactive docs • graphcool/graphql-playground
26. Demo ▶
27. GraphQL SDL type Item { id: ID! @isUnique price: Float! name: String! ratingInfo: RatingInfo! @relation(name: "ItemRatingInfo") } type RatingInfo { id: ID! @isUnique count: Int! averageRating: Float! item: Item! @relation(name: "ItemRatingInfo") } • Describes data model • Syntax: GraphQL SDL • Typesystem
28. Data Management in Next.js
29. Database
30. Data Management • Data Fetching • Direct database access • API Layer • Local State Management • Props/State • Redux
31. Data Fetching: Direct database access • Problems: • Strong coupling • Insecure export default class extends React.Component { static async getInitialProps ({ req }) { if (req) { const { db } = req // Note that `db` above comes from express middleware const list = await db.collection(‘Book’).find() .sort({ createdAt: -1 }).toArray() return { list } } return { list: [] } } // … }
32. Data Fetching: API Layer • Format: REST or GraphQL • Mapping needed from API to Database (ORM)
33. Local State Management • Props/State • Redux • … • Is there a better way with GraphQL?
34. GraphQL Clients • Popular GraphQL clients: Apollo & Relay • Features: • Manages caching & network layer (HTTP, real-time, offline) • View-layer integration • Tooling: Build-time query validation & optimization
35. Apollo Client • Install: `npm install apollo-client react-apollo` • Usage: • Configure `ApolloProvider` • Component wrapping • Bonus: SSR via `getInitialProps`
36. import { ApolloClient, createNetworkInterface } from 'react-apollo'; const client = new ApolloClient({ networkInterface: createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/webshop', }), });
37. import { gql, graphql } from 'react-apollo'; function App({ data: { allItems } }) { return ( <ul> {allItems.map(item => <li key={item.id}>{item.name}</li>)} </ul> ); } export default graphql(gql` query AllItems { allItems { id name } } `)(App);
38. Recap • Data management stack: GraphQL API layer & Apollo Client • Problem: Introduces a lot of complexity (code/infrastructure) • Solution: Better abstractions & workflows needed
39. Intro to GRAPHCOOL
40. What is Graphcool? • GraphQL Backend Development Platform • Technology: • Creates GraphQL API based on your data model • Framework to implement auth, permissions & business logic • Platform: • Database & API hosting • Collaboration
41. `npm i -g graphcool`
42. Hello world
43. • graphcool.yml • Data Model • Permissions • Functions • Modules
44. • types.graphql • Models • Relations • Constraints
45. API • SQL-like flexibility: Querying, filtering, pagination, sorting, … • Powerful real-time API • Supports all GraphQL clients (no SDK needed)
46. Auth & Permissions • Authentication: • Supports every auth provider: Facebook, Twitter, Auth0… • Implement your own auth method • Authorization: • Powerful permission system (based on data graph or imperative)
47. Functions • Used to implement business logic and extend API • Supports webhooks or managed function • Enables event-driven architecture
48. Live Demo
49. Webshop Demo • List all items & add to shopping cart • Checkout process (authentication via Auth0) • Payment via Stripe & send confirmation via Mailgun
50. What we’ll do 1. Understand app & code base 2. Setup Project 1. Create Graphcool project 2. Configure service credentials via env vars 3. Seed initial data 4. Deploy code via now & configure webhooks 3. Run app
51. Code Base • Frontend: Next.js • pages, components, lib • Backend: Graphcool & Node • Config: graphcool.yml & types.graphql • Logic: pay.js & sendConfirmEmail.js
52. Checkout Process • Authenticate `User` via `authenticateAuth0User` mutation • Add `Item`s to `Basket` • Create `Order` • Pay via `pay` mutation - sets `orderedAt` timestamp • Triggers `sendCustomerMail`
54. Code available on Github /nikolasburk/gc-webshop
55. Easy Deployment Web-Apps Datastore
56. Resources
57. Full tutorial online shortly Follow us on Medium: blog.graph.cool
58. Learning GraphQL • How to GraphQL: howtographql.com • Firebase vs GraphQL: bit.ly/2xthzjR • GraphQL Newsletter: graphqlweekly.com
59. Join our Community • Chat: slack.graph.cool • Forum: graph.cool/forum
60. Coming soon… • New beta available: • Local development workflow • Learn more: graph.cool/forum • Upcoming announcement: • Run Graphcool locally • Deploy on your own servers
61. Thank you GRAPHCOOL