5th Practical Class:
GraphQL and BackEnd!
Client ↔️ Server communication
Few links
- MDN - HTTP basic description
- GraphQL learn page
- Puppy
- Apollo learn page
- Express & Node.js basic description
- State of JS
Data flow Client -> server and back
Terms explanation
Note that alternatives listed here are far from being complete list. And some of the technolgoies 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 ;) Alternatives would be for example Python
, Java
, C++
.
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. Alternatives would be graphql-express
or Prisma
.
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 differentTypes
.Clients
can then fetch data from more types with single request. - When
Types
and their relations are described inSchema
, you must writeResolvers
, which are responsible for fetching data for eachType
and all of it's properties. - Each schema must contain
type Query {}
with at least one item - everything described inQuery
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
Data flow inside GraphQL server
GraphQL server
get'srequest
(as a string)- Parses and validates the
request
- Invokes
resolver
asociated withQuery
/Mutation
/Subscription
Resolver
get's the data (DB, file, another server)Resolver
returns data toGraphQL server
GraphQL server
stringifies the data and retuns them as aresponse
to caller (usuallyHTTP server
)
How to work with GraphQL server
From Clients perspective
- Go to
GraphQL Playground
URL - Explore
schema
, write down and test yourquery
- 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 leastQuery
Type
Resolvers
for each query inQuery
/Mutation
/Subscription
must be specified in resolver objectSchema
andResolvers
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
inSchema
- Add it's relations when needed
- Add new
queries
to rootQuery
object - Write down
resolver
for new type, add it to resolver object