GraphQL - The future of API's

Take a dive into the future of API's with GraphQL, and it's most popular framework: Apollo! What is GraphQL? Why would you use it? Why is it the future? Let's jump in and find out!

Transcript

1. GraphQL - The future of API’s One Endpoint - Limitless possibilities With Apollo and React Kyle McLeod
2. Table of Contents 1. Quick overview 2. Initial App structure / dependencies / config 3. Set up server 4. How to GraphQL a. Schema b. Resolvers c. Query / Mutate i. Graphiql ii. Query / Mutation patterns 5. Refactor for scale 6. GraphQL over REST 7. Why Apollo? 8. Resources TL;DR / FYI This will be a high level overview with some code examples (API heavy)! If you want more info or want to talk specifics - feel free to email me! KyleMcLeod1@gmail.com
3. Overview - What and Why? • GraphQL was originally developed by Facebook • Great for mobile / slower networks • Replacement for REST • GraphQL is BOTH a declarative query language for getting data AND a specification for an API service that will handle GraphQL requests. • Faster iteration during development (no API versioning) • Can use with the increasing variety of front ends • No overfetching or underfetching data • Once schema is set, backend and frontend can work independently • Transport layer agnostic (TCP/IP, Web Sockets, ect) • BONUS: Apollo has a caching layer (can replace Redux!)
5. How to approach GraphQL architecture - With Connected DB
6. How to approach GraphQL architecture - Integration layer with existing infrastructure
7. How to approach GraphQL architecture - Hybrid Approach
8. /api/v1/user { “id”: 234 “username”: “kcloud99” “firstName”: “Kyle” “lastName”: “McLeod” “city”: “Bend” “state”: “OR” “email”: “kcloud99@gmail.com” “markets”: [{ “id”: 7290, “rank”: 1 }, { “id”: 231, “rank”: 2 }] } /api/v1/markets [{ “id”: 7290 “Industry”: “Web Development” “Location”: “Bend” “Users”: [234, 523, 532, 543, 657, 789, 986] }, { “id”: 231 “Industry”: “Graphic Design” “Location”: “Bend” “Users”: [123, 32, 48, 843, 234, 84, 299, 875] }]
9. query userMarkets Viewer { user { firstName lastName City state email markets { id rank industry Location users { id } } } } { “Id”: 234 “userName”: “kcloud99” “firstName”: “Kyle” “lastName”: “McLeod” “city”: “Bend” “state”: “OR” “email:” “kcloud99@gmail.com” “markets”: [{ “id”: 7290 “rank:” 1 “industry”: “Web Development” “location”: “Bend” “users”: [234, 523, 532, 543, 657, 789, 986] }, { “id”: 231 “rank”: 2 “Industry”: “Graphic Design” “Location”: “Bend” “Users”: [123, 32, 48, 843, 234, 84, 299, 875] }] }
10. But… How does it work?? Ask for what you want… Get predictable results! Get exactly what you need, no more and no less. GraphQL APIs are organized in terms of types and fields, not endpoints.
11. App Structure Dependencies Server Database App Client index.js server.js Components index.js rest-server.js ... register-api.js
12. Webpack Config Babel Config
13. Express Server
14. How to GraphQL Schema Step 1 Define your data Explicitly define how (what shape) you want your data to be exposed to your client or whatever other service will be consuming it. Types • Object Type • Arrays • Scalar Types ◦ String ◦ Int ◦ Float ◦ Boolean • Enum Types ◦ Set Values • Queries ◦ Arguments • Mutations ◦ Complex inputs • Subscriptions** • Interfaces** • Unions**
15. Schema
16. How to GraphQL Schema Step 1 Define your data Explicitly define how (what shape) you want your data to be exposed to your client or whatever other service will be consuming it. Step 2 Define your Resolvers Define all your data endpoints, API’s, Databases, Services, ect where your data will come from and let GraphQL know how to get it. Resolvers fieldName(obj, args, context, info) { result } 1. obj: The object that contains the result returned from the resolver on the parent field, or, in the case of a top-level Query field, the rootValue passed from the server configuration. 2. args: An object with the arguments passed into the field in the query. 3. context: This is an object shared by all resolvers in a particular query, and is used to contain per-request state. 4. info: This argument should only be used in advanced cases, but it contains information about the execution state of the query.
18. How to GraphQL Schema Step 1 Define your data Explicitly define how (what shape) you want your data to be exposed to your client or whatever other service will be consuming it. Step 2 Define your Resolvers Define all your data endpoints, API’s, Databases, Services, ect where your data will come from and let GraphQL know how to get it. Step 3 Use the data in your app! Use queries to grab whatever data you want from your single GraphQL endpoint. Use it throughout your application easily Resolvers Query
19. Graphiql Self-documenting playground for your data… Let’s set up some queries! www.my-graphql-site.com/graphiql
23. TL;DR - Other Query Stuff... Aliases Fragments Directives
25. App Structure Config Server Database App Client index.js server.js Components index.js register-api.js ... rest-server.js Queries queries.js mutations.js API queries.graphql schema.graphql
26. Conclusion - Why is it better than REST? Flexible, explicit queries: Put the consumer of the API in full control over what data they receive. Parse on Server, not Client: Server does it automatically! No custom code for parsing from source! Query consolidation: Single query, multiple data types! Executed in parallel on the server. No more API endpoint sprawl: Write the code for accessing a data type, and you won’t have to re-implement it. Type-safe, self-documenting: GRAPHIQL!!! Server-side Data Caching: Reduce network traffic by caching common queries on server
27. Conclusion - Why Use Apollo? Apollo Clients: • React / Native • Vue • Angular • Android • iOS • Meteor (created Apollo) With React: can use HOC or Render props for Apollo Client Intelligent caching: Persistent caching for PWA’s Can actually use Apollo without Graphql Apollo dev tools tab Apollo Servers: • Express • Connect • Hapi • Koa • Restify • Lambda • Micro • Azure-functions • Adonis • Support HTTP query batching • Support Apollo Tracing to get performance information about your server • Support Apollo Cache Control to inform caching gateways such as Apollo Engine
28. Resources Scaling your application • https://github.com/quadric/babel-plugin-inline-import • https://github.com/elliottsj/babel-inline-import-loader • https://github.com/prismagraphql/graphql-import • https://github.com/prismagraphql/graphql-import-loade r • https://github.com/prismagraphql/graphql-import • https://graphql-import.now.sh/ • https://github.com/quadric/babel-plugin-inline-import • https://github.com/elliottsj/babel-inline-import-loader • https://github.com/Quadric/perfect-graphql-starter/blob/ma ster/server/models.js • https://www.graphql.com/guides/ • https://www.graphql.com/ • https://graphql.github.io/learn/pagination/ • https://graphql.org/graphql-js/ • https://github.com/graphql/graphql-js