admin/docs/apps-architecture/react-frontend/layers/providers.md

Providers Layer

Table of Contents

• Providers Layer
  • Purpose
  • Responsibilities
  • Recommended Structure
  • App Provider Composition
  • 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

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:

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

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

Example: AppProviders

This component acts as the global application wrapper.

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>
  );
};