// src/hooks/useClientAppConfig.ts
import { createClientAppConfigHook } from '@sealos/shared';
import { ClientAppConfig } from '@/types/config';

export const useClientAppConfig = createClientAppConfigHook<ClientAppConfig>(['client-app-config']);

// src/pages/_app.tsx
import { setupClientAppConfigDefaults } from '@sealos/shared';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 0 // Global default
    }
  }
});

setupClientAppConfigDefaults(queryClient, ['client-app-config']);

// src/pages/_app.tsx
import { prefetchClientAppConfig } from '@sealos/shared';
import { getClientAppConfigServer } from '@/pages/api/platform/getClientAppConfig';

MyApp.getInitialProps = async (context: AppContext) => {
  const ctx = await App.getInitialProps(context);

  let dehydratedState: unknown;
  try {
    if (typeof window === 'undefined') {
      const qc = new QueryClient();
      await prefetchClientAppConfig(qc, ['client-app-config'], getClientAppConfigServer);
      dehydratedState = dehydrate(qc);
    }
  } catch (error) {
    console.error('Failed to prefetch client app config:', error);
  }

  return { ...ctx, dehydratedState };
};

// src/pages/_app.tsx
import { ClientConfigProvider } from '@sealos/shared';

const MyApp = ({ Component, pageProps, dehydratedState }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ClientConfigProvider dehydratedState={dehydratedState}>
        <Component {...pageProps} />
      </ClientConfigProvider>
    </QueryClientProvider>
  );
};

import { useClientAppConfig } from '@/hooks/useClientAppConfig';

function MyComponent() {
  const config = useClientAppConfig();
  return <div>{config.ui.brandName}</div>;
}