# Providers Layer

## Table of Contents

- [Providers Layer](#providers-layer)
  - [Purpose](#purpose)
  - [Responsibilities](#responsibilities)
  - [Recommended Structure](#recommended-structure)
  - [App Provider Composition](#app-provider-composition)
  - [Example: AppProviders](#example-appproviders)

## Purpose

The `providers` layer is responsible for **global application context and environment configuration**.

It acts as the **composition root of the application**, where all global React providers are initialized and combined.

Providers make global services available across the entire application, such as:

- routing
- data fetching clients
- theme configuration
- authentication/session context
- internationalization
- notifications
- global state management

Instead of importing these providers in many places, they are **composed once and applied at the application root**.

## Responsibilities

The `providers` layer is responsible for:

- initializing global React context providers
- configuring global services
- composing multiple providers into a single entry point
- exposing the provider tree to the application root

## Recommended Structure

```plaintext
providers/
|
| --- AppProviders.tsx       # main provider composition
|
| --- QueryProvider.tsx      # React Query setup
| --- RouterProvider.tsx     # routing configuration
| --- ThemeProvider.tsx      # theme context
| --- AuthProvider.tsx       # authentication/session provider
| --- I18nProvider.tsx       # internationalization provider
|
| --- index.ts               # re-export providers (optional)
```

## App Provider Composition

Instead of wrapping the application with multiple providers manually, they are composed in a single root provider component.
This centralizes the provider tree and simplifies application initialization.
Example usage in the application entry point:

```tsx
import { AppProviders } from "@/providers/AppProviders";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <AppProviders>
    <App />
  </AppProviders>,
);
```

### Example: AppProviders

This component acts as the global application wrapper.

```tsx
import { ReactNode, FC, PropsWithChildren } from "react";
import { QueryProvider } from "./QueryProvider";
import { ThemeProvider } from "./ThemeProvider";
import { AuthProvider } from "./AuthProvider";
import { RouterProvider } from "./RouterProvider";
import { I18nProvider } from "./I18nProvider";

export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
  return (
    <QueryProvider>
      <I18nProvider>
        <AuthProvider>
          <ThemeProvider>
            <RouterProvider>{children}</RouterProvider>
          </ThemeProvider>
        </AuthProvider>
      </I18nProvider>
    </QueryProvider>
  );
};
```