Daniel Schmitz - Practical GraphQL

In this work we present GraphQL, which can be defined as A query language for your API. GraphQL contains a number of benefits compared to REST communication, present on most Web systems today, being its successor.

On a system that uses RESTful communication, we can list some common problems in the communication between the client and the server:

• The frontend does not need all information that the backend provides, so anything that is not used is discarded. For example, an endpoint that returns all fields of a table, but at that time, the frontend only needs three fields. The solution in RESTful would be to create a new endpoint that returns the three fields. In GraphQL, the frontend will always inform the backend which fields should be returned.
• If the frontend requires several information to compose a screen, it must make several requests to the RESTful backend. For example, a product screen needs to display information about the product category, its supplier and last sales. The solution in RESTful would be to access multiple endpoints or create a new endpoint that returns all this information together. In GraphQL, it is possible to return several information at the same time, only in one request.

Only these two examples are enough for the GraphQL to be superior to RESTful, but there are a number of other cases that will be discussed throughout this work.

The focus of this work is the creation of a web/mobile system using GraphQL. As we progress through the application, we will refer to some theoretical part that may possibly be available on the official GraphQL website.

Chapter 1 presents an introduction to GraphQL, commenting on some important concepts and defining the technologies that will be used in the course of the work.

In chapter 2 you will install everything that is necessary to develop a GraphQL application.

Chapter 3 addresses the project creation and the basic configuration of GraphQL in the backend.

Chapter 4 addresses the project creation and the basic configuration of GraphQL in the frontend.

In chapter 5, the authentication is added to the system, with a registration, login and logout form.

In the chapter 6 we will modularize the backend server code, so that we can extend the application in an organized way.

In the chapter 7 we will deploy the application on the Heroku server.

In chapter 8 we will add the category screen.

In chapter 9 we will add the supplier screen. This chapter presents how to create a one to one relation in the graphql.

In chapter 10 we will add the customer, employee and shipper screens.

In chapter 11 we will add the product screen.

In chapter 12 we will add the order screen.

To Create a web system, it is necessary to define a set of technologies that meet each part of the application:

• The backend will be on Node and the web server will be Express. The database will be sqlite (postgreSQL at production server), and to query the database, we will use a query builder called knex.
• The frontend will be on Vue.js, a simple yet complete framework for web application development. We will use Bulma to draw the interface. Even if you work with Angular or React, the use of Vue will be minimal and will allow a full understanding of the functioning de GraphQL.

The following image shows the diagram of tables and relationships of the system to be developed.

The following diagram displays a summary of the transactions that will be performed in the system. For example, a product has a category, a vendor has products, a sale is sold by the employee and purchased by the customer.

It takes very little to start learning GraphQL. In this work, we will use Node on the backend and Vue.js on the frontend. GraphQL supports several technologies which can be accessed at this link. We will use as text editor Visual Studio Code.

If you do not have Git, go to https://git-scm.com/ and install it. Go to https://nodejs.org/en/ and install Node (LTS version). After installing these two programs, you can access git bash by Windows, which is the terminal that we will use to execute various commands during this work. If you are using Linux, you can use the systems own terminal.

To check these installations, run the following commands:

To install Visual Studio Code, go to https://code.visualstudio.com/. After installing vscode, click the extensions tab and install the following extensions: editorconfig, GraphQL for VSCode, ESLint, Vetur. This is the minimum set of extensions that we will need.

Some Node applications need to be installed globally. Among them we have knex, Vue, eslint and nodemon. To install these packages, run the following command: