-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
840 lines (697 loc) · 161 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal-md</title>
<link rel="stylesheet" href="./css/reveal.css">
<link rel="stylesheet" href="./css/theme/moon.css" id="theme">
<link rel="stylesheet" href="./css/highlight/zenburn.css">
<link rel="stylesheet" href="./css/print/paper.css" type="text/css" media="print">
</head>
<body>
<div class="reveal">
<div class="slides"><section data-markdown><script type="text/template"># Intro to GraphQL
Hello and welcome 👋
My name is **Matúš Marcin**
</script></section><section data-markdown><script type="text/template">
### What will happen now?
* What is GraphQL
* Why is it useful
* Where to use it
* and most importantly, how.
</script></section><section data-markdown><script type="text/template">
### Expected outcome
A very simple but complete example of how GraphQL server can be built on top of REST API and used in a client React.js app with Relay Modern.
<aside class="notes"><p>I expect the average listener to at best be experienced with Javascript and/or have good understanding of some other reasonable programming language. Feel free to ask at any point. However I don’t intend to be covering JS or ES6 syntax.</p>
</aside></script></section><section data-markdown><script type="text/template">
## What is GraphQL?
Okay, let’s start at the start.
</script></section><section data-markdown><script type="text/template">
### What is?
> GraphQL is a **query language for your API**, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data. [[src](http://graphql.org/learn/)]
</script></section><section data-markdown><script type="text/template">
For example the query:
```javascript
{
me {
name
}
}
```
Could produce the JSON result:
```javascript
{
"me": {
"name": "Luke Skywalker"
}
}
```
</script></section><section data-markdown><script type="text/template">
### Where is?
<img src="graphql-where.jpg" style="height: 60vh;" />
<aside class="notes"><p>Here, <strong>between</strong> your client and (REST) API.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Where is?
<img src="graphql-arch.jpg" style="height: 60vh;" />
<aside class="notes"><p>But you could also put it between your client<strong>(s)</strong> and <strong>APIs, DBs, whatever</strong> you have.</p>
</aside></script></section><section data-markdown><script type="text/template">
## Why GraphQL?
1. Simple and self-descriptive way to query the data.
2. Only get what you need.
3. Even if it lives in multiple places.
<aside class="notes"><p>So why GraphQL? I think motivation can be found in these three points.</p>
</aside></script></section><section data-markdown><script type="text/template">
## How GraphQL?
_“Okay, we’re sold (or we still have beer) so go on and tell us how to do this.”_
<aside class="notes"><p>At this point you’re nodding in agreement and thinking.. And I shall go do just that.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Hello world!
Let’s take this super simple example:
```
npm init
npm install graphql --save
```
</script></section><section data-markdown><script type="text/template">
### Create a `server.js`
```javascript
var { graphql, buildSchema } = require('graphql');
var schema = buildSchema(`
type Query {
hello: String
}
`);
var root = {
hello: () => {
return 'Hello world!';
},
};
graphql(schema, '{ hello }', root).then((response) => {
console.log(response);
});
```
</script></section><section data-markdown><script type="text/template">
### Hello world! 🎉
And now you can run
```
node server.js
```
Which should output:
```javascript
{ data: { hello: 'Hello world!' } }
```
<aside class="notes"><p>Absolutely amazing and incredibly useless, you might say and I won’t disagree. This is not quite there yet, just a hello world. And those are rarely full-blown production ready codebases.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Enter Express
#### (And a couple more things)
* Let’s take my [`graphql-express-example`, branch `1-hello`](https://github.com/matusmarcin/graphql-express-example/tree/1-hello)...
</script></section><section data-markdown><script type="text/template">
### `server.js` part 1
```javascript
// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
type Query {
hello: String
}
`);
// The root provides a resolver function for each API endpoint
var root = {
hello: () => {
return 'Hello world!';
},
};
```
</script></section><section data-markdown><script type="text/template">
### `server.js` part 2
```javascript
var app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000);
```
</script></section><section data-markdown><script type="text/template">
### Run it
* Run the project with `node server`
* Navigate to [localhost:4000/grapqhl](http://localhost:4000/graphql)
* See GraphiQL which is a graphical interface to GraphQL.
</script></section><section data-markdown><script type="text/template">
### GraphiQL 🎉
* Columns are for your query, response and docs (with our schema).
<img src="graphiql-hello.png" style="max-height: 60vh;" />
<aside class="notes"><p>You can explore the docs and see that this very simple schema knows only one query <code>hello</code> and the response for it is the same as in the previous example. Pretty much the same stuff, but now it looks much more usable (and extensible).</p>
</aside></script></section><section data-markdown><script type="text/template">
### Moving on from hello worlds
#### (And connecting to REST API)
* We’ll now attempt to connect our GraphQL to a REST API.
* Let’s fashion a simple one from my [`node-express-static`](https://github.com/matusmarcin/node-express-static/) example.
</script></section><section data-markdown><script type="text/template">
### We have REST
* Running `npm start` (after you’ve `npm i`-ed before) gets you this on [localhost:3000](http://localhost:3000/users/):
* `users`
* `users/{id}`
</script></section><section data-markdown><script type="text/template">
### We have REST 🎉
<img src="rest-api.png" style="max-height: 60vh;" />
</script></section><section data-markdown><script type="text/template">
### That’s cool
* Let’s put a GraphQL on top of it.
* Here follows a gist of it:
* a separate `schema.js` file we’ve created
* some `fetch` helper functions
* GraphQL imports, of course
</script></section><section data-markdown><script type="text/template">
### Our `schema.js` part 1
```javascript
const QueryType = new GraphQLObjectType({
name: 'Query',
fields: () => ({
allUsers: {
type: new GraphQLList(UserType),
resolve: root => fetchUsers(),
},
user: {
type: UserType,
args: {
id: { type: GraphQLInt },
},
resolve: (root, args) => fetchUserById(args.id),
},
}),
});
```
</script></section><section data-markdown><script type="text/template">
### Our `schema.js` part 2
```javascript
const UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
name: {
type: GraphQLString,
resolve: user => user.name,
},
id: {type: GraphQLInt},
}),
});
export default new GraphQLSchema({
query: QueryType,
});
```
</script></section><section data-markdown><script type="text/template">
### We have GraphQL on REST! 🎉
* `npm start` and [localhost:4000/graphql](http://localhost:4000/graphql) gets you:
<img src="graphql-express-rest.png" style="max-height: 50vh;" />
<aside class="notes"><p>We now have two fields in our Query - <code>allUsers</code> and <code>user</code> with a parameter <code>id: Int</code>.</p>
</aside></script></section><section data-markdown><script type="text/template">
### The other query
```javascript
{
user(id: 2) {
id
name
}
}
```
Returns just a user by `id`, of course.
<aside class="notes"><p>As you can see here, GraphQL supports parameters inside queries with a very reasonable syntax.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Show me what you got
Let's process `friends` too.
<aside class="notes"><p>This is all nice, but we still have that array of friends which contains references to other users. This is were GraphQL can really shine.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Adding friends
We extend our `UserType` and add `friends` with a resolver.
```javascript
const UserType = new GraphQLObjectType({
name: 'User',
description: 'Somebody that you used to know',
fields: () => ({
name: {
type: GraphQLString,
resolve: user => user.name,
},
id: {type: GraphQLInt},
* friends: {
* type: new GraphQLList(UserType),
* resolve: user => user.friends.map(fetchUserById)
* },
}),
});
```
<aside class="notes"><p>We’ve already had <code>fetchUserById</code> defined - it returns a Promise with a user json. All the magic here is done by GraphQL and thanks to the types we have defined.</p>
</aside></script></section><section data-markdown><script type="text/template">
### We have friends! 🎉
<img src="graphql-friends.png" style="max-height: 60vh;" />
</script></section><section data-markdown><script type="text/template">
### Connecting more APIs
Let’s connect another API. Essentially **anything asynchronous**.
<aside class="notes"><p>It could be another REST, MongoDB. However I was a bit lazy and just went for filesystem. [<a href="https://github.com/matusmarcin/graphql-express-example/tree/4-more">repo</a>]</p>
</aside></script></section><section data-markdown><script type="text/template">
### Adding another field
```javascript
const UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
name: { ... },
* message: {
* type: GraphQLString,
* resolve: user => getSomeRandomDataFromFile(),
* },
id: { ... },
friends: { ... },
}),
});
```
</script></section><section data-markdown><script type="text/template">
### It reads from file
I wrapped the traditional assychronous callback `fs.writeFile` into a Promise:
```javascript
function getSomeRandomDataFromFile() {
return new Promise(function(resolve, reject){
fs.readFile('data.txt', 'utf8', (err, data) => {
if (err) { reject(err); }
resolve(data);
})
});
}
```
</script></section><section data-markdown><script type="text/template">
### We have a new field 🎉
When querying for users with message field:
```javascript
{
allUsers {
name
message
}
}
```
We’re now getting...
</script></section><section data-markdown><script type="text/template">
### We have a new field 🎉
```javascript
{
"data": {
"allUsers": [
{
"name": "John Doe",
"message": "Hello everyone!"
},
{
"name": "Jane Doe",
"message": "Hello everyone!"
},
...
]
}
}
```
<aside class="notes"><p>I will go and make this a little more practical allowing us to specify a message for each user. [<a href="https://github.com/matusmarcin/graphql-express-example/tree/5-messages">repo</a>]</p>
</aside></script></section><section data-markdown><script type="text/template">
### A detour towards practicality
* A structure where messages are read based on user’s first name:
```
- [data]
- donald.txt
- elon.txt
- john.txt
```
* Resolver is slightly modified.
* You can imagine (or look in the [repo](https://github.com/matusmarcin/graphql-express-example/tree/5-messages) to see) how the `getUserMessageFromFile()` might look.
</script></section><section data-markdown><script type="text/template">
### A message per user
```javascript
{
"data": {
"allUsers": [
{
"name": "John Doe",
"message": "Hello there."
},
{
"name": "Jane Doe",
"message": null
},
{
"name": "Donald Trump",
"message": "Make Trump Rich Again!"
},
{
"name": "Elon Musk",
"message": "Go electric!"
},
...
]
}
}
```
<aside class="notes"><p>That’s it. In case a file is non-existent, the message can be null.</p>
<p>Alright, this is enough of a server. We can try build a client app.</p>
</aside></script></section><section data-markdown><script type="text/template">
## Client app
</script></section><section data-markdown><script type="text/template">
### React.js + Relay Modern
* A simple thing that shows a list of users.
* We have only two components at this point - `App` and `User`.
* (I admit, I could’ve added `UserList` from the beginning. Will do that later.)
<aside class="notes"><p>The skeleton of the app with static data might look like this. [<a href="https://github.com/matusmarcin/graphql-react-client/tree/1-hardcoded">repo</a>]</p>
</aside></script></section><section data-markdown><script type="text/template">
### Hardcoded version
<aside class="notes"><p>Normally this kind of data might be coming from REST API and you’d be probably <code>fetch</code>ing it. We want to use GraphQL for this.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Let's GraphQL it
* Two client libraries that exists here are:
* [Apollo](https://github.com/apollographql)
* [Relay](https://facebook.github.io/relay/).
* I will go with Relay.
* I am strongly suggesting you research which one fits **you** better. There’s [this article](https://medium.com/@codazeninc/choosing-a-graphql-client-apollo-vs-relay-9398dde5363a) that might be useful.
<aside class="notes"><p>There is Relay “Classic” and Relay modern. Relay Modern is the newer version so I went with that.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Okay, React.js + Relay Modern for real now
1. Get the schema (copy for now, can be automated)
2. Install and import `react-relay`
3. Define our relay `Environment.js` [[src](https://facebook.github.io/relay/docs/relay-environment.html)]
4. Define queries in the React component files
5. Use `QueryRenderer` at top level [[src](https://facebook.github.io/relay/docs/query-renderer.html)]
<aside class="notes"><p>We have to do a couple of things, really. Here they are in somewhat of an order.</p>
</aside></script></section><section data-markdown><script type="text/template">
### First query, part 1
```javascript
import React, { Component } from 'react';
import { QueryRenderer, graphql } from 'react-relay'
import environment from './Environment'
import User from './User';
const AppAllUsersQuery = graphql`
query AppAllUsersQuery {
user(id: "3") {
id
name
message
}
}
`
```
</script></section><section data-markdown><script type="text/template">
### First query, part 2
```javascript
class App extends Component {
render() {
return (
<div>
<h1>Hello there.</h1>
<QueryRenderer
environment={environment}
query={AppAllUsersQuery}
render={({error, props}) => {
if (error) {
return <div>{error.message}</div>
} else if (props) {
return <User {...props.user} />
}
return <div>Loading</div>
}}
/>
</div>
);
}
}
export default App;
```
<aside class="notes"><p>As you can see, this covers 2., 4. and 5., and uses 3. Somehow, I just render one user here, but that could be easily changed in the <code>query</code> and <code>QueryRenderer</code>’s <code>render</code> prop.</p>
</aside></script></section><section data-markdown><script type="text/template">
### To run it
* Whenever you change the queries, you need to run:
```
relay-compiler --src ./src --schema ./schema.graphql
```
or in my case:
```
npm run relay
```
* And then `npm start` and we can see [localhost:5000](http://localhost:5000)
</script></section><section data-markdown><script type="text/template">
### We have React + Relay + GraphQL! 🎉
<img src="react-donald.png" style="max-height: 50vh;" />
Hooray, we’ve connected our app with GraphQL!
</script></section><section data-markdown><script type="text/template">
### User list
I forgot to do this.
```javascript
const AppAllUsersQuery = graphql`
* query AppAllUsersQuery {
* allUsers {
* id
* name
* message
* }
}
`
class App extends Component {
render() {
return (
<div>
<QueryRenderer
environment={environment}
query={AppAllUsersQuery}
render={({error, props}) => {
...
* return <UserList users={props.allUsers} />
}}
/>
</div>
);
}
}
```
For a proof: [localhost:5000](http://localhost:5000).
<aside class="notes"><p>Like I’ve mentioned, I forgot to create a <code>UserList</code> components so this is where I catch up.</p>
<p>I also just change the query in <code>App.js</code> to pull all users.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Fragments
* Okay, we have one query defined at our top component but this is neither very practical nor scalable.
* We’re going to move to **collocated queries** and use **fragments** for that.
</script></section><section data-markdown><script type="text/template">
### Wait, what’s a fragment?
Here:
```javascript
{
allUsers {
...User_user
}
}
fragment User_user on User {
id
name
message
}
```
<aside class="notes"><p>The first thing is a query which uses the fragment (the second thing). You know that reuse is a great thing and you can imagine how it might help if we only defined this fragment once and then used it on several occasions.</p>
</aside></script></section><section data-markdown><script type="text/template">
### When are fragments useful
```javascript
query UserListQuery {
allUsers {
...User_user
}
}
query SpecificUserQuery {
user(id: "2") {
...User_user
}
}
```
</script></section><section data-markdown><script type="text/template">
### How to use them?
```javascript
* import { createFragmentContainer, graphql } from 'react-relay';
class User extends Component {
render() {
...
}
}
*export default createFragmentContainer(User, graphql`
* fragment User_user on User {
* id
* name
* message
* }
*`)
```
<aside class="notes"><p>We have wrapped our <code>User</code> with the <code>createFragmentContainer</code> . [<a href="https://facebook.github.io/relay/docs/fragment-container.html">src</a>]</p>
<p>This way we can easily see what kind of data Relay will provide from GraphQL and we don’t really have to be worried about anything else here.</p>
</aside></script></section><section data-markdown><script type="text/template">
### How to use them?
In the `UserList` component we have left:
```javascript
const AllUsersQuery = graphql`
query UserListQuery {
allUsers {
...User_user
}
}
`;
```
Plus the `QueryRenderer` part which I have moved from `App.js` here.
<aside class="notes"><p>If the app still displays what it did before, we haven’t broken anything (yay!) only made our code better.</p>
</aside></script></section><section data-markdown><script type="text/template">
### We have fragments! 🎉
</script></section><section data-markdown><script type="text/template">
### Displaying friends
I have also added a feature that displays friends but that now seems really straightforward so I am not go into detail on that. You can find it in the [repo](https://github.com/matusmarcin/graphql-react-client/tree/5-friends).
</script></section><section data-markdown><script type="text/template">
## Back to GraphQL server
<aside class="notes"><p>That’s all with the client for now. Let’s go back to the server part and play with that a bit more.</p>
</aside></script></section><section data-markdown><script type="text/template">
## Mutations
#### aka fancy POST
A **way to modify server-side data**.
```javascript
mutation {
changeUserMessage(id: "2", message: "Greetings from the jungle!") {
id
name
message
}
}
```
<aside class="notes"><p>And the last trick up my sleeve (I have only so many sleeves) is showing you <strong>mutations</strong> with GraphQL. This is truly, as my friends described it, just a fancy POST</p>
<p>I am going to consider a mutation that changes the user message (specifying the ID and new message):</p>
<p>Notice I am asking for <code>name</code> along with <code>id</code> and <code>message</code> to be returned - since my mutation field <code>changeUserMessage</code> returns <code>UserType</code> object, I can do that.</p>
<p>The trickier part, unknown to us up until now is the <code>mutation</code>.</p>
</aside></script></section><section data-markdown><script type="text/template">
### What is this mutation
> Most types in your schema will just be normal object types, but there are two types that are special within a schema:
```
schema {
query: Query
mutation: Mutation
}
```
</script></section><section data-markdown><script type="text/template">
### What is this mutation
> Every GraphQL service **has a query** type and **may or may not have a mutation** type. These types are the same as a regular object type, but they are special because they define the **entry point** of every GraphQL query. [[src](http://graphql.org/learn/schema/#the-query-and-mutation-types)]
<aside class="notes"><p>Okay, so it’s an object type we need to define, with it’s fields and resolvers. It just happens to be an entry point of the schema along with <code>query</code>.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Implement a mutation
```javascript
const MutationType = new GraphQLObjectType({
name: 'Mutation',
fields: () => ({
changeUserMessage: {
type: UserType,
args: {
id: { type: new GraphQLNonNull(GraphQLString) },
message: { type: new GraphQLNonNull(GraphQLString) },
},
resolve: (parentValue, args) => saveUserMessage(args.id, args.message),
}
})
})
export default new GraphQLSchema({
query: QueryType,
* mutation: MutationType,
});
```
<aside class="notes"><p>Here we go, our extended <code>schema.js</code>: [<a href="https://github.com/matusmarcin/graphql-express-example/tree/6-mutations">repo</a>]</p>
<p>Except for having to add the <code>saveUserMessage</code> function — which in my case saves to file, or in general POSTs something to an API, or DB — this is all.</p>
</aside></script></section><section data-markdown><script type="text/template">
### Mutation works! 🎉
Query:
```javascript
mutation {
changeUserMessage(id: "3", message: "Donald can't do GraphQL!") {
id
name
message
}
}
```
Response:
```javascript
{
"data": {
"changeUserMessage": {
"id": "3",
"name": "Donald Trump",
"message": "Donald can't do GraphQL!"
}
}
```
<aside class="notes"><p>We can execute the query above and rejoice from updated messages.</p>
</aside></script></section><section data-markdown><script type="text/template">
## That’s all.
👏
</script></section><section data-markdown><script type="text/template">
## Q&A?
🍻
</script></section><section data-markdown><script type="text/template">
## Stay in touch
`/matus\.marcin@gmail\.com/`
[@faster](https://twitter.com/faster) or [github.com/matusmarcin](https://github.com/matusmarcin)
[matusmarcin.com](https://www.matusmarcin.com)
Thank you.
🙏
</script></section><section data-markdown><script type="text/template">
### Misc resources
I was too lazy to clean up what I’ve found so… Enjoy!
* Nice overview: [GraphQL Overview - Getting Started with GraphQL & Node.js](https://blog.risingstack.com/graphql-overview-getting-started-with-graphql-and-nodejs/)
* [Getting Started With GraphQL.js | GraphQL.js Tutorial](http://graphql.org/graphql-js/)
* GraphQL JS: [GitHub - graphql/graphql-js: A reference implementation of GraphQL for JavaScript](https://github.com/graphql/graphql-js)
* [GitHub - RisingStack/graphql-server: Example GraphQL server with Mongoose (MongoDB) and Node.js](https://github.com/RisingStack/graphql-server)
</script></section><section data-markdown><script type="text/template">
### Misc resources
* Dataloader: How to fix duplicate requests being made by GraphQL: [Wrapping a REST API in GraphQL | GraphQL](http://graphql.org/blog/rest-api-graphql-wrapper/)
* Relay vs Apollo: [Choosing a GraphQL Client: Apollo vs. Relay – Codazen – Medium](https://medium.com/@codazeninc/choosing-a-graphql-client-apollo-vs-relay-9398dde5363a)
* How to QueryRenderer better: [Getting Started with Relay “Modern” for Building Isomorphic Web Apps](https://hackernoon.com/getting-started-with-relay-modern-for-building-isomorphic-web-apps-ae049e4e23c1)
</script></section><section data-markdown><script type="text/template">
### Special special bonus
[Fabio spoke on GraphQL at React London Meetup in 2016](https://youtu.be/HrECWxWVcEI?t=59m5s), when he was building it for The Economist.
</script></section></div>
</div>
<script src="./lib/js/head.min.js"></script>
<script src="./js/reveal.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
// Optional libraries used to extend on reveal.js
var deps = [
{ src: './lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: './plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: './plugin/zoom-js/zoom.js', async: true },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/math/math.js', async: true }
];
// default options to init reveal.js
var defaultOptions = {
controls: true,
progress: true,
history: true,
center: true,
transition: 'default', // none/fade/slide/convex/concave/zoom
dependencies: deps
};
// options from URL query string
var queryOptions = Reveal.getQueryHash() || {};
var options = {};
options = extend(defaultOptions, options, queryOptions);
</script>
<script>
Reveal.initialize(options);
</script>
</body>
</html>