4^th Practical Class:
GraphQL and BackEnd!

Few links

Client ↔️ Server communication

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, and being really common. API application is commonly called or , it's consumers are commonly called or . There are many ways how to build API's, each fitting different purpose. Quite commonly used are and 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 . It simplifies work with HTTP requests, using approach. In node.js ecosystem alternatives would be , , . Alternatives outside of JS ecosystem would be , , . And bunch of cloud based HTTP services like , .

GraphQL

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

Be aware that GraphQL does not have to be suitable in all cases for you. For some use cases REST for example might be a better option.

GraphQL vs REST

(according to AWS)

Topic	REST	GraphQL
What is it?	set of rules that defines structured data exchange between a client and a server	query language, architecture style, and set of tools to create and manipulate APIs
Best suited for	good for simple data sources where resources are well defined	good for large, complex, and interrelated data sources
Data access	multiple endpoints in the form of URLs to define resources	single URL endpoint
Data returned	fixed structure defined by the server	flexible structure defined by the client
How data is structured and defined	weakly typed, so the client must decide how to interpret the formatted data when it is returned	strongly typed, so the client receives data in predetermined and mutually understood formats
Error checking	client must check if the returned data is valid	invalid requests are typically rejected by schema structure, this results in an autogenerated error message
HTTP response	uses HTTP response status codes	always response with , and respond with only if there is some code error and server crashes

Apollo server

One of many JS implementation of GraphQL.

In this class we'll be using standalone apollo server from ApolloServer which is using the Express server under the hood. The express server is used for the HTTP communication, graphql server itself does not handle HTTP communication.
If you want to use some middlewares or CORS settings on the HTTP communication level before the graphql server, you can use Apollo Server with your Express server. Migration from standalone server is simple.

Basics of GraphQL

GraphQL properties

Strongly typed - you must specify which describes the shape of your data
Based on Graph theory - you are describing your data using as nodes. You can describe relation's between different . can then fetch data from more types with single request.
When and their relations are described in , you must write
are functions responsible for returning data for fields in the and its properties.
Each schema must contain with at least one item - everything described in type serves as entry point to GraphQL API

GraphQL Server example:

You can try out following examples in this codesandbox.

Here is an example of a simple standalone Apollos server.

Apollo server must contain property for schema definition and object with all corresponding resolvers.
starts a server which uses Express under the hood, but does not require any additional configuration

-> Click on Open Sandbox (bottom right corner of the example).

Example of the Query for the example server:

Result in simple string response:

Schema definition language (SDL)

Typed human-readable language for defining the schema, which defined types and their relations.

Example of defining MathResults type, that represent operations on two given integers.

Resolvers for given schema:

And finally query that gets only addition. Notice that you can always only ask for what you need.

The arguments in the query are filled when calling the query. In the resolver, the argument has to be extracted and used for computations.

-> Click on Open Sandbox (bottom right corner of the example).

Resolvers

Each resolver has to be a function that returns the schema defined type for single field.

Resolver example with all arguments:

Each resolver has 4 optional arguments, now we focus on the argument that is an object containing all the arguments defined in the schema.

See Apollo documentation for more info about the schema definition and resolvers.

Nullability of fields

Each field can by default be null
To prevent field to be null, the exclamation mark is used in the schema

Following example prevents null for each computation result.

Nullability for arrays/lists can prevent the whole list to be null and always be at least empty list, or prevent its items to be null.

Data flow Client -> server and back

Data flow inside GraphQL server

gets (as a string)
Parses and validates the
Invokes associated with / /
gets the data (DB, file, another server)
returns data to
stringifies the data and returns them as a to caller (usually )

How to work with GraphQL server schema

Go to
- You can use local running server to open the Sandbox (on )
- Or you can go to Apollo Studio Sandbox and change the URL to your server you want to explore and test.
- Be aware that in order to see schema and use Sandbox, an introspection must be enabled. Usually on PROD environment it is disabled due to security reasons.
Explore , write down and test your
When satisfied, take and add it to you FE application.

4th Practical Class: GraphQL and BackEnd!