Separating Environment-Specific Settings

Offer an example of how to organize configuration files in TanStack Config to separate common settings from environment-specific settings (e.g., development vs. production).

// config.js
export const commonConfig = {
    appName: 'MyApp',
    timeout: 5000
};

Defines common configuration settings that are environment-agnostic, such as application name and default timeout settings.

// config.development.js
import { commonConfig } from './config';
export const config = {
    ...commonConfig,
    apiUrl: 'http://localhost:3000/api',
    debug: true
};

Development-specific configuration that extends the common configuration with settings suitable for a development environment, like a local API URL and debug flag set to true.

// config.production.js
import { commonConfig } from './config';
export const config = {
    ...commonConfig,
    apiUrl: 'https://myapp.com/api',
    debug: false
};

Production-specific configuration, extending the common configuration with production settings, such as a production API URL and debug flag set to false.

// useConfig.js
import { config as developmentConfig } from './config.development';
import { config as productionConfig } from './config.production';

export const useConfig = () => {
    if (process.env.NODE_ENV === 'development') {
        return developmentConfig;
    }
    return productionConfig;
};

Utility hook to dynamically select and use the appropriate configuration based on the current environment (development or production).