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 image uploads

After implementing authentication in our GraphQL API and protecting the queries and mutations, let's now implement image uploading that will be used to upload the user's profile photo and cover image.

We'll see how to implement file uploading with Apollo Server and stream the images to storage services, such as Amazon S3 or DigitalOcean Spaces Object Storage. We'll be using this last service, but feel free to use Amazon S3 if you prefer that or any S3-compatible object storage service.

Before that, make sure to sign up for your chosen S3 compatible service, create an S3 bucket, and take note of the following information:

  • S3_ACCESS_KEY_ID
  • S3_SECRET_ACCESS_KEY
  • S3_ENDPOINT
  • S3_BUCKET

Using the server URL, bucket name (or Space name), access key, and secret, you can connect any S3-compatible client or library to your DigitalOcean Space. A Space is equivalent to a bucket.

The DigitalOcean Spaces API is interoperable...