Creating Reusable Configuration Modules

Explain how to create modular and reusable configuration components with TanStack Config to simplify configuration management across different parts of a large-scale e-commerce platform.

import { createConfig } from '@tanstack/config';

// Basic application configuration
export const appConfig = createConfig({
  key: 'app',
  defaultConfig: () => ({
    apiUrl: 'https://api.example.com',
    appName: 'SuperEcom',
    env: process.env.NODE_ENV,
  }),
});

This code snippet creates a basic application configuration module using TanStack Config. It specifies the default configuration for the app, including the API URL, application name, and environment.

import { createConfig, mergeConfig } from '@tanstack/config';
import { appConfig } from './appConfig';

// Feature-specific configuration
export const featureConfig = createConfig({
  key: 'feature',
  defaultConfig: () => mergeConfig(appConfig, {
    featureEnabled: true,
    featureUrl: `${appConfig().apiUrl}/feature`,
  }),
});

This snippet demonstrates how to create a feature-specific configuration that inherits and merges settings from the basic application configuration. It showcases the use of `mergeConfig` to combine configurations and extend the basic app configuration with additional feature-specific options.

import { appConfig } from './appConfig';
import { featureConfig } from './featureConfig';

// Accessing config values
console.log('API URL:', appConfig().apiUrl);
console.log('Feature Enabled:', featureConfig().featureEnabled);
console.log('Feature URL:', featureConfig().featureUrl);

This piece of code accesses the values from both the application and feature-specific configuration modules. It logs the API URL from the app configuration and both the feature enabled status and feature URL from the feature configuration.