learnrelay / learnrelay

Learn Relay - A comprehensive introduction to Relay (created by Graphcool)

Learn Relay

Source code for learnrelay.org

Contribution

If you have a suggestion on how to improve Learn Relay please either open an issue or create a pull request by changing the source files in content.

.
├── connections
│   ├── cursors-pagination.md
│   └── what-is-a-connection.md
├── go-further
│   └── wrapup.md
├── images
│   ├── demo.png
│   ├── edges.png
│   ├── favicon.png
│   └── playground.png
├── introduction
│   ├── get-started-bottom.md
│   ├── get-started.md
│   └── what-is-relay.md
├── mutations
│   ├── mutation-types.md
│   ├── optimistic-updates.md
│   ├── relay-store.md
│   └── what-is-a-mutation.md
├── overview
│   ├── cover.md
│   ├── intro.md
│   └── prerequisites.md
├── queries
│   ├── containers-fragments.md
│   ├── variables.md
│   ├── what-is-a-query.md
│   └── working-with-fragments.md
└── routes
    ├── react-router-relay.md
    └── route-in-relay.md

Development

npm install
npm start # open localhost:4300

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!

learnrelay's Issues

Style ExerciseHeader component

Please style the ExerciseHeader component accordingly and remove the following line:

    return null // TODO @julianbauer remove this and uncomment h2

Usage is as follows in a markdown file:

<!-- __INJECT_EXERCISE_TITLE(Exercise 02: Prepare the ListPage for further action)__ -->

An example can be found in queries/containers-fragments.md.

StackOverflow Style Questions

It would be great if there were a SO type part to this site where people could ask questions. It could be a link to related answers on SO if you want to send people to SO for the question. I guess I feel SO is kinda harsh on newbies. After a while, questions will be self answered through the forum or stack overflow questions tagged with "learnrelay". I often just read posts to get a bigger picture.

use node-field for Pokemon card

You are asking for WAY TOO MANY permissions

I don't understand why you need to write to all my public repos and access organizations???

Please remove excessive permissions.

Decide on example project

What do you guys think would be a good example project?

Requirements:

• Easy to understand
• Backward compatible extensibility (All different steps need to work with the same data source in order to allow jumping between steps)
• Uncomplex UI to minimize styling code
• Needs to cover the following functionality:
  • Routing: List/Details
  • Create data item
  • Update data item
  • Delete data item

Ideas:

• TodoMVC
• Twitter/Medium Clone
• KMS (Kitten Management System)

Comparison of different Flux implementations and other clients

It would be nice to add a tabular overview of different Flux implementations to https://learnrelay.org/introduction/what-is-relay#how-is-it-different-than-other-flux-implementations.

Also, we could compare Relay to Apollo or other GraphQL clients (lokka?). See http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/

Add a 'Like Pokemon' feature

This is a common example in the relay docs, but I've not seen it implemented with a actual graphQL service. Something like https://facebook.github.io/relay/docs/guides-mutations.html#a-complete-example, with the viewerDoesLike field on the Pokemon Type. This is a very common requirement and would be great to see an end to end example using Graph.cool

Launch - Missing pieces

We're pretty close to being ready to launch Learn Relay. It's already online here: https://learnrelay.org/

Here are the last missing pieces:

Content

• Write content for landing page ( @marktani or @lvarayut )
• Write "Cursors & Pagination" chapter ( @marktani )
• Expand and illustrate "Data masking" chapter ( @marktani )
• Rework "Get started" subchapter with more complete toolings explanation ( @lvarayut )
• Record video for "Get started" ( @JulianTapales )
• Re-record introduction video ( @JulianTapales )
• Write README for pokedex ( @schickling )

UI/UX

• Fix progress bar height bug ( @julianbauer / @schickling )
• Hide content below "Get GraphQL Endpoint" button when not clicked yet ( @schickling )
• Adjust text layout ( @julianbauer )
• Make responsive ( @julianbauer / @JulianTapales )
• Design Twitter card/Facebook card design for social sharing ( @julianbauer )
• Come up with concept + design for last page (goal: sharing) ( @julianbauer )

Feedback iteration

• Test GraphQL endpoint generation ( @OlegIlyenko @lowsky @sorenbs )
• Proof read + feedback + suggestions ( @OlegIlyenko @lowsky @sorenbs )

License for learn relay source?

What is the license for the learn relay source code?

Enhance 'Go further' chapter

Right now we hopefully do a good job in introducing all the different concepts of Relay on their own.
We can improve a lot though in explaining how everything fits together. We discussed a bit on that and a good approach seems to enhance the 'Go further' section to include a section on that topic. Additionally, we could provide a few other examples for applications the reader could now tackle pretty much on his own and test out his new found knowledge.

Help on this topic would be highly appreciated, so don't hesitate to discuss with us in our Slack channel or create a PR 🚀

Disconnect in instructions

There is no continuous path in the instructions. There is a disconnect between end of step-2 and start of step-3 for example, a user can't just follow the instructions, they have to checkout branches for every step. It was a bit confusing.

Maybe a hint to checkout branch X at the beginning of every step?

Logging In/Cacheing.

I just came back to this after a few days. I thought, "where was I?". Then I opened the repo I was working in. Maybe People can log in and save there progress. Reopen at the point they were at. Just a UX tweak.

(Im just throwing everything at you as it comes as requested. For you to decide, obviously.)

mobile: Previous button not shown in portrait mode

Previous button not shown in portrait mode

ERROR in ./src/index.js Module build failed: SyntaxError: Unexpected token =

npm install went through OK, but I get this error when running it.

Node: v6.10.3
npm: 3.10.10

C:\dev\projects\_testarea\pokedex\branch-step-01>npm start

> @ start C:\dev\projects\_testarea\pokedex\branch-step-01
> webpack-dev-server -d --hot --inline --history-api-fallback --no-info --port
000

http://localhost:3000/
webpack result is served from /
content is served from C:\dev\projects\_testarea\pokedex\branch-step-01
404s will fallback to /index.html
Hash: 5bcdc2717ad160cb9657
Version: webpack 1.13.1
Time: 3052ms
                           Asset       Size  Chunks             Chunk Names
    main.5bcdc2717ad160cb9657.js     284 kB       0  [emitted]  main
main.5bcdc2717ad160cb9657.js.map     310 kB       0  [emitted]  main
                      index.html  723 bytes          [emitted]
chunk    {0} main.5bcdc2717ad160cb9657.js, main.5bcdc2717ad160cb9657.js.map (ma
n) 222 kB [rendered]
    [0] multi main 52 bytes {0} [built] [1 error]
    [1] (webpack)-dev-server/client?http://localhost:3000 2.67 kB {0} [built]
    [2] (webpack)/~/node-libs-browser/~/url/url.js 22.3 kB {0} [built]
    [3] (webpack)/~/node-libs-browser/~/url/~/punycode/punycode.js 14.6 kB {0}
built]
    [4] (webpack)/buildin/module.js 251 bytes {0} [built]
    [5] (webpack)/~/node-libs-browser/~/url/~/querystring/index.js 127 bytes {0
 [built]
    [6] (webpack)/~/node-libs-browser/~/url/~/querystring/decode.js 2.4 kB {0}
built]
    [7] (webpack)/~/node-libs-browser/~/url/~/querystring/encode.js 2.09 kB {0}
[built]
    [8] (webpack)-dev-server/~/sockjs-client/lib/entry.js 244 bytes {0} [built]
    [9] (webpack)-dev-server/~/sockjs-client/lib/transport-list.js 613 bytes {0
 [built]
   [10] (webpack)-dev-server/~/sockjs-client/lib/transport/websocket.js 2.72 kB
{0} [built]
   [11] (webpack)/~/node-libs-browser/~/process/browser.js 5.42 kB {0} [built]
   [12] (webpack)-dev-server/~/sockjs-client/lib/utils/event.js 2 kB {0} [built

   [13] (webpack)-dev-server/~/sockjs-client/lib/utils/random.js 746 bytes {0}
built]
   [14] (webpack)-dev-server/~/sockjs-client/lib/utils/browser-crypto.js 438 by
es {0} [built]
   [15] (webpack)-dev-server/~/sockjs-client/lib/utils/url.js 975 bytes {0} [bu
lt]
   [16] (webpack)-dev-server/~/sockjs-client/~/url-parse/index.js 11.4 kB {0} [
uilt]
   [17] (webpack)-dev-server/~/sockjs-client/~/url-parse/~/requires-port/index.
s 753 bytes {0} [built]
   [18] (webpack)-dev-server/~/sockjs-client/~/url-parse/~/querystringify/index
js 1.51 kB {0} [built]
   [19] (webpack)-dev-server/~/sockjs-client/~/debug/src/browser.js 4.73 kB {0}
[built]
   [20] (webpack)-dev-server/~/sockjs-client/~/debug/src/debug.js 4.39 kB {0} [
uilt]
   [21] (webpack)-dev-server/~/sockjs-client/~/debug/~/ms/index.js 2.76 kB {0}
built]
   [22] (webpack)-dev-server/~/sockjs-client/~/inherits/inherits_browser.js 672
bytes {0} [built]
   [23] (webpack)-dev-server/~/sockjs-client/lib/event/emitter.js 1.27 kB {0} [
uilt]
   [24] (webpack)-dev-server/~/sockjs-client/lib/event/eventtarget.js 1.85 kB {
} [built]
   [25] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/websocket.js
210 bytes {0} [built]
   [26] (webpack)-dev-server/~/sockjs-client/lib/transport/xhr-streaming.js 1.2
 kB {0} [built]
   [27] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/ajax-based.js 1.
1 kB {0} [built]
   [28] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/sender-receiver.
s 1.18 kB {0} [built]
   [29] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/buffered-sender.
s 2.3 kB {0} [built]
   [30] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/polling.js 1.32
B {0} [built]
   [31] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/xhr.js 1.58
kB {0} [built]
   [32] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-cors.js 3
3 bytes {0} [built]
   [33] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/abstract-xhr
js 4.8 kB {0} [built]
   [34] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-local.js
52 bytes {0} [built]
   [35] (webpack)-dev-server/~/sockjs-client/lib/utils/browser.js 560 bytes {0}
[built]
   [36] (webpack)-dev-server/~/sockjs-client/lib/transport/xdr-streaming.js 984
bytes {0} [built]
   [37] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xdr.js 2.46 k
 {0} [built]
   [38] (webpack)-dev-server/~/sockjs-client/lib/transport/eventsource.js 766 b
tes {0} [built]
   [39] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/eventsource
js 1.58 kB {0} [built]
   [40] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/eventsource.
s 37 bytes {0} [built]
   [41] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/iframe-wrap.js 9
1 bytes {0} [built]
   [42] (webpack)-dev-server/~/sockjs-client/lib/transport/iframe.js 3.83 kB {0
 [built]
   [43] (webpack)-dev-server/~/sockjs-client/~/json3/lib/json3.js 43.3 kB {0} [
uilt]
   [44] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
   [45] (webpack)-dev-server/~/sockjs-client/lib/version.js 26 bytes {0} [built

   [46] (webpack)-dev-server/~/sockjs-client/lib/utils/iframe.js 5.03 kB {0} [b
ilt]
   [47] (webpack)-dev-server/~/sockjs-client/lib/utils/object.js 532 bytes {0}
built]
   [48] (webpack)-dev-server/~/sockjs-client/lib/transport/htmlfile.js 710 byte
 {0} [built]
   [49] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/htmlfile.js
2.2 kB {0} [built]
   [50] (webpack)-dev-server/~/sockjs-client/lib/transport/xhr-polling.js 894 b
tes {0} [built]
   [51] (webpack)-dev-server/~/sockjs-client/lib/transport/xdr-polling.js 712 b
tes {0} [built]
   [52] (webpack)-dev-server/~/sockjs-client/lib/transport/jsonp-polling.js 1.0
 kB {0} [built]
   [53] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/jsonp.js 5.
7 kB {0} [built]
   [54] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/jsonp.js 2.46
kB {0} [built]
   [55] (webpack)-dev-server/~/sockjs-client/lib/main.js 11.9 kB {0} [built]
   [56] (webpack)-dev-server/~/sockjs-client/lib/shims.js 17.2 kB {0} [built]
   [57] (webpack)-dev-server/~/sockjs-client/lib/utils/escape.js 2.36 kB {0} [b
ilt]
   [58] (webpack)-dev-server/~/sockjs-client/lib/utils/transport.js 1.35 kB {0}
[built]
   [59] (webpack)-dev-server/~/sockjs-client/lib/utils/log.js 450 bytes {0} [bu
lt]
   [60] (webpack)-dev-server/~/sockjs-client/lib/event/event.js 477 bytes {0} [
uilt]
   [61] (webpack)-dev-server/~/sockjs-client/lib/location.js 177 bytes {0} [bui
t]
   [62] (webpack)-dev-server/~/sockjs-client/lib/event/close.js 295 bytes {0} [
uilt]
   [63] (webpack)-dev-server/~/sockjs-client/lib/event/trans-message.js 292 byt
s {0} [built]
   [64] (webpack)-dev-server/~/sockjs-client/lib/info-receiver.js 2.22 kB {0} [
uilt]
   [65] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-fake.js 4
6 bytes {0} [built]
   [66] (webpack)-dev-server/~/sockjs-client/lib/info-iframe.js 1.52 kB {0} [bu
lt]
   [67] (webpack)-dev-server/~/sockjs-client/lib/info-iframe-receiver.js 791 by
es {0} [built]
   [68] (webpack)-dev-server/~/sockjs-client/lib/info-ajax.js 1.03 kB {0} [buil
]
   [69] (webpack)-dev-server/~/sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0}
[built]
   [70] (webpack)-dev-server/~/sockjs-client/lib/facade.js 723 bytes {0} [built

   [71] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes {0} [built]
   [72] (webpack)-dev-server/~/strip-ansi/~/ansi-regex/index.js 135 bytes {0} [
uilt]
   [73] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
   [74] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\dev\projects\_testarea\pokedex\branch-step-01\nod
_modules\babel-plugin-react-relay\lib\index.js:42:28)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at C:\dev\projects\_testarea\pokedex\branch-step-01\node_modules\babel-core
lib\transformation\file\options\option-manager.js:178:20
    at Array.map (native)
 @ multi main
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 541 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./index.html 1.08 kB {0} [bui
t]
        [1] ./~/html-webpack-plugin/~/lodash/lodash.js 540 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]

Edit this Page 2x at bottom of "getting started"

https://learnrelay.org/introduction/get-started

React Router Relay - unclear how ViewerQueries ties in

For all the <Route>s you do queries={ViewerQueries} where in all the previous sections we have been building on top of this query object. So what happened to all that work we did?

I know the answer is fundamentally in the code, but as I read the section I just couldn't like the ideas.

Module build failed: FetchError: request failed, reason: socket hang up

Windows 7, Node v6.10.3. I'm using endpoint that is given in the tutorial, which works inside the browser GraphiQL on tutorial page . Also when I try connecting to my endpoint that I developed on a whole different app, it works. So it's neither the backend nor the frontend?! Weird.

C:\dev\projects_testarea\pokedex\branch-step-01>
C:\dev\projects_testarea\pokedex\branch-step-01>npm start

@ start C:\dev\projects_testarea\pokedex\branch-step-01
webpack-dev-server -d --hot --inline --history-api-fallback --no-info --port 3
000

http://localhost:3000/
webpack result is served from /
content is served from C:\dev\projects_testarea\pokedex\branch-step-01
404s will fallback to /index.html
Hash: b4e690f005060bdbb4de
Version: webpack 1.13.1
Time: 1956ms
Asset Size Chunks Chunk Names
main.b4e690f005060bdbb4de.js 279 kB 0 [emitted] main
main.b4e690f005060bdbb4de.js.map 307 kB 0 [emitted] main
index.html 723 bytes [emitted]
chunk {0} main.b4e690f005060bdbb4de.js, main.b4e690f005060bdbb4de.js.map (mai
n) 222 kB [rendered]
[0] multi main 52 bytes {0} [built] [1 error]
[1] (webpack)-dev-server/client?http://localhost:3000 2.67 kB {0} [built]
[2] .//url/url.js 22.3 kB {0} [built]
[3] .//url//punycode/punycode.js 14.6 kB {0} [built]
[4] (webpack)/buildin/module.js 251 bytes {0} [built]
[5] .//querystring/index.js 127 bytes {0} [built]
[6] .//querystring/decode.js 2.4 kB {0} [built]
[7] .//querystring/encode.js 2.09 kB {0} [built]
[8] .//sockjs-client/lib/entry.js 244 bytes {0} [built]
[9] .//sockjs-client/lib/transport-list.js 613 bytes {0} [built]
[10] .//sockjs-client/lib/transport/websocket.js 2.72 kB {0} [built]
[11] .//process/browser.js 5.42 kB {0} [built]
[12] .//sockjs-client/lib/utils/event.js 2 kB {0} [built]
[13] .//sockjs-client/lib/utils/random.js 746 bytes {0} [built]
[14] .//sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
[15] .//sockjs-client/lib/utils/url.js 975 bytes {0} [built]
[16] .//url-parse/index.js 11.4 kB {0} [built]
[17] .//requires-port/index.js 753 bytes {0} [built]
[18] .//url-parse//querystringify/index.js 1.51 kB {0} [built]
[19] .//debug/src/browser.js 4.73 kB {0} [built]
[20] .//debug/src/debug.js 4.39 kB {0} [built]
[21] .//ms/index.js 2.76 kB {0} [built]
[22] .//inherits/inherits_browser.js 672 bytes {0} [built]
[23] .//sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
[24] .//sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
[25] .//sockjs-client/lib/transport/browser/websocket.js 210 bytes {0} [buil
t]
[26] .//sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
[27] .//sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
[28] .//sockjs-client/lib/transport/lib/sender-receiver.js 1.18 kB {0} [buil
t]
[29] .//sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built
]
[30] .//sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
[31] .//sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
[32] .//sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]

[33] .//sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [buil
t]
[34] .//sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built
]
[35] .//sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
[36] .//sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
[37] .//sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
[38] .//sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
[39] .//sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [bui
lt]
[40] .//sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [bui
lt]
[41] ./~/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]

[42] .//sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
[43] .//json3/lib/json3.js 43.3 kB {0} [built]
[44] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[45] .//sockjs-client/lib/version.js 26 bytes {0} [built]
[46] .//sockjs-client/lib/utils/iframe.js 5.03 kB {0} [built]
[47] .//sockjs-client/lib/utils/object.js 532 bytes {0} [built]
[48] .//sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
[49] .//sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
[50] .//sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
[51] .//sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
[52] .//sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
[53] .//sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
[54] .//sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
[55] .//sockjs-client/lib/main.js 11.9 kB {0} [built]
[56] .//sockjs-client/lib/shims.js 17.2 kB {0} [built]
[57] .//sockjs-client/lib/utils/escape.js 2.36 kB {0} [built]
[58] .//sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
[59] .//sockjs-client/lib/utils/log.js 450 bytes {0} [built]
[60] .//sockjs-client/lib/event/event.js 477 bytes {0} [built]
[61] .//sockjs-client/lib/location.js 177 bytes {0} [built]
[62] .//sockjs-client/lib/event/close.js 295 bytes {0} [built]
[63] .//sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
[64] .//sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
[65] ./~/sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]

[66] .//sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
[67] .//sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
[68] .//sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
[69] .//sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
[70] .//sockjs-client/lib/facade.js 723 bytes {0} [built]
[71] .//strip-ansi/index.js 161 bytes {0} [built]
[72] ./~/ansi-regex/index.js 135 bytes {0} [built]
[73] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
[74] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]

ERROR in ./src/index.js
Module build failed: FetchError: request to https://api.graph.cool/relay/v1/cj5d
zxtpowxqg0122konmn5ve failed, reason: socket hang up
at ClientRequest. (C:\dev\projects_testarea\pokedex\branch-step-
01\node_modules\node-fetch\index.js:133:11)
at emitOne (events.js:96:13)
at ClientRequest.emit (events.js:188:7)
at TLSSocket.socketCloseListener (_http_client.js:285:9)
at emitOne (events.js:101:20)
at TLSSocket.emit (events.js:188:7)
at _handle.close (net.js:497:12)
at TCP.done [as _onclose] (_tls_wrap.js:332:7)
at module.exports.loopWhile (C:\dev\projects_testarea\pokedex\branch-step-0
1\node_modules\deasync\index.js:72:22)
at exports.default (C:\dev\projects_testarea\pokedex\branch-step-01\node_mo
dules\babel-plugin-react-relay\lib\index.js:21:26)
at Function.memoisePluginContainer (C:\dev\projects_testarea\pokedex\branch
-step-01\node_modules\babel-core\lib\transformation\file\options\option-manager.
js:113:13)
at Function.normalisePlugin (C:\dev\projects_testarea\pokedex\branch-step-0
1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:
32)
at C:\dev\projects_testarea\pokedex\branch-step-01\node_modules\babel-core
lib\transformation\file\options\option-manager.js:184:30
at Array.map (native)
at Function.normalisePlugins (C:\dev\projects_testarea\pokedex\branch-step-
01\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158
:20)
at OptionManager.mergeOptions (C:\dev\projects_testarea\pokedex\branch-step
-01\node_modules\babel-core\lib\transformation\file\options\option-manager.js:23
4:36)
@ multi main
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [rendered]
[0] .//html-webpack-plugin/lib/loader.js!./index.html 1.04 kB {0} [buil
t]
[1] .//lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
Hash: b4e690f005060bdbb4de
Version: webpack 1.13.1
Time: 601ms
chunk {0} main.b4e690f005060bdbb4de.js, main.b4e690f005060bdbb4de.js.map (mai
n) 222 kB
+ 75 hidden modules

ERROR in ./src/index.js
Module build failed: FetchError: request to https://api.graph.cool/relay/v1/cj5d
zxtpowxqg0122konmn5ve failed, reason: socket hang up
at ClientRequest. (C:\dev\projects_testarea\pokedex\branch-step-
01\node_modules\node-fetch\index.js:133:11)
at emitOne (events.js:96:13)
at ClientRequest.emit (events.js:188:7)
at TLSSocket.socketCloseListener (_http_client.js:285:9)
at emitOne (events.js:101:20)
at TLSSocket.emit (events.js:188:7)
at _handle.close (net.js:497:12)
at TCP.done [as _onclose] (_tls_wrap.js:332:7)
at module.exports.loopWhile (C:\dev\projects_testarea\pokedex\branch-step-0
1\node_modules\deasync\index.js:72:22)
at exports.default (C:\dev\projects_testarea\pokedex\branch-step-01\node_mo
dules\babel-plugin-react-relay\lib\index.js:21:26)
at Function.memoisePluginContainer (C:\dev\projects_testarea\pokedex\branch
-step-01\node_modules\babel-core\lib\transformation\file\options\option-manager.
js:113:13)
at Function.normalisePlugin (C:\dev\projects_testarea\pokedex\branch-step-0
1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:
32)
at C:\dev\projects_testarea\pokedex\branch-step-01\node_modules\babel-core
lib\transformation\file\options\option-manager.js:184:30
at Array.map (native)
at Function.normalisePlugins (C:\dev\projects_testarea\pokedex\branch-step-
01\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158
:20)
at OptionManager.mergeOptions (C:\dev\projects_testarea\pokedex\branch-step
-01\node_modules\babel-core\lib\transformation\file\options\option-manager.js:23
4:36)
@ multi main
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB
+ 3 hidden modules
Terminate batch job (Y/N)? y

Link for #learnrelay Slack Channel for support is dead.

See almost at bottom of this page. https://learnrelay.org/introduction/get-started/

Add a 'PokemonTrainer' relation between User and Pokemon

Associating every pokemon with the reader as their "trainer" adds a personal aspect and would add the possibility for more fun queries 💎 This should also be reflected in the pokedex app.

Add "copy-to-clipboard button" to endpoint in getting-started chapter

Thanks to @0rland0 for the feedback!

Get GraphQL Endpoint doesn't work

Guys, after click on that Get GraphQL Endpoint button and sign in with github nothing happens. I tried it twice and I was waiting at least 10min without any change except it shows that in-progress circle..

User Experience Intro Page

The video on the the intro page, https://learnrelay.org/overview/intro, references the graphql endpoint but there is no orange button at the bottom of the right side panel as is represented in the video. The button does not become available until you go through the "Getting Started" section here: https://learnrelay.org/introduction/get-started. From a mindset point of view, I would be starting to doubt myself here thinking that I have something set up wrong or I wont be able to do this on my machine. I would suggest communicating above the video or in the video with a slide or overlay that the graphql endpoint is not available on this page yet.

Content tweaks

A list of tweaks and corrections for the content, please add more if you encounter any.

General

• @marktani Make it clear that checking out into another branch requires you to paste in the graphQL endpoints
• @julianbauer Differentiate the theory and implementations section
• @julianbauer Maybe distinguish between links and other text
• @JulianTapales More photos of what the end of each step looks like
• @julianbauer Some parts of the code are cut of like in "what-is-a-connection": viewer.allPokemons.edges.map((edge) => edge.node).map((pokemon) => console.log(pokemo
• @julianbauer multiline code elements are intented by one space in the first line
• @marktani link to the hosted demo application on overview/intro
• @marktani put more focus on the LearnGraphQL project and less focus on the author of it. Maybe we should even include a screenshot of it?
• @marktani Maybe include a section for explaining how to use the dashboard to test out queries or construct their own?

Queries

all @marktani

• Add react-relay import into the tutorial
• ViewerQueries is not exposed to ListPage as mentioned in tutorial
• Taking a sneak peak at the solutions needs further instructions, currently people have been told to use git -f which loses their changes so maybe tell them to commit or stash? Additionally they would need to paste their graphcool url again in package.json and index.js before rerunning npm start
• Maybe include and explain the {'Your viewer id is: ${this.props.viewer.id}'} in the tutorial section, so that as a rule, when a step is correctly finished, it looks identical to the solution
• Feedback: "Unclear where to put export default Relay.createContainer"
• Mention that the viewer property will also be most likely removed in Relay 2. I think a good general rule of thumb to put this informal information in > quotes.

Mutations

• Feedback: "Where should I put the optimistic response answer? In the mutation??"

improve REQUIRED_CHILDREN explanation

use login example. the SignInPayload contains a token, but this token is not assigned to any node or whatever in the Relay store

Link in description redirects to learnrelay.com

https://www.learnrelay.org/ works just fine; leave off the "www", and it redirects to a .com that doesn't resolve.

"What is a Query" - Give more context for top-level node field

TL:DR - good idea would be to link the concepts to source material. Think, "If some guy shows up without a clue but thought he would learn just using this, would he easily be able to find the related info(in docs, blog, etc)?"

On https://learnrelay.org/queries/what-is-a-query you talk about "node(id: $id)". I did a few searches to get a better definition. Only place I found it was on the relay docs readme here https://github.com/relay/relay. I guess the bigger issue is how much the people using this will know coming in. From talking to you guys, seems like the point of this is to get some good resources out there for people to get on board with this. We talked about how I had tried to get into it but it was super hard to follow and how this might be a solution. So I guess the idea is that maybe there are small things you can do for the less advanced dev. The reality is, people are not going to know alot about this coming in. Nodes is not something I have really come across except in Relay/GraphQL. So 'node' wasnt foreign to me but i still wanted to look it up. And I cant say I found an answer that satisfied.

Git Checkout Sign Posting for Step-01 , 02 etc

Git checkouts for every stage of a course/tutorial is an amazing idea. Allows for diffiing, if you know how to do that, and generally keeping up. I have done countless tutorials and I have always appreciated branches per section. I have also coded right past them, beginning to end. I recommend that you clearly mark where a git checkout should happen so people can benefit from them.

add react native counter part example like React Router Relay

Right now there is no react-router-relay sort of lib for RN. But a simple guide around this could be useful.

mobile: Funky stuff when you scroll to the bottom of Step1: Warmup

Mobile: NEXT-Buttons should be displayed at anytime at the bottom of each page.

Currently only appear after you scrolled below the end of the page

Setup example project with branch generation

Adding Api URL for GraphQL Server

Is it expected to that we enter the endpoint url after each checkout?

Starting tutorial with graphql backend is not working properly

https://www.learnrelay.org/introduction/get-started/?code=6efc69abf6859a820f9d#graphql-endpoint

Once I authenticate my github account and redirect to the page, I got this error.

Safari: The GraphQL Server sticky pop out

On Safari, the X to hide the GraphQL server pop out is not reachable. (Maybe depending on the screen size)

Can we see the GraphQL schema used for the tutorial?

After completing the https://www.learnrelay.org/ tutorial, I found myself wishing I could see the schema.js file that's used on the server side.

Any chance that's published anywhere we can look at it?

Use dotenv instead of env vars in webpack config

Use dotenv and provide only a .env.example file instead of setting everything on each webpack config file.

Something like https://github.com/lucasbento/react-relay-pokemon/blob/master/webpack.prod.config.js#L29 which is using dotenv-webpack.

this.props.router is undefined

I was trying mutations part step-5 where I see that this.props.router is showing as undefined. Can I can create a PR for this or is someone already working on this?

mobile: video is too big

In portrait mode video is cut and covering the timestamp

screen scroll cutting off content on "getting started" page

I'm on page https://learnrelay.org/introduction/get-started. I'm on a desktop monitor on a Windows 10 OS. I have the screen split with Atom IDE on left and Firefox on right. At this width on the 'get started' page, you lose some of the content which is not fitting on the screen. A solution would be getting the media queries adjusted or making the left panel collapsible on this view width with a media query. Screenshot attached.

Structure

Open questions:

• When should react-router-relay be introduced?
• What should the first minimal Relay example look like?

Goals / Direction

Here is a list of the goals and directions I have in mind for this project:

• Embrace "graph" terminology (edges, nodes, connections...)
• Be opinionated: Don't sugarcoat Relay (Speak about short-comings and what's currently in flux)
• Help the developer to accept (initially cumbersome) concepts of Relay and explain the reason for their existence
• A constant feeling of progress while doing the course and a way to get help when stuck
• Seamless experience with out-of-the-box GraphQL backend
• Developer should work locally
• Developer should learn more than just "Relay basics" but also a Relay workflow

Mention that `REQUIRED_CHILDREN` can be used for login mutations