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.

1. GraphQL @ Replicated
GraphQL LA Meetup • 2018.03.13

2. Why GraphQL?

3. Developer Productivity
Backend Scalability

4. Initial Impressions

5. ✓ Developer Productivity

6. ✓ Advantages vs. REST

7. REST
● Headers
● URL Path
● Querystring
● Body
● HTTP Method
GraphQL
● Everything in Body
● One place for parameters

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. GraphQL
async posts(root, {userId, cursor}, context, {}) {

10. ~ Backend Scalability / Lazy Fetching

11. Apollo Server

12. NodeJS/Express
Uses GraphQL Reference Implementation
Supports Lazy Loading
Caching and Telemetry

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. 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. 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. 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. 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. {
"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. Caching and Telemetry

20. Apollo Client

21. Setting up your Apollo client

22. Practical example

23. Practical example (queries)

24. Practical example (all posts)

25. Practical example (post detail)

26. Apollo Client vs. Redux

27. Redux

28. Create Actions

29. Create Reducers

30. Import Action & Use

31. Apollo Client

32. Create Query

33. Use Query

36. Apollo Link Rest

37. ✓ Use REST endpoints in an existing
Apollo application

38. Example
Set up your API link and connect to Apollo
-----

39. Query or Mutate with REST API

40. ✓ Great way to test out GraphQL and
Apollo without re-writing your APIs

41. ✓ Still under active development
✓ Using multiple REST APIs isn’t
recommended, Apollo isn’t built for that.
However, it’s possible!

42. <Demo/>

44. Apollo Engine is a little fragile

45. Lazy fetching is powerful ...

46. … but takes some thought up front

47. Schema Organization

48. updateEntitlementSpec(
id: ID!
spec: String
name: String
githubRef: GitHubRefInput
): EntitlementSpec

49. @Mutation()
@instrumented()
public async updateEntitlementSpec(
root,
{ id, spec, name, labels, githubRef },
context: VendorContext,
{},
): Promise<EntitlementSpec | undefined> {
// ...

50. schema: makeExecutableSchema({
typeDefs: VendorSchemaTypes,
resolvers: {
Query: {
...DecoratedQueries(),
},
Mutation: {
...DecoratedMutations(),
},
},
}),

51. Apollo Client is very declarative

52. Also reduces lines of code on older
React applications

53. Support can be spotty, Apollo is still
under active development

54. Relay (Modern)

55. Getting objects via node

56. Pagination