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

Fetching paginated posts

In the post service, we'll define and implement a getPostsByUserId() method that will be called by the profile component to retrieve paginated posts belonging to a certain user. As an assignment, we'll also implement a getFeed() method to retrieve the network's most recent posts, regardless of who posted them. Proceed as follows:

  1. Open the core/services/post/post.service.ts file and add the following imports to it:
    import { Apollo } from 'apollo-angular';
    import {
      GetPostsByUserIdDocument,
      GetPostsByUserIdQuery,
      GetPostsByUserIdQueryVariables
    } from '@ngsocial/graphql/documents';

These imports were generated by the GraphQL code generator.

  1. Inject the Apollo service, as follows:
    constructor(
      /* ... */
      private apollo: Apollo) { }
  2. Define a getPostsByUserId() method, as follows:
    getPostsByUserId(
      userId: string,
      offset?: number...