feat: backend module awareness & optional request (#5909)

packages/backend/server/src/core/config.ts

@@ -46,6 +46,7 @@ export class ServerConfigType {
   @Field(() => [ServerFeature], { description: 'enabled server features' })
   features!: ServerFeature[];
 }
+
 export class ServerConfigResolver {
   @Query(() => ServerConfigType, {
     description: 'server config',

packages/backend/server/src/plugins/payment/index.ts

@@ -17,11 +17,10 @@ import { StripeWebhook } from './webhook';
     UserSubscriptionResolver,
   ],
   controllers: [StripeWebhook],
-  // TODO(@forehalo): enable this requirements when conditional query is implemented in frontend
-  // requires: [
-  //   'plugins.payment.stripe.keys.APIKey',
-  //   'plugins.payment.stripe.keys.webhookKey',
-  // ],
+  requires: [
+    'plugins.payment.stripe.keys.APIKey',
+    'plugins.payment.stripe.keys.webhookKey',
+  ],
   contributesTo: ServerFeature.Payment,
   if: config => config.flavor.graphql,
 })

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -34,7 +34,7 @@ import {
   openSignOutModalAtom,
 } from '../../../../atoms';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
-import { useSelfHosted } from '../../../../hooks/affine/use-server-config';
+import { useServerFeatures } from '../../../../hooks/affine/use-server-config';
 import { useMutation } from '../../../../hooks/use-mutation';
 import { useQuery } from '../../../../hooks/use-query';
 import { useUserSubscription } from '../../../../hooks/use-subscription';
@@ -169,7 +169,7 @@ export const AvatarAndName = () => {
 
 const StoragePanel = () => {
   const t = useAFFiNEI18N();
-  const isSelfHosted = useSelfHosted();
+  const { payment: hasPaymentFeature } = useServerFeatures();
 
   const { data } = useQuery({
     query: allBlobSizesQuery,
@@ -205,7 +205,7 @@ const StoragePanel = () => {
         plan={plan}
         value={data.collectAllBlobSizes.size}
         onUpgrade={onUpgrade}
-        upgradable={!isSelfHosted}
+        upgradable={hasPaymentFeature}
       />
     </SettingRow>
   );

packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx

@@ -7,7 +7,7 @@ import {
 import type { ReactElement, SVGProps } from 'react';
 
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
-import { useSelfHosted } from '../../../../hooks/affine/use-server-config';
+import { useServerFeatures } from '../../../../hooks/affine/use-server-config';
 import type { GeneralSettingKey } from '../types';
 import { AboutAffine } from './about';
 import { AppearanceSettings } from './appearance';
@@ -28,7 +28,7 @@ export type GeneralSettingList = GeneralSettingListItem[];
 export const useGeneralSettingList = (): GeneralSettingList => {
   const t = useAFFiNEI18N();
   const status = useCurrentLoginStatus();
-  const isSelfHosted = useSelfHosted();
+  const { payment: hasPaymentFeature } = useServerFeatures();
 
   const settings: GeneralSettingListItem[] = [
     {
@@ -51,7 +51,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
     },
   ];
 
-  if (!isSelfHosted) {
+  if (hasPaymentFeature) {
     settings.splice(3, 0, {
       key: 'plans',
       title: t['com.affine.payment.title'](),

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/index.tsx

@@ -3,7 +3,7 @@ import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
-import { useSelfHosted } from '@affine/core/hooks/affine/use-server-config';
+import { useServerFeatures } from '@affine/core/hooks/affine/use-server-config';
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@@ -20,7 +20,7 @@ import type { WorkspaceSettingDetailProps } from './types';
 
 export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
   const t = useAFFiNEI18N();
-  const isSelfHosted = useSelfHosted();
+  const { payment: hasPaymentFeature } = useServerFeatures();
   const workspaceMetadata = props.workspaceMetadata;
 
   // useWorkspace hook is a vary heavy operation here, but we need syncing name and avatar changes here,
@@ -49,7 +49,7 @@ export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
       </SettingWrapper>
       <SettingWrapper title={t['com.affine.brand.affineCloud']()}>
         <EnableCloudPanel workspace={workspace} {...props} />
-        <MembersPanel upgradable={!isSelfHosted} {...props} />
+        <MembersPanel upgradable={hasPaymentFeature} {...props} />
       </SettingWrapper>
       {environment.isDesktop && (
         <SettingWrapper title={t['Storage and Export']()}>

packages/frontend/core/src/hooks/affine/use-server-config.ts

@@ -1,4 +1,5 @@
-import { serverConfigQuery, ServerDeploymentType } from '@affine/graphql';
+import type { ServerFeature } from '@affine/graphql';
+import { serverConfigQuery } from '@affine/graphql';
 import type { BareFetcher, Middleware } from 'swr';
 
 import { useQueryImmutable } from '../use-query';
@@ -25,20 +26,22 @@ const useServerConfig = () => {
   return config.serverConfig;
 };
 
-export const useServerType = () => {
+type LowercaseServerFeature = Lowercase<ServerFeature>;
+type ServerFeatureRecord = {
+  [key in LowercaseServerFeature]: boolean;
+};
+
+export const useServerFeatures = (): ServerFeatureRecord => {
   const config = useServerConfig();
 
   if (!config) {
-    return 'local';
+    return {} as ServerFeatureRecord;
   }
 
-  return config.type;
-};
-
-export const useSelfHosted = () => {
-  const serverType = useServerType();
-
-  return ['local', ServerDeploymentType.Selfhosted].includes(serverType);
+  return Array.from(new Set(config.features)).reduce((acc, cur) => {
+    acc[cur.toLowerCase() as LowercaseServerFeature] = true;
+    return acc;
+  }, {} as ServerFeatureRecord);
 };
 
 export const useServerBaseUrl = () => {

packages/frontend/core/src/hooks/use-subscription.ts

@@ -1,7 +1,7 @@
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { type SubscriptionQuery, subscriptionQuery } from '@affine/graphql';
 
-import { useSelfHosted } from './affine/use-server-config';
+import { useServerFeatures } from './affine/use-server-config';
 import { useQuery } from './use-query';
 
 export type Subscription = NonNullable<
@@ -14,10 +14,10 @@ const selector = (data: SubscriptionQuery) =>
   data.currentUser?.subscription ?? null;
 
 export const useUserSubscription = () => {
-  const isSelfHosted = useSelfHosted();
-  const { data, mutate } = useQuery({
-    query: subscriptionQuery,
-  });
+  const { payment: hasPaymentFeature } = useServerFeatures();
+  const { data, mutate } = useQuery(
+    hasPaymentFeature ? { query: subscriptionQuery } : undefined
+  );
 
   const set: SubscriptionMutator = useAsyncCallback(
     async (update?: Partial<Subscription>) => {
@@ -39,8 +39,8 @@ export const useUserSubscription = () => {
     [mutate]
   );
 
-  if (isSelfHosted) {
-    return [selector(data), () => {}] as const;
+  if (!hasPaymentFeature) {
+    return [null, () => {}] as const;
   }
 
   return [selector(data), set] as const;