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

Implementing GraphQL subscriptions

Now that we've set up Apollo Client for GraphQL subscriptions, we'll learn how to use subscriptions to add some realtime features to our application.

In the server, we have added a Subscription type with two fields – onPostCommented and onPostLiked – to our GraphQL schema. Then, we implemented the required resolvers to push realtime updates to the client when a post is commented on or liked.

In this section, we are going to learn how to listen to realtime updates from the server. This process is similar to how we used queries to query for data, but instead of using the query operation, we use the subscription operation with the fields that need to be sent from the server. For the response, we get results every time new data is available on the server.

In our case, we'll implement the functionality for displaying new comments and likes on posts every time they are added by the users of the network without the need...