4^th Practical Class:
GraphQL and BackEnd!

Few links

Terms explanation

Note that alternatives listed here are far from being complete list. And some of the technologies have different purposes - aka can be used to do same stuff, but are mainly build to do some other stuff.

API

Aplication Programming Interface - application designed to provide data to it's consumers. The data are usually provided wia some data-transfer protocol, HTTP and WebSocket being really common. API application is commonly called server or back-end, it's consumers are commonly called clients or front-end. There are many ways how to build API's, each fitting different purpose. Quite commonly used are REST and GraphQL API patterns.

Node.js

Node.js is out of browser implementation of EcmaScript specification, using Chrome V8 runtime. It can be used for scripting, server implementation, desktop app creation. Visual Studio Code and Atom are both running using Node.js ;)

Express

Express is simple HTTP server running on node.js. It simplifies work with HTTP requests, using middleware approach. In node.js ecosystem alternatives would be Koa, Feathers, Sails. Alternatives ouside of JS ecosystem would be Nginx, Apache, IIS. And bunch of cloud based HTTP services :) Like AWS Elastic Load Balancer, Azure Load Balancer.

GraphQL

GraphQL is query language specification, used to build API on top of your data. Focus of today's lesson :)

Apollo server

One of many JS implementation of GraphQL.

Client ↔️ Server communication

Data flow Client -> server and back

Data flow inside GraphQL server

GraphQL server get's request (as a string)
Parses and validates the request
Invokes resolver asociated with Query / Mutation / Subscription
Resolver get's the data (DB, file, another server)
Resolver returns data to GraphQL server
GraphQL server stringifies the data and retuns them as a response to caller (usually HTTP server)

Basics of GraphQL theory

GraphQL properties

Strongly typed - you must specify Schema which describes the shape of your data
Based on Graph theory - you are describing your data using Types. You can describe relation's between different Types. Clients can then fetch data from more types with single request.
When Types and their relations are described in Schema, you must write Resolvers, which are responsible for fetching data for each Type and all of it's properties.
Each schema must contain type Query {} with at least one item - everything described in Query type serves as entry point to GraphQL API

Examples:

Entry point to API, Query type specification

Resolver for Query

Specification of type User

Resolver for type User

Note that all resolvers are passed to Apollo server as a single object, see /backend/src/__mocks__/mockResolver.js for full example.

Query example

How to work with GraphQL server

From Clients perspective

Go to GraphQL Playground URL
Explore schema, write down and test your query
When satisfied, take query and add it to you FE application. See 3th practical

From Servers perspective

Initial set-up (provided by us)

Set-up of HTTP server and it's routing (DNS)
Set-up of GraphQL server
Set-up of data-connections (database)
Set-up of test / prod environments

Creating root of GraphQL server

Schema must be specified with at least Query Type
Resolvers for each query in Query / Mutation / Subscription must be specified in resolver object
Schema and Resolvers must be passed to set-up configuration of GraphQL server
Optionally context data can be added - these usually contain connections to data sources

Adding new stuff to schema

Describe your Type in Schema
Add it's relations when needed
Add new queries to root Query object
Write down resolver for new type, add it to resolver object

4th Practical Class: GraphQL and BackEnd!