Book Image

Full Stack Development with Angular and GraphQL

By : Ahmed Bouchefra
Book Image

Full Stack Development with Angular and GraphQL

By: Ahmed Bouchefra

Overview of this book

GraphQL is an alternative to traditional REST technology for querying Web APIs. Together with Angular and TypeScript, it provides a tech stack option for building future-proof web applications that are robust and maintainable at any scale. This book leverages the potential of cutting-edge technologies like GraphQL and Apollo and helps Angular developers add it to their stack. Starting with introducing full-stack development, you will learn to create a monorepo project with Lerna and NPM Workspaces. You will then learn to configure Node.js-based backend using GraphQL, Express, and Apollo Server. The book will demonstrate how to build professional-looking UIs with Angular Material. It will then show you how to create Web APIs for your frontend with GraphQL. All this in a step-by-step manner. The book covers advanced topics such as local state management, reactive variables, and generating TypeScript types using the GraphQL scheme to develop a scalable codebase. By the end of this book, you'll have the skills you need to be able to build your full-stack application.
Table of Contents (16 chapters)
1
Part 1: Setting Up the Development Environment, GraphQL Server, and Database
7
Part 2: Building the Angular Frontend with Realtime Support
13
Part 3: Adding Realtime Support

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Open the lerna.json file and set version to "0.0.1":"

A block of code is set as follows:

{ 
  "packages": [ 
    "packages/*" 
  ], 
  "version": "0.0.1" 
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

import express, { Application } from 'express'; 
import { ApolloServer } from 'apollo-server-express'; 
import schema from './graphql/schema';

Any command-line input or output is written as follows:

curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "You can click on the Query your server button to access Apollo Studio, where you can send requests to your API endpoint."

Tips or Important Notes

Appear like this.