feat(core): add useQueryImmutable (#5299)

packages/frontend/core/src/hooks/affine/use-is-workspace-owner.ts

@@ -1,8 +1,8 @@
 import { getIsOwnerQuery } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
+import { useQueryImmutable } from '@affine/workspace/affine/gql';
 
 export function useIsWorkspaceOwner(workspaceId: string) {
-  const { data } = useQuery({
+  const { data } = useQueryImmutable({
     query: getIsOwnerQuery,
     variables: {
       workspaceId,

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

@@ -1,5 +1,5 @@
 import { serverConfigQuery } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
+import { useQueryImmutable } from '@affine/workspace/affine/gql';
 import type { BareFetcher, Middleware } from 'swr';
 
 const wrappedFetcher = (fetcher: BareFetcher<any> | null, ...args: any[]) =>
@@ -10,13 +10,10 @@ const errorHandler: Middleware = useSWRNext => (key, fetcher, config) => {
 };
 
 export const useServerFlavor = () => {
-  const { data: config, error } = useQuery(
+  const { data: config, error } = useQueryImmutable(
     { query: serverConfigQuery },
     {
       use: [errorHandler],
-      revalidateOnFocus: false,
-      revalidateOnMount: false,
-      revalidateIfStale: false,
     }
   );
 

packages/frontend/workspace/src/affine/gql.ts

@@ -13,6 +13,7 @@ import type { GraphQLError } from 'graphql';
 import { useMemo } from 'react';
 import type { Key, SWRConfiguration, SWRResponse } from 'swr';
 import useSWR, { useSWRConfig } from 'swr';
+import useSWRImutable from 'swr/immutable';
 import useSWRInfinite from 'swr/infinite';
 import type {
   SWRMutationConfiguration,
@@ -44,7 +45,7 @@ export const fetcher = gqlFetcherFactory(
  * })
  * ```
  */
-export function useQuery<Query extends GraphQLQuery>(
+type useQueryFn = <Query extends GraphQLQuery>(
   options: QueryOptions<Query>,
   config?: Omit<
     SWRConfiguration<
@@ -54,31 +55,35 @@ export function useQuery<Query extends GraphQLQuery>(
     >,
     'fetcher'
   >
-): SWRResponse<
+) => SWRResponse<
   QueryResponse<Query>,
   GraphQLError | GraphQLError[],
   {
     suspense: true;
   }
 >;
-export function useQuery<Query extends GraphQLQuery>(
-  options: QueryOptions<Query>,
-  config?: any
-) {
-  const configWithSuspense: SWRConfiguration = useMemo(
-    () => ({
-      suspense: true,
-      ...config,
-    }),
-    [config]
-  );
 
-  return useSWR(
-    () => ['cloud', options.query.id, options.variables],
-    () => fetcher(options),
-    configWithSuspense
-  );
-}
+const createUseQuery =
+  (immutable: boolean): useQueryFn =>
+  (options, config) => {
+    const configWithSuspense: SWRConfiguration = useMemo(
+      () => ({
+        suspense: true,
+        ...config,
+      }),
+      [config]
+    );
+
+    const useSWRFn = immutable ? useSWRImutable : useSWR;
+    return useSWRFn(
+      options ? () => ['cloud', options.query.id, options.variables] : null,
+      options ? () => fetcher(options) : null,
+      configWithSuspense
+    );
+  };
+
+export const useQuery = createUseQuery(false);
+export const useQueryImmutable = createUseQuery(true);
 
 export function useQueryInfinite<Query extends GraphQLQuery>(
   options: Omit<QueryOptions<Query>, 'variables'> & {