feat(core): add useQueryImmutable (#5299)

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'> & {