DEV Community: Ameni Ben Saada

Debugging Microservices: How Correlation IDs Cut Our Debug Time from Hours to Minutes

Ameni Ben Saada — Wed, 14 Jan 2026 08:03:07 +0000

Hey dev friends! 💻

I'm back with a new article to share what I've recently learned. Today, we're going to talk about logging in microservices and how implementing proper logging transformed our debugging workflow from a nightmare into something actually manageable. 🚀

If you're working with microservices, you know the pain: something breaks in production, and you're jumping between different services trying to figure out what happened. Sound familiar? Let's fix that!

🤔 The Problem

Picture this: You have 5 microservices running. A user reports an error. You start investigating.

You check Service A → Nothing obvious.

You check Service B → Maybe something?

You check Service C → Still not sure.

Instead of clear answers, you're piecing together a puzzle from scattered log files, trying to match timestamps and hoping you'll find the connection. Hours pass. 😰

This is a common reality. Many teams have logs, but they aren't useful. Each service logs independently with no way to track a request's journey through the system.

💡 The Solution: Correlation IDs

The game changer? Correlation IDs.

Think of correlation IDs like a tracking number for your package 📦. Just like you can track a package through every shipping center it passes through, a correlation ID lets you track a request through every microservice it touches.

Every request gets a unique ID that follows it through your entire system. When something fails, you:

Search that one ID
See the complete request journey
Identify the exact failure point

Simple, powerful, effective.

🛠️ How to Build This System

Here's how you can implement a centralized logging system for your microservices:

→ Pino for structured, performant logging

→ Sentry for error tracking and real-time alerts

→ Custom NestJS providers for consistency across services

→ Correlation IDs to trace requests end-to-end

Let me show you how to do it step by step! 👇

📝 Step 1: Setting Up Pino in NestJS

First, install the necessary packages:

npm install pino pino-pretty pino-http
npm install --save-dev @types/pino

Why Pino? It's fast (really fast!), produces structured JSON logs, and has great NestJS support.

🎯 Step 2: Creating a Custom Logger Provider

Here's where the magic happens. We create a custom logger provider that includes correlation IDs in every log:

// logger.service.ts
import { Injectable, Scope } from '@nestjs/common';
import * as pino from 'pino';

@Injectable({ scope: Scope.TRANSIENT })
export class LoggerService {
  private logger: pino.Logger;
  private context: string;
  private correlationId: string;

  constructor() {
    this.logger = pino({
      level: process.env.LOG_LEVEL || 'info',
      transport: {
        target: 'pino-pretty',
        options: {
          colorize: true,
          translateTime: 'SYS:standard',
          ignore: 'pid,hostname',
        },
      },
    });
  }

  setContext(context: string) {
    this.context = context;
  }

  setCorrelationId(correlationId: string) {
    this.correlationId = correlationId;
  }

  private formatMessage(message: string, data?: any) {
    return {
      message,
      context: this.context,
      correlationId: this.correlationId,
      timestamp: new Date().toISOString(),
      ...data,
    };
  }

  log(message: string, data?: any) {
    this.logger.info(this.formatMessage(message, data));
  }

  error(message: string, trace?: string, data?: any) {
    this.logger.error(this.formatMessage(message, { trace, ...data }));
  }

  warn(message: string, data?: any) {
    this.logger.warn(this.formatMessage(message, data));
  }

  debug(message: string, data?: any) {
    this.logger.debug(this.formatMessage(message, data));
  }
}

What's happening here?

We create a transient-scoped service (new instance for each request)
Each log includes: message, context, correlationId, timestamp
We support different log levels: info, error, warn, debug
Everything is structured as JSON for easy searching

🔑 Step 3: Generating Correlation IDs

Now we need to generate and pass correlation IDs. We do this with a middleware:

// correlation-id.middleware.ts
import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';
import { v4 as uuidv4 } from 'uuid';

@Injectable()
export class CorrelationIdMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    // Check if correlation ID already exists (from previous service)
    const correlationId = req.headers['x-correlation-id'] as string || uuidv4();

    // Attach it to the request
    req['correlationId'] = correlationId;

    // Add it to response headers
    res.setHeader('x-correlation-id', correlationId);

    next();
  }
}

Key points:

If a correlation ID exists (from another service), we use it
If not, we generate a new one using UUID
We attach it to both request and response

🔗 Step 4: Using the Logger in Your Services

// app.module.ts
import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { CorrelationIdMiddleware } from './correlation-id.middleware';
import { LoggerService } from './logger.service';

@Module({
  providers: [LoggerService],
  exports: [LoggerService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(CorrelationIdMiddleware).forRoutes('*');
  }
}

Now use it in your controllers:

// user.controller.ts
import { Controller, Get, Req } from '@nestjs/common';
import { Request } from 'express';
import { LoggerService } from './logger.service';

@Controller('users')
export class UserController {
  constructor(private readonly logger: LoggerService) {
    this.logger.setContext('UserController');
  }

  @Get()
  async getUsers(@Req() req: Request) {
    const correlationId = req['correlationId'];
    this.logger.setCorrelationId(correlationId);

    this.logger.log('Fetching users');

    // Your business logic here

    return users;
  }
}

🚨 Step 5: Integrating Sentry for Error Tracking

Install Sentry:

npm install @sentry/node

Configure it in your main file:

// main.ts
import * as Sentry from '@sentry/node';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Add Sentry error handler
  app.use(Sentry.Handlers.requestHandler());
  app.use(Sentry.Handlers.errorHandler());

  await app.listen(3000);
}

Update your logger to send errors to Sentry:

// logger.service.ts
error(message: string, trace?: string, data?: any) {
  const errorData = this.formatMessage(message, { trace, ...data });

  this.logger.error(errorData);

  // Also send to Sentry
  Sentry.captureException(new Error(message), {
    extra: errorData,
  });
}

🌐 Step 6: Passing Correlation IDs Between Services

When making HTTP calls to other microservices, pass the correlation ID:

// some.service.ts
import { HttpService } from '@nestjs/axios';
import { Injectable } from '@nestjs/common';

@Injectable()
export class SomeService {
  constructor(
    private readonly httpService: HttpService,
    private readonly logger: LoggerService,
  ) {}

  async callAnotherService(correlationId: string, data: any) {
    this.logger.log('Calling Service B', { data });

    return this.httpService.post(
      'http://service-b/endpoint',
      data,
      {
        headers: {
          'x-correlation-id': correlationId, // ← Pass it along!
        },
      },
    ).toPromise();
  }
}

📊 What This Looks Like in Practice

Before:

[2025-01-15 10:30:45] Request received
[2025-01-15 10:30:46] Processing data
[2025-01-15 10:30:47] Error: Operation failed

Which request? Which user? No idea. 🤷‍♀️

After:

{
  "level": "info",
  "message": "Request received",
  "context": "ApiController",
  "correlationId": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": "2025-01-15T10:30:45.123Z"
}

{
  "level": "info",
  "message": "Processing data",
  "context": "DataService",
  "correlationId": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": "2025-01-15T10:30:46.456Z"
}

{
  "level": "error",
  "message": "Operation failed: Validation error",
  "context": "DataService",
  "correlationId": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": "2025-01-15T10:30:47.789Z"
}

Now you can search for 550e8400-e29b-41d4-a716-446655440000 and see the entire request journey across all services! 🎯

✨ The Impact

Before implementing this:

Production issue? → Check each service manually
Try to correlate timestamps
Spend hours debugging

After implementation:

Production issue? → Search by correlation ID
See complete request flow instantly
Debug in minutes

Example scenario: A user reports an error. Instead of manually checking logs across multiple services, you can now search by the correlation ID and immediately see the request traveled through Service A → Service B → Service C, and exactly where it failed with the specific error message. Total time: under 10 minutes. ⚡

Without this system? That same investigation could take an hour or more of manually checking logs and trying to correlate timestamps.

🎯 Key Takeaways

What separates good logging from great logging:

Structure → JSON over plain text (searchable and parseable)

Context → Correlation IDs tracking every request

Proper levels → Debug/info/error used correctly, not everything as info

Centralization → One place to search everything

Real-time alerts → Sentry catches errors before users complain

💭 Final Thoughts

Setting up proper logging takes time upfront. A solid implementation might take a couple of days. But it can save you hours,sometimes days,on every production issue after that.

If you're building microservices, don't treat logging as an afterthought. It's literally the difference between debugging in 10 minutes vs 3 hours.

Your future self will thank you. Trust me! 😊

🔗 Resources

What about you? 🤔 Have you implemented correlation IDs in your microservices? What challenges did you face? Share your experiences below!

And if you found this helpful, follow me for more articles about web development, NestJS, and DevOps practices. Let's learn together ❤️

A Beginner’s Guide to Building Dynamic User Interfaces with React

Ameni Ben Saada — Tue, 17 Dec 2024 14:34:43 +0000

Hey dev friends! 💻 Are you ready to start your journey into the world of React? 🚀 In this first post of our React Basics series, we’ll explore the fundamentals of React, the popular JavaScript library that powers some of the world’s most dynamic web applications. Let’s dive in! 🌟

🖥️ What is React?

React is a JavaScript library for building user interfaces, created and maintained by Facebook. It’s designed to make creating interactive and reusable UI components easy and efficient.

Think of React as your ultimate toolkit for building fast, modern, and scalable web applications. 🌐

⚡ Key Features of React

Component-Based Architecture

React lets you break down your UI into small, reusable pieces called components. Each component is like a Lego block 🧩, and you can combine them to build complex UIs.
Virtual DOM

React uses a lightweight copy of the actual DOM (Document Object Model) called the Virtual DOM. It ensures your app runs fast by updating only what’s necessary. Think of it as React being super-efficient in the kitchen—only chopping what needs chopping! 👨‍🍳
Declarative Syntax

Describe what you want the UI to look like, and React takes care of the how. It’s intuitive, readable, and helps you focus on the “what” without worrying about low-level details.

👩‍💻 Getting Started with React

Before diving into code, let’s set up your React environment:

Install Node.js

React requires Node.js to run its development server. You can download it here.
Set Up a React App

Use the Create React App tool for a quick and easy start:
```
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```
🚀 You’ve just started your first React project!

📄 A Simple React Example

Let’s create a basic “Hello, World!” React component.

import React from "react";
import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

What’s happening here?
- We define a functional component (App) that returns some JSX (a syntax extension for HTML in JavaScript).
- ReactDOM renders our App component into the DOM, specifically into the element with the id="root".

💡 Why Use React?

Reusable Components: Write once, reuse anywhere!
Great Ecosystem: Libraries like Redux, React Router, and Material-UI make development smoother.
Strong Community: Tons of tutorials, tools, and support.

🎯 What’s Next?

This is just the beginning of your React journey! In the upcoming posts of this React Basics series, we’ll cover:

React Hooks: Simplifying State and Effects
State and Props: The Building Blocks of React Components
React Router: Navigating Your App

What about you? 🤔 Have you started working with React, or are you excited to dive in? Share your thoughts and questions below! Let’s learn together. ❤️

Static Site Generation (SSG): Unlocking Speed and SEO for Modern Websites

Ameni Ben Saada — Wed, 04 Dec 2024 12:28:12 +0000

Hey dev friends 💻

We’re back with Part 3! 🎉 After exploring the wonders of Client-Side Rendering (CSR) and Server-Side Rendering (SSR), it’s time to dive into Static Site Generation (SSG)—the ultimate solution for performance and simplicity. Ready to see how SSG can transform your web development workflow? Let’s go! 🚀

🖥️ What is Static Site Generation (SSG)?

Static Site Generation pre-renders HTML pages at build time instead of during each user request. When a user visits your site, they’re served pre-generated static files straight from a Content Delivery Network (CDN).

Think of it as preparing a batch of cookies beforehand and serving them instantly when someone asks for them! 🍪

📄 Why Choose SSG?

Blazing Fast Performance ⚡: Since the content is pre-built and served from a CDN, users experience lightning-fast page loads.
Scalability 🚀: Handle high traffic seamlessly without worrying about server load, as there’s no server-side rendering happening on the fly.
SEO-Friendly 🕵️‍♂️: Pre-rendered content is immediately crawlable by search engines, ensuring optimal visibility.

😎 When SSG Really Shines

SSG is an excellent choice for sites with mostly static content or content that doesn’t change frequently. Examples include:

Blogs and Portfolios 📝
Documentation Sites 📚
Marketing Websites 🌟
E-Commerce Stores with Static Product Pages 🛍️

👎 What to Consider with SSG?

Limited Real-Time Interactivity: SSG isn’t ideal for highly dynamic content that requires frequent updates, such as live scores or personalized dashboards.
Longer Build Times: For large sites with numerous pages, the build process can take significant time.
Complexity with Dynamic Content: Integrating dynamic features like user authentication or personalized recommendations requires additional techniques like Incremental Static Regeneration (ISR).

🤔 Should You Use SSG?

If performance, scalability, and SEO are your top priorities and your content doesn’t require frequent updates, SSG could be your best bet! Tools like Next.js, Gatsby, and Hugo make implementing SSG a breeze.

✨ Coming Next:

Now that we’ve covered CSR, SSR, and SSG, our next post will explore how React can power your web development projects, including advanced features, optimization tips, and real-world use cases. Stay tuned for practical advice and hands-on strategies to take your React skills to the next level 🌐

What do you think? 🤔 Have you tried Static Site Generation in your projects? Let us know your experiences in the comments below. Let’s keep this web development journey going 🛠️

Server-Side Rendering (SSR): Boosting SEO and Speed in Modern Web Development🌐

Ameni Ben Saada — Wed, 06 Nov 2024 14:07:22 +0000

We’re back for Part 2! Last time, we explored Client-Side Rendering (CSR) and Single-Page Applications (SPAs). Now, let's dive into Server-Side Rendering (SSR) and discover how it changes the game. Ready to see what makes SSR tick? Let's go! 🔍

🖥️ What is Server-Side Rendering (SSR)?

With SSR, the server prepares a fully rendered page and sends it to the browser, so the user sees content immediately, rather than waiting for JavaScript to kick in.

📄 Why Choose SSR?

1. SEO Boost 🚀: SSR is perfect if SEO is a priority. Search engines can easily index server-rendered pages, giving them a slight advantage over CSR in visibility.

2. Faster First Impressions ⚡: Because the HTML is ready to go from the start, users get an instant view of your content, especially useful for content-rich pages.

3. Great for Static or Minimal Interactivity 🌐: Pages with consistent content, like blogs, news sites, or product listings, are a perfect fit for SSR.

😎 When SSR Really Shines

If you're building an e-commerce site, blog, or any platform with a content focus and need a boost in SEO, SSR can be a great choice. It offers an immediate experience that keeps users engaged from the first click.

👎 What to Consider with SSR?

1. Higher Server Load: Because the server is handling rendering, heavy traffic can add stress to your server.

2. Potentially More Complex Setup: SSR can require more setup than CSR, especially if you're integrating with a framework like Next.js.

3. Delayed Interactivity: Pages load visually fast, but interactive elements may take a moment to activate as JavaScript takes over.

🤔 Should You Use SSR?

If you’re prioritizing SEO and quick content delivery, SSR might be the solution you’re looking for! But remember, for highly interactive apps, a mix of CSR and SSR (or even static generation) could be the way to go.

That's it for our deep dive into SSR! Next up, we’ll explore Static Site Generation (SSG).

What do you think? 🤔 Have you tried SSR in your projects? Let’s discuss your experiences in the comments below!

Client-Side Rendering and SPAs in Web Development🌐

Ameni Ben Saada — Mon, 04 Nov 2024 14:33:03 +0000

Hey dev friends💻 I’m back with a new blog, and this time we’re diving into the exciting world of Client-Side Rendering (CSR) and Single-Page Applications (SPAs). Think of this post as your caffeine boost for modern web dev concepts ☕

🖥️ What is Client-Side Rendering (CSR)?

Client-side rendering (CSR) shifts the heavy lifting of rendering pages from the server to the user's browser. When you visit a website, the server sends a skeleton HTML file, and JavaScript steps in to render content right there in your browser.

It’s like having your browser as the chef preparing the meal, rather than just serving it 👨‍🍳

📄 What are Single-Page Applications (SPAs)?

Single-Page Applications (SPAs) load all the code once and only update parts of the page as you navigate. No need to refresh the entire page each time you click just smooth, instant transitions

This approach is why you see SPAs in popular sites like Facebook and Twitter.

😎 Why Use CSR & SPAs?

User Experience: Enjoy a seamless experience with fewer loading interruptions.
Performance: While the initial load might be slower, CSR/SPA setups enhance navigation speed after the first load.
Developer Perks: Developers can create modular, reusable components and focus on the “single page” concept

👎 What are the Downsides?

SEO Challenges: Traditional SEO tools rely on server-rendered content, so CSR sites might need extra attention for SEO. But don’t worry; there are ways to address this 🛠️
Initial Load Time: CSR apps can take a bit longer to load initially as the browser fetches the code to get started. But hey, good things come to those who wait, right?

Should You Use CSR and SPAs?

If you’re looking to build modern, fast, interactive web applications and don’t mind putting in a little extra work for SEO, they’re absolutely worth it 😀

And that's a wrap👏🏻 Next time, we’ll be diving into Server-Side Rendering (SSR) to explore how it compares to CSR and the benefits it can bring to your web applications.

What about you?🤔 Have you tried CSR or SPAs in your projects? Share your experiences below! And be sure to follow for more web dev insights as we continue this journey together 🌐

Integrating Stripe into Your Nest.js Application

Ameni Ben Saada — Sun, 14 Jul 2024 16:33:58 +0000

Hello everyone, This is Ameni Ben Saada, back again with a new article to share what I've recently learned. Today, we are going to talk about Stripe ( Stripe has transformed how businesses handle online payments, making it essential for modern e-commerce platforms) why we use it and how to implement it.

What is stripe ?

Stripe is a technology company that builds economic infrastructure for the internet. Businesses of all sizes—from new startups to public companies—use Stripe's software to accept payments and manage their businesses online.

It was founded in 2010 by Patrick and John Collison and has quickly become one of the top payment processors globally. Stripe is known for its developer-friendly approach, making it easy to set up and use.

Why Use Stripe?

Ease of Use: Stripe makes it easy to integrate payment processing into your website or app.
Security: Stripe handles the security of payments, ensuring that sensitive information is protected.
Global Reach: Stripe supports many currencies and payment methods, allowing businesses to operate internationally.

How stripe works ?

We need to understand how Stripe works before writing any code.

First, The user selects a subscription plan.
Then proceed to the payment step and enter their card information.
When the user clicks the submit button, the following actions will take place in our backend:
- A new subscription is created using the selected plan and the provided payment method.
- The payment method is attached to the customer.
- A new Stripe customer is created if the customer does not already exist in Stripe.
A webhook is set up to enable communication between Stripe and our backend. This webhook verifies whether the payment was successful or not since Stripe sends various events (like payment success, payment failure, etc.) to our backend via webhooks and we need to process these events

This process ensures that the user’s subscription is properly created and their payment is securely processed.

Now moving to our favorite part, writing some code

Implementing Stripe in Nest.js

Let's walk through setting up Stripe in a Nest.js application:

If you haven't already, create a new Nest.js application and install the necessary packages then we need to create one using Nest’s CLI, install @nestjs/config to get environment variables and stripe’s npm package.

nest new nestjs-stripe && npm i @nestjs/config && npm install stripe

Once the installation is complete, the next step is to create a stripe folder inside */src*. This structure is optional; you can organize it according to your preference.

Create a module, controller, and service for Stripe. Remember to place your Stripe API key in the .env file. You can name the key anything you like, but for consistency with the setup instructions, name it STRIPE_API_KEY.

Let's begin with setting up the Stripe module. It should look something like this:

import { DynamicModule, Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { StripeController } from './stripe.controller';
import { StripeService } from './stripe.service';

@Module({})
export class StripeModule {

  static forRootAsync(): DynamicModule {
    return {
      module: StripeModule,
      controllers: [StripeController],
      imports: [ConfigModule.forRoot()],
      providers: [
        StripeService,
        {
          provide: 'STRIPE_API_KEY',
          useFactory: async (configService: ConfigService) =>
            configService.get('STRIPE_API_KEY'),
          inject: [ConfigService],
        },
      ],
    };
  }
}

let’s add the stripe service

import { Inject, Injectable, Logger } from '@nestjs/common';
import Stripe from 'stripe';

@Injectable()
export class StripeService {
  private readonly stripe: Stripe;
  private readonly logger = new Logger(StripeService.name);

  constructor(@Inject('STRIPE_API_KEY') private readonly apiKey: string) {
    this.stripe = new Stripe(this.apiKey, {
      apiVersion: '2024-04-10',
    });
    this.logger.log('StripeService initialized with API version 2023-10-16');
  }

  async getProducts(): Promise<Stripe.Product[]> {
    try {
      const products = await this.stripe.products.list();
      this.logger.log('Products fetched successfully');
      return products.data;
    } catch (error) {
      this.logger.error('Failed to fetch products from Stripe', error.stack);
      throw new Error('Unable to fetch products from Stripe');
    }
  }

  async getCustomers(): Promise<Stripe.Customer[]> {
    try {
      const customers = await this.stripe.customers.list();
      this.logger.log('Customers fetched successfully');
      return customers.data;
    } catch (error) {
      this.logger.error('Failed to fetch customers from Stripe', error.stack);
      throw new Error('Unable to fetch customers from Stripe');
    }
  }
}

now let’s move to the controller

import { Controller, Get, HttpException, HttpStatus, Logger } from '@nestjs/common';
import { StripeService } from './stripe.service';
import { Stripe } from 'stripe';

@Controller('stripe')
export class StripeController {
  private readonly logger = new Logger(StripeController.name);

  constructor(private readonly stripeService: StripeService) {}

  @Get('products')
  async getProducts(): Promise<Stripe.Product[]> {
    try {
      const products = await this.stripeService.getProducts();
      this.logger.log('Products fetched successfully');
      return products;
    } catch (error) {
      this.logger.error('Failed to fetch products', error.stack);
      throw new HttpException('Failed to fetch products', HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

  @Get('customers')
  async getCustomers(): Promise<Stripe.Customer[]> {
    try {
      const customers = await this.stripeService.getCustomers();
      this.logger.log('Customers fetched successfully');
      return customers;
    } catch (error) {
      this.logger.error('Failed to fetch customers', error.stack);
      throw new HttpException('Failed to fetch customers', HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }
}

That's it for setting up Stripe in your Nest.js application. The next steps involve configuring the webhook, setting up the payment gateway, and implementing the subscription creation process. Let me know if you'd like me to continue writing the next steps.

I hope you learned something valuable from this article. If you have any feedback or notice anything that could be improved, please let me know. I'd love to hear your thoughts and make any necessary corrections.

Getting Started with GraphQL

Ameni Ben Saada — Sat, 07 Oct 2023 16:24:48 +0000

GraphQL vs REST :
During this few months, I have been working with GraphQL and I discrovered the power of using it.💪

So, I wanted to share with you what I recently learned and how Graphql helped me to make the work more flexible.✅😄

Let’s start with what is Graphql in the first place ❓😕❓

GraphQL is an open-source query language and runtime for APIs (Application Programming Interfaces) that was developed by Facebook. It provides a more efficient and flexible approach to data fetching and manipulation compared to traditional RESTful APIs.

You may be wondering now : emm🤔! and why is that ?

So let’s discover why should we use GraphQL over REST ? What are the benefits?

Efficient Data Fetching:

GraphQL allows clients to request exactly the data they need and no more. Instead of receiving fixed responses, clients can specify their data requirements in a GraphQL query. And with this we eliminates the problem of over-fetching or under-fetching data that we face with REST APIs.

To make sure that this point is clear, let’s see this image

As you can notice in this example, for the rest API we sent a get request and as a response we got all the data saved unlike in the GraphQL query (queries are used to request data from the server in GraphQL and we have the mutations that allows us to create, update and delete data) we were able to specify which fields we need and in the response we got exactly what we wanted😀

Declarative and Strong Typing: GraphQL uses a schema language to define the data model and operations available in the API. This schema acts as a contract between the client and server, ensuring a clear understanding of the data structure and operations. It provides strong typing, allowing clients to know in advance what types of data they can expect and what operations are available.

What we mean by that ?🤔

well let’s imagine that we are building a simple application that sells books, we have 2 main types books and categories. Here's how we could define the schema for this application in GraphQL:

type Book {
  id: ID!
  name: String!
  price: Float!
  category: Category!
}

type Category {
  id: ID!
  name: String!
  description: String!
  books: [Book!]!
}

type Query {
  getBook(id: ID!): Book
  getBooksByCategory(categoryId: ID!): [Book]!
  getCategory(id: ID!): Category
  getAllCategories: [Category]!
}

In this example, we have first the Book and Category types representing the entities in our application. We have also the Id, String and Float types ,we used them with different fields that are required in our case. Now if we want for example to get a book by it’s id our query will look like this

query {
  getBook(id: "123") {
    name
    price
    category {
      name
    }
  }
}

Here, If we enter a field that does not exist in the schema, GraphQL server will respond with an error, indicating that the field is not valid, preventing runtime errors and ensuring data integrity.

Overall, GraphQL provides a more efficient and flexible way to fetch and manipulate data, reduces over-fetching and under-fetching issues, enhances developer productivity, and enables the building of powerful and responsive APIs. It has gained popularity among developers due to its many advantages. ✅✅

In this blog we mainly learned what are the advantages of using GraphQL👏, stay tuned for the next one in which we are going to learn how to implement GraphQL in real application using Apollo, a powerful and popular GraphQL client.🔥🔥

Hope you find this helpful don’t hesitate for any comments and questions.

👩‍💻happy coding!

Getting Started with Express

Ameni Ben Saada — Sun, 11 Jul 2021 19:16:10 +0000

Node.js is an open-source and cross-platform runtime environment, that allows you to write JavaScript on the server which is on of the most helpful advantages of Node.js since the same programming language can be used for server-side and client-side applications. It also runs on V8 JavaScript engine which makes it highly performant.

And one of the most popular frameworks for NodeJs is our subject today in this blog: Express Express is written on top of node.js to make writing server-side javascript easier.

So what we are going to do today is building a very basic REST API.

Before we start, make sure that you have these if you don't please install them.

Node.js installed. You can install it from here
An editor that you like working in. I use VS Code, you can install it from here
Postman installed. Install it from here

First of all, we are going to prepare our work environment.Let's start by creating our folder

C:\Users\ameni>mkdir our_project

C:\Users\ameni>cd our_project

Now use this command to create a new node.js project.

C:\Users\ameni\our_project> npm init -y

All we have to do now is opening our folder in the editor. For VS Code you can use this command

C:\Users\ameni\our_project>code

Your terminal now should look like this

Let's start now by installing our Express framework

open the terminal and run this command

npm install express

Now we are going to create a file named index.js and starting our code.So we are going to import express and use express.json and send a Hello world text and finally we exported it!

const express = require("express");
const app = express();
app.use(express.json());
app.use("/", (req, res) => res.send("Hello world!"));
module.exports = app;

Now we are going to create another file,to keep our code clean, named server.js . We are going to import our app module and created the port which the application will work on and we started or app.

const app = require("./index");
const port = 8000;

app.listen(port, () => {

console.log(`App running on ${port}...`);

});

Now let's run our server

node server.js

In http://localhost:8000/ you will see Hello World

Now what we are going to do is create something more interesting by building a simple application to create, read, update, and delete Person's information.

To do that we are going to use Post, Get, Patch, and Delete methods.

So, We will create a variable named person Which contains an array of persons
With the get request, we will retrieve all the persons and send them as a response
We will use the post request to push a new person to the person array
The delete Method to delete a person by filtering the person array by person id
And finally, we will update a person by using the patch request and the person id

app.get("/person", (req, res) => {
  res.json(person);
});

app.post("/person", (req, res) => {
  const body = req.body;
  person.push(body);
  res.json(body);
});

app.delete("/person/:id", (req, res) => {
  const id = req.params.id;
  const filtredPerson = person.filter((value, index) => index != id);
  person = filtredPerson;
  res.json(filtredPerson);
});

app.patch("/person/:id", (req, res) => {
  const id = req.params.id;
  const body = req.body;
  person[id] = body;
  res.json( person);
});

Now to test our code we are going to use Postman

To add a person we send this post request .

To get the data we have we sent this request.

To update the age of this person we sent a patch request.

And finally to delete the data we sent a delete request .

In all the above, we sent our request in the body now what if we want to use query ?

All we have to do is this :

In the code

app.get("/person", (req, res) => {
  const { personId } = req.query;
  person[personId] = body;
  res.json(Person);
});

In the Postman

So here we got our data using req.query instead of sending the request in the body.

And that's it for this blog. I hope you did learn a thing or two from reading and practicing this.
If there's anything wrong with this article, please let me know.I would love to correct and improve it.

MongoDB query operators:

Ameni Ben Saada — Sat, 26 Jun 2021 19:45:31 +0000

This past few months, I have spent time learning the back-end technologies and how they are working. In this journey, I discovered MongoDB,which is flexible and allows developers to quickly store large amounts of unstructured data.

So today we are going to learn how to write MongoDB queries such as:

CRUD Operations:

Create: insertOne(), insertMany()
Read: findOne(), find()
Update: updateOne(), update()
Delete: deleteOne(), deleteMany()

More advanced query operations using:

Comparison query operators : $gt , $lt , $gte , $lte
Set Operators: $in, $all, $nin

let's get started

Create operations:

Those Create or Insert operations give us the ability to add a new document to a collection. We can use:

insertOne: inserts a single document into a collection.
insertMany: inserts multiple documents into a collection.

Read Operations:

We use those operations to get data from our MongoDB database. We can use these methods:

find: This method is called on the collection you’d like to query.
findOne: This method is used to retrieve a single document from a collection.

Update Operations:

With Update operations, we can modify existing documents or documents in a collection. Let’s go through the update methods:

updateOne: This method is used to update a single document.
updateMany: This method is used to update multiple documents.

Consider the following:

Delete Operations:

The deleteOne() and deleteMany() methods are used to remove documents from a collection. Let’s see how these methods work:

deleteOne: This method is used to delete a single document in a collection.
deleteMany: This method is used to delete multiple documents in a collection

Comparison Query Operators:

These are tools to locate the requested data in a database. So we use, $lt, $lte, $gt, and $gte set of operators to achieve this. Let’s look at them individually:

$gt: Match if the requested value is "greater than" the value provided in the query;
$gte: Match if the requested value is "greater than or equal to" the value provided in the query;
$lt: Match if the requested value is "less than" the value provided in the query;
$lte: Match if the requested value is "less than or equal to" the value provided in the query;

Set Operators:

Set operators includes $in, $nin, and $all. These query operators take a list of one or more values. Let’s look at them individually:

$in: This operator will return a document if any of the given values matches the search field. If the field holds an array, the $in operator will return all the documents in a collection where at least one of the given values matches the search field.
$nin: $nin (not in) returns a document only when none of the given elements matches the search field.
$all: $all matches if all the given elements match the search key.

I learned a lot during these few months, and I hope you did learn a thing or two from reading this.

Please let me know if there's anything wrong with this article. I would love to correct and improve it.