Beyond REST API

Beyond REST API

C4db14b923561bc57fc10725abbecbcf?s=128

Lin Min Phyo

December 22, 2019
Tweet

Transcript

  1. 4.

    V1

  2. 6.

    V2

  3. 7.

    V2 Changes • New tab for Activity Log is added

    • Create new API for Activity Log
  4. 8.

    API Schema • V2 • GET https://www.better.hr/api/web/profile/{id} • GET https://www.better.hr/api/web/profiles

    • GET https://www.better.hr/api/web/activiylog/{id} • GET https://www.better.hr/api/web/activiylogs
  5. 9.

    V3

  6. 10.

    V3 Changes • Added Payroll tab • Move payroll related

    fields from profile to payroll tab • Clean up old API
  7. 11.

    API Schema • V3 • GET https://www.better.hr/api/web/profile/{id} • GET https://www.better.hr/api/web/profiles

    • GET https://www.better.hr/api/web/activiylog/{id} • GET https://www.better.hr/api/web/activiylogs • GET https://www.better.hr/api/web/payroll/{id} • GET https://www.better.hr/api/web/payrolls
  8. 12.
  9. 14.

    Things to consider for Mobile Apps • JSON should be

    as lightweight as possible • Backward compatible APIs
  10. 15.

    Mobile endpoints • GET https://www.better.hr/api/mobile/profile/{id} • GET https://www.better.hr/api/mobile/profiles • GET

    https://www.better.hr/api/mobile/activiylog/{id} • GET https://www.better.hr/api/mobile/activiylogs • GET https://www.better.hr/api/mobile/payroll/{id} • GET https://www.better.hr/api/mobile/payrolls
  11. 26.

    What we realize • More frequent changes = More problems

    • More releases = More problems • More feature changes = More problems • More UI changes = More problems
  12. 27.

    Explore a new thing. • Reduce loads of API developers

    • Want Single Source of Truth • Lightweight network calls • Easy to evolve over time • Want to experiment something new
  13. 31.

    Backend Dev Frontend Dev Mobile Dev - Build API -

    Make changes Consumes API Consumes API REST
  14. 32.

    Backend Dev Frontend Dev Mobile Dev Build Schema, which information

    is opened for clients Consumes API Consumes API GraphQL Ask required information Ask required information
  15. 34.
  16. 35.
  17. 37.
  18. 38.

    NO

  19. 41.

    REST curl -X POST -H "Content-Type: application/json" --data '{ "query":

    "{ users { name } }" }' https://www.example.com/graphql curl -X GET -H "Content-Type: application/json" https://www.example.com/users GraphQL
  20. 42.

    curl -X GET -H "Content-Type: application/json" https://www.example.com/users curl -X POST

    -H "Content-Type: application/json" --data '{ "query": "{ users { name } }" }' https://www.example.com/graphql REST GraphQL
  21. 44.

    Server Side I can give you this User info :

    ID, Name, Nick Name, Job Title, Salary, Phone, Address, Gender
  22. 45.

    type User { id : String name: String nickName: String

    jobTitle : String salary : Float phone : String address : String gender : Gender } I can give you this User info : ID, Name, Nick Name, Job Title, Salary, Phone, Address, Gender GraphQL Schema
  23. 47.

    GraphQL Schema • Provided by Backend • Documentation that shows

    information provided for clients https://graphql.org/learn/schema/
  24. 48.

    type User { id : String name: String nickName: String

    jobTitle : String salary : Float phone : String address : String gender : Gender } I can give you this User info : ID, Name, Nick Name, Job Title, Salary, Phone, Address, Gender GraphQL Schema
  25. 51.

    Result { "data": { “user": { "name": "Lin Phyo", "phone":

    “+959950001234" } } } query { user { name phone } } API returns
  26. 52.

    Result { "data": { “user": { "name": "Lin Phyo", "phone":

    “+959950001234”, "email": “lin@better.hr”, } } } query { user { name phone email } } API returns Request Parameter
  27. 53.

    Result { "data": { “user": { "id": “u0001”, "name": "Lin

    Phyo", "phone": “+959950001234”, "email": “lin@better.hr”, } } } query { user { id name phone email } } API returns Request Parameter
  28. 61.

    query { users { name phone } } select name,

    phone from user where id = 1
  29. 62.

    query { users( id = 1 ) { name phone

    } } select name, phone from user where id = 1
  30. 63.

    query { users( id = 1 ) { name phone

    } } select name, phone from user where id = 1
  31. 65.

    You can update this User information : Nick Name, Phone

    & Address Server Side Client wants to update some information
  32. 66.

    Okay. I want to update Nick name & Phone Client

    Side Client wants to update some information
  33. 73.
  34. 74.
  35. 75.
  36. 76.
  37. 77.
  38. 78.
  39. 80.

    React import gql from 'graphql-tag'; import { useQuery } from

    '@apollo/react-hooks'; const GET_DOGS = gql` { dogs { id breed } } `; const { loading, error, data } = useQuery(GET_DOGS);
  40. 81.

    React import gql from 'graphql-tag'; import { useQuery } from

    '@apollo/react-hooks'; const GET_DOGS = gql` { dogs { id breed } } `; const { loading, error, data } = useQuery(GET_DOGS);
  41. 84.

    Android / iOS > apollo client:download-schema [OUTPUT] Put it inside

    project query GetMyProfile { me{ id name email } } Write the query you want : GetMyProfile.graphql
  42. 85.

    Android / iOS > apollo client:download-schema [OUTPUT] Put it inside

    project Write the query you want : GetMyProfile.graphql Build Project which will automatically run > apollo client:codegen [OUTPUT] API.swift for iOS or GetMyProfileQuery.java
  43. 86.

    Android / iOS > apollo client:download-schema [OUTPUT] Put it inside

    project Write the query you want : GetMyProfile.graphql Build Project which will automatically run > apollo client:codegen [OUTPUT] Use generated method or class to call API
  44. 91.
  45. 93.

    With Variables query GetUser($id : Int) { users( id =

    $id ) { name phone } } { “id” : 1 }
  46. 95.

    Without Aliasing query GetUser($id : Int) { users( id =

    $id ) { name phone } } { “id” : 1 }
  47. 96.

    With Aliasing query GetUser($id : Int) { employees : users(

    id = $id ) { name phone } } { “id” : 1 }
  48. 97.
  49. 99.

    Enums enum EmployeeStatus { ACTIVE, DEACTIVE, DELETE } type User

    { name : String, status : EmployeeStatus }
  50. 100.

    Enums query GetEmployeeStatuses { users { name status } }

    type User { name : String, status : EmployeeStatus }
  51. 101.

    Enums query GetEmployeeStatuses { users { name status } }

    { "data": { "users": [ { "name": “John Doe", "status": "ACTIVE" }, ... ] } }
  52. 102.

    Enums { "data": { "users": [ { "name": “John Doe",

    "status": "ACTIVE" }, ... ] } } enum EmployeeStatus { ACTIVE, DEACTIVE, DELETE }
  53. 103.
  54. 105.

    Interfaces type NotiTypeA implements Notification { id: ID! title: String!

    description: String! } interface Notification{ id: ID! title: String! description: String! }
  55. 106.

    Interfaces interface Notification{ id: ID! title: String! description: String! }

    type NotiTypeB implements Notification { id: ID! title: String! description: String! attachmentsUrls: [String!]! } type NotiTypeA implements Notification { id: ID! title: String! description: String! }
  56. 107.
  57. 109.

    Unions union User = DashboardUser | MobileUser | NonMobileUser {

    users { ... on DashboardUser { role } ... on MobileUser { deviceID } ... on NonMobileUser { officeID } } }
  58. 110.

    Unions union User = DashboardUser | MobileUser | NonMobileUser {

    users { ... on DashboardUser { role } ... on MobileUser { deviceID } ... on NonMobileUser { officeID } } }
  59. 111.

    Unions union User = DashboardUser | MobileUser | NonMobileUser {

    users { ... on DashboardUser { role } ... on MobileUser { deviceID } ... on NonMobileUser { officeID } } }
  60. 112.

    Unions union User = DashboardUser | MobileUser | NonMobileUser {

    users { ... on DashboardUser { role } ... on MobileUser { deviceID } ... on NonMobileUser { officeID } } }
  61. 120.

    Tooling Altair GraphQL Client https://altair.sirmuel.design/ IntelliJ Plugin https://github.com/jimkyndemeyer/js-graphql-intellij-plugin Apollo Platform

    https://www.apollographql.com/docs/intro/platform Apollo CLI https://github.com/apollographql/apollo-tooling
  62. 121.

    Apollo Platform • Apollo Server • Apollo Client • iOS

    and Android • Apollo CLI https://www.apollographql.com/docs/intro/platform#open- source
  63. 124.

    No

  64. 125.

    Drawbacks • Multipart request is not out of the box

    • Server side caching is harder compared to REST • Rate limiting for public APIs • Careless developers problem • Project handover
  65. 126.

    But, we gain • Write once, query anywhere • Single

    source of truth • Faster frontend, mobile development • Able to call different data nodes in one API call • Easier to analyze which fields are requested by whom • Easier to grow overtime • Performant API
  66. 127.
  67. 132.
  68. 135.

    @Linminphyoe1 https://lin.phyo.work Take a ride through a Burmese tech scene

    made by Burmese, for Burmese https://anchor.fm/techshaw @vincentpaing