azat-co / graphql-relay

GraphQL+Relay

Oftentimes, GraphQL is compared to RESTful architecture. When it's the shortest path for those developers who are experienced in API development, for which REST has been standard for years, newbies may get lost when being told about resources, endpoints, HTTP methods and such. The goal of this tutorial is to teach GraphQL from ground zero, as if you knew completely nothing about API development.

What this course does and does not cover

Covers:

• History of GraphQL and its predecessor, RESTful architecture.
• GraphQL query syntax.
• Writing GraphQL schema and using it with Relay.

Does not cover:

• GraphQL mutations: we only learn queries (fetching data) and don't look at mutations (updating data at the original source).
• Relay.Route. It implements feature that can be easily implemented with RelayContainer, therefore no need to learn it directly.

TOC

Module 1: Why GraphQL

1. Why does your web app need an API?
2. How APIs have been developed before GraphQL?
3. What are the aspects GraphQL beats REST? (even if, at first, it feels nonsensical)
4. Who stands behind GraphQL and what big companies are early adopters?
5. What is Relay, and what are Relay containers, query composition and
6. Getting hands dirty: a Netflix clone!

Module 2: GraphQL Schema

1. GraphQL schema and its relation to data storage and other services.
2. On the back-end: how to provide a GraphQL API that would respond to GraphQL requests.
3. Implementation of the GraphQL API back-end.
4. On the front-end: how to perform a query against remote GraphQL server, what do we need to know and what to expect.
5. Using HTTP as transport, /graphql as the only endpoint and fetch API to query a GraphQL endpoint. Old-school way to query an API.
6. Querying a GraphQL API as if it was a REST endpoint in React.

Module 3: How to Relay

1. What is Relay and why, just sometimes, it's overkill.
2. Relay is full-stack. Writing and generating GraphQL schema for both back-end and front-end.
3. Relay building blocks: RelayContainer, fragments and queries.
4. Relay container composition. Declaring fragments separately to save lines of code and help Relay make optimizations.
5. Implementation of Relay layer in React app.

Module 4: Wrap up

1. Review of the resulting codebase to sum things up.

---

See also:

• Example of GraphQL schema: Github API
• It's possible that there will be no Relay.Route in future