Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GraphQL Los Angeles Meetup Slides

954 views

Published on

We recently hosted (3/12/18) a GraphQL meetup in Los Angeles where we discussed how at Replicated we made the transition from using REST API’s to using GraphQL Here are the slides from the discussion.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

GraphQL Los Angeles Meetup Slides

  1. 1. GraphQL @ Replicated GraphQL LA Meetup • 2018.03.13
  2. 2. Why GraphQL?
  3. 3. Developer Productivity Backend Scalability
  4. 4. Initial Impressions
  5. 5. ✓ Developer Productivity
  6. 6. ✓ Advantages vs. REST
  7. 7. REST ● Headers ● URL Path ● Querystring ● Body ● HTTP Method GraphQL ● Everything in Body ● One place for parameters
  8. 8. REST @Post("/invite/:id") public async resendInvite( @Res() response: Express.Response, @Req() request: Express.Request, @HeaderParams("Authorization") auth: string, @HeaderParams("X-Replicated-Client") webClient: string, @PathParams("id") inviteId: string, @Required() @BodyParams("") body: CreateInviteRequest, ): Promise<{} | ErrorResponse> { // … handler body return {}; }
  9. 9. GraphQL async posts(root, {userId, cursor}, context, {}) {
  10. 10. ~ Backend Scalability / Lazy Fetching
  11. 11. Apollo Server
  12. 12. NodeJS/Express Uses GraphQL Reference Implementation Supports Lazy Loading Caching and Telemetry
  13. 13. import * as express from "express"; import { graphiqlExpress, graphqlExpress } from "apollo-server-express"; const app = express(); app.use("/graphql", graphqlExpress({ schema: getSchema(), context: res.locals.context, tracing: true, cacheControl: true, });
  14. 14. const engine = new Engine({ graphqlPort: GRAPHQL_PORT, // The Upstream Server Port endpoint: "/graphql", dumpTraffic: true, engineConfig: { frontends: [{ host: "0.0.0.0", // Listen on all addresses port: APOLLO_PORT, // The port that Engine will listen on endpoint: "/graphql", }], stores: [ { name: "embeddedCache", inMemory: { cacheSize: 2485760, }, }, ], apiKey: key, logging: { level: "info", }, queryCache: { publicFullQueryStore: "embeddedCache", privateFullQueryStore: "embeddedCache", }, }, }); engine.start().then(() => { app.use(engine.expressMiddleware()); app.listen(GRAPHQL_PORT, () => { console.log("started"); }); }, );
  15. 15. async posts(root, params, ctx, meta): Promise<any> { return [ { id: "12345", title: "Hello Apollo", contents: "Here's my first post!", author: await getUser("..."), }, ]; }, Fully Synchronous
  16. 16. async posts(root, params, ctx, meta): Promise<any> { return [ { id: "12345", title: "Hello Apollo", contents: "Here's my first post!", author: getUser("..."), }, ]; }, Async with Promise
  17. 17. async posts(root, params, ctx, meta): Promise<any> { return [ { id: "12345", title: "Hello Apollo", contents: "Here's my first post!", author: () => getUser("..."), }, ]; }, Fully Deferred
  18. 18. { "data": { "posts": [ { "id": "12345", "title": "Hello Apollo", "contents": "Here's my first post!", "author": { "id": "efg", "name": "User number 3" } }, ] }, "extensions": { "tracing": { "version": 1, "startTime": "2018-03-14T01:27:37.946Z", "endTime": "2018-03-14T01:27:39.953Z", "duration": 2007352897, "execution": { "resolvers": [ { "path": [ "posts" ], "parentType": "Query", "fieldName": "posts", "returnType": "[Post]", "startOffset": 540990, "duration": 2238618 }, { "path": [ "posts", 0, Caching and Telemetry
  19. 19. Caching and Telemetry
  20. 20. Apollo Client
  21. 21. Setting up your Apollo client
  22. 22. Practical example
  23. 23. Practical example (queries)
  24. 24. Practical example (all posts)
  25. 25. Practical example (post detail)
  26. 26. Apollo Client vs. Redux
  27. 27. Redux
  28. 28. Create Actions
  29. 29. Create Reducers
  30. 30. Import Action & Use
  31. 31. Apollo Client
  32. 32. Create Query
  33. 33. Use Query
  34. 34. Apollo Link Rest
  35. 35. ✓ Use REST endpoints in an existing Apollo application
  36. 36. Example Set up your API link and connect to Apollo -----
  37. 37. Query or Mutate with REST API
  38. 38. ✓ Great way to test out GraphQL and Apollo without re-writing your APIs
  39. 39. ✓ Still under active development ✓ Using multiple REST APIs isn’t recommended, Apollo isn’t built for that. However, it’s possible!
  40. 40. <Demo/>
  41. 41. Apollo Engine is a little fragile
  42. 42. Lazy fetching is powerful ...
  43. 43. … but takes some thought up front
  44. 44. Schema Organization
  45. 45. updateEntitlementSpec( id: ID! spec: String name: String githubRef: GitHubRefInput ): EntitlementSpec
  46. 46. @Mutation() @instrumented() public async updateEntitlementSpec( root, { id, spec, name, labels, githubRef }, context: VendorContext, {}, ): Promise<EntitlementSpec | undefined> { // ...
  47. 47. schema: makeExecutableSchema({ typeDefs: VendorSchemaTypes, resolvers: { Query: { ...DecoratedQueries(), }, Mutation: { ...DecoratedMutations(), }, }, }),
  48. 48. Apollo Client is very declarative
  49. 49. Also reduces lines of code on older React applications
  50. 50. Support can be spotty, Apollo is still under active development
  51. 51. Relay (Modern)
  52. 52. Getting objects via node
  53. 53. Pagination

×