refactor(core): adjust graphql hook (#5339)

packages/frontend/core/src/hooks/__tests__/gql.spec.tsx

@@ -0,0 +1,146 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { uploadAvatarMutation } from '@affine/graphql';
+import { render } from '@testing-library/react';
+import type { Mock } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useMutation } from '../use-mutation';
+import { useQuery } from '../use-query';
+
+let fetch: Mock;
+describe('GraphQL wrapper for SWR', () => {
+  beforeEach(() => {
+    fetch = vi.fn(() =>
+      Promise.resolve(
+        new Response(JSON.stringify({ data: { hello: 1 } }), {
+          headers: {
+            'content-type': 'application/json',
+          },
+        })
+      )
+    );
+    vi.stubGlobal('fetch', fetch);
+  });
+
+  afterEach(() => {
+    fetch.mockReset();
+  });
+
+  describe('useQuery', () => {
+    const Component = ({ id }: { id: number }) => {
+      const { data, isLoading, error } = useQuery({
+        query: {
+          id: 'query',
+          query: `
+          query {
+            hello
+          }
+        `,
+          operationName: 'query',
+          definitionName: 'query',
+        },
+        // @ts-expect-error forgive the fake variables
+        variables: { id },
+      });
+
+      if (isLoading) {
+        return <div>loading</div>;
+      }
+
+      if (error) {
+        return <div>error</div>;
+      }
+
+      // @ts-expect-error
+      return <div>number: {data!.hello}</div>;
+    };
+
+    it('should send query correctly', async () => {
+      const component = <Component id={1} />;
+      const renderer = render(component);
+      const el = await renderer.findByText('number: 1');
+      expect(el).toMatchInlineSnapshot(`
+        <div>
+          number:${' '}
+          1
+        </div>
+      `);
+    });
+
+    it('should not send request if cache hit', async () => {
+      const component = <Component id={2} />;
+      const renderer = render(component);
+      expect(fetch).toBeCalledTimes(1);
+
+      renderer.rerender(component);
+      expect(fetch).toBeCalledTimes(1);
+
+      render(<Component id={3} />);
+
+      expect(fetch).toBeCalledTimes(2);
+    });
+  });
+
+  describe('useMutation', () => {
+    const Component = () => {
+      const { trigger, error, isMutating } = useMutation({
+        mutation: {
+          id: 'mutation',
+          query: `
+          mutation {
+            hello
+          }
+        `,
+          operationName: 'mutation',
+          definitionName: 'mutation',
+        },
+      });
+
+      if (isMutating) {
+        return <div>mutating</div>;
+      }
+
+      if (error) {
+        return <div>error</div>;
+      }
+
+      return (
+        <div>
+          <button onClick={() => trigger()}>click</button>
+        </div>
+      );
+    };
+
+    it('should trigger mutation', async () => {
+      const component = <Component />;
+      const renderer = render(component);
+      const button = await renderer.findByText('click');
+
+      button.click();
+      expect(fetch).toBeCalledTimes(1);
+
+      renderer.rerender(component);
+      expect(renderer.asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div>
+            mutating
+          </div>
+        </DocumentFragment>
+      `);
+    });
+
+    it('should get rid of generated types', async () => {
+      function _NotActuallyRunDefinedForTypeTesting() {
+        const { trigger } = useMutation({
+          mutation: uploadAvatarMutation,
+        });
+        trigger({
+          avatar: new File([''], 'avatar.png'),
+        });
+      }
+      expect(_NotActuallyRunDefinedForTypeTesting).toBeTypeOf('function');
+    });
+  });
+});

packages/frontend/core/src/hooks/affine/use-invite-member.ts

@@ -1,8 +1,8 @@
 import type { Permission } from '@affine/graphql';
 import { inviteByEmailMutation } from '@affine/graphql';
-import { useMutation } from '@affine/workspace/affine/gql';
 import { useCallback } from 'react';
 
+import { useMutation } from '../use-mutation';
 import { useMutateCloud } from './use-mutate-cloud';
 
 export function useInviteMember(workspaceId: string) {

packages/frontend/core/src/hooks/affine/use-is-shared-page.ts

@@ -6,11 +6,12 @@ import {
   revokePublicPageMutation,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { useSetAtom } from 'jotai';
 import { useCallback, useMemo } from 'react';
 
 import type { PageMode } from '../../atoms';
+import { useMutation } from '../use-mutation';
+import { useQuery } from '../use-query';
 
 type NoParametersKeys<T> = {
   [K in keyof T]: T[K] extends () => any ? K : never;

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

@@ -1,8 +1,9 @@
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { getIsOwnerQuery } from '@affine/graphql';
-import { useQueryImmutable } from '@affine/workspace/affine/gql';
 import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 
+import { useQueryImmutable } from '../use-query';
+
 export function useIsWorkspaceOwner(workspaceMetadata: WorkspaceMetadata) {
   const { data } = useQueryImmutable(
     workspaceMetadata.flavour !== WorkspaceFlavour.LOCAL

packages/frontend/core/src/hooks/affine/use-member-count.ts

@@ -1,5 +1,6 @@
 import { getMemberCountByWorkspaceIdQuery } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
+
+import { useQuery } from '../use-query';
 
 export function useMemberCount(workspaceId: string) {
   const { data } = useQuery({

packages/frontend/core/src/hooks/affine/use-members.ts

@@ -2,7 +2,8 @@ import {
   type GetMembersByWorkspaceIdQuery,
   getMembersByWorkspaceIdQuery,
 } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
+
+import { useQuery } from '../use-query';
 
 export type Member = Omit<
   GetMembersByWorkspaceIdQuery['workspace']['members'][number],

packages/frontend/core/src/hooks/affine/use-revoke-member-permission.ts

@@ -1,7 +1,7 @@
 import { revokeMemberPermissionMutation } from '@affine/graphql';
-import { useMutation } from '@affine/workspace/affine/gql';
 import { useCallback } from 'react';
 
+import { useMutation } from '../use-mutation';
 import { useMutateCloud } from './use-mutate-cloud';
 
 export function useRevokeMemberPermission(workspaceId: string) {

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

@@ -1,7 +1,8 @@
 import { serverConfigQuery } from '@affine/graphql';
-import { useQueryImmutable } from '@affine/workspace/affine/gql';
 import type { BareFetcher, Middleware } from 'swr';
 
+import { useQueryImmutable } from '../use-query';
+
 const wrappedFetcher = (fetcher: BareFetcher<any> | null, ...args: any[]) =>
   fetcher?.(...args).catch(() => null);
 

packages/frontend/core/src/hooks/affine/use-toggle-cloud-public.ts

@@ -1,7 +1,7 @@
 import { setWorkspacePublicByIdMutation } from '@affine/graphql';
-import { useMutation } from '@affine/workspace/affine/gql';
 import { useCallback } from 'react';
 
+import { useMutation } from '../use-mutation';
 import { useMutateCloud } from './use-mutate-cloud';
 
 export function useToggleCloudPublic(workspaceId: string) {

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

@@ -0,0 +1,89 @@
+import type {
+  GraphQLQuery,
+  MutationOptions,
+  QueryResponse,
+  QueryVariables,
+  RecursiveMaybeFields,
+} from '@affine/graphql';
+import { fetcher } from '@affine/graphql';
+import type { GraphQLError } from 'graphql';
+import { useMemo } from 'react';
+import type { Key } from 'swr';
+import { useSWRConfig } from 'swr';
+import type {
+  SWRMutationConfiguration,
+  SWRMutationResponse,
+} from 'swr/mutation';
+import useSWRMutation from 'swr/mutation';
+
+/**
+ * A useSWRMutation wrapper for sending graphql mutations
+ *
+ * @example
+ *
+ * ```ts
+ * import { someMutation } from '@affine/graphql'
+ *
+ * const { trigger } = useMutation({
+ *  mutation: someMutation,
+ * })
+ *
+ * trigger({ name: 'John Doe' })
+ */
+export function useMutation<Mutation extends GraphQLQuery, K extends Key = Key>(
+  options: Omit<MutationOptions<Mutation>, 'variables'>,
+  config?: Omit<
+    SWRMutationConfiguration<
+      QueryResponse<Mutation>,
+      GraphQLError | GraphQLError[],
+      K,
+      QueryVariables<Mutation>
+    >,
+    'fetcher'
+  >
+): SWRMutationResponse<
+  QueryResponse<Mutation>,
+  GraphQLError | GraphQLError[],
+  K,
+  QueryVariables<Mutation>
+>;
+export function useMutation(
+  options: Omit<MutationOptions<GraphQLQuery>, 'variables'>,
+  config?: any
+) {
+  return useSWRMutation(
+    () => ['cloud', options.mutation.id],
+    (_: unknown[], { arg }: { arg: any }) =>
+      fetcher({ ...options, query: options.mutation, variables: arg }),
+    config
+  );
+}
+
+// use this to revalidate all queries that match the filter
+export const useMutateQueryResource = () => {
+  const { mutate } = useSWRConfig();
+  const revalidateResource = useMemo(
+    () =>
+      <Q extends GraphQLQuery>(
+        query: Q,
+        varsFilter: (
+          vars: RecursiveMaybeFields<QueryVariables<Q>>
+        ) => boolean = _vars => true
+      ) => {
+        return mutate(key => {
+          const res =
+            Array.isArray(key) &&
+            key[0] === 'cloud' &&
+            key[1] === query.id &&
+            varsFilter(key[2]);
+          if (res) {
+            console.debug('revalidate resource', key);
+          }
+          return res;
+        });
+      },
+    [mutate]
+  );
+
+  return revalidateResource;
+};

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

@@ -0,0 +1,129 @@
+import type {
+  GraphQLQuery,
+  QueryOptions,
+  QueryResponse,
+} from '@affine/graphql';
+import { fetcher } from '@affine/graphql';
+import type { GraphQLError } from 'graphql';
+import { useCallback, useMemo } from 'react';
+import type { SWRConfiguration, SWRResponse } from 'swr';
+import useSWR from 'swr';
+import useSWRImutable from 'swr/immutable';
+import useSWRInfinite from 'swr/infinite';
+
+/**
+ * A `useSWR` wrapper for sending graphql queries
+ *
+ * @example
+ *
+ * ```ts
+ * import { someQuery, someQueryWithNoVars } from '@affine/graphql'
+ *
+ * const swrResponse1 = useQuery({
+ *   query: workspaceByIdQuery,
+ *   variables: { id: '1' }
+ * })
+ *
+ * const swrResponse2 = useQuery({
+ *   query: someQueryWithNoVars
+ * })
+ * ```
+ */
+type useQueryFn = <Query extends GraphQLQuery>(
+  options?: QueryOptions<Query>,
+  config?: Omit<
+    SWRConfiguration<
+      QueryResponse<Query>,
+      GraphQLError | GraphQLError[],
+      typeof fetcher<Query>
+    >,
+    'fetcher'
+  >
+) => SWRResponse<
+  QueryResponse<Query>,
+  GraphQLError | GraphQLError[],
+  {
+    suspense: true;
+  }
+>;
+
+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'> & {
+    getVariables: (
+      pageIndex: number,
+      previousPageData: QueryResponse<Query>
+    ) => QueryOptions<Query>['variables'];
+  },
+  config?: Omit<
+    SWRConfiguration<
+      QueryResponse<Query>,
+      GraphQLError | GraphQLError[],
+      typeof fetcher<Query>
+    >,
+    'fetcher'
+  >
+) {
+  const configWithSuspense: SWRConfiguration = useMemo(
+    () => ({
+      suspense: true,
+      ...config,
+    }),
+    [config]
+  );
+
+  const { data, setSize, size, error } = useSWRInfinite<
+    QueryResponse<Query>,
+    GraphQLError | GraphQLError[]
+  >(
+    (pageIndex: number, previousPageData: QueryResponse<Query>) => [
+      'cloud',
+      options.query.id,
+      options.getVariables(pageIndex, previousPageData),
+    ],
+    async ([_, __, variables]) => {
+      const params = { ...options, variables } as QueryOptions<Query>;
+      return fetcher(params);
+    },
+    configWithSuspense
+  );
+
+  const loadingMore = size > 0 && data && !data[size - 1];
+
+  // todo: find a generic way to know whether or not there are more items to load
+  const loadMore = useCallback(() => {
+    if (loadingMore) {
+      return;
+    }
+    setSize(size => size + 1).catch(err => {
+      console.error(err);
+    });
+  }, [loadingMore, setSize]);
+  return {
+    data,
+    error,
+    loadingMore,
+    loadMore,
+  };
+}

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

@@ -1,5 +1,6 @@
 import { quotaQuery } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
+
+import { useQuery } from './use-query';
 
 export const useUserQuota = () => {
   const { data } = useQuery({

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

@@ -1,8 +1,8 @@
 import { type SubscriptionQuery, subscriptionQuery } from '@affine/graphql';
-import { useQuery } from '@affine/workspace/affine/gql';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 
 import { useSelfHosted } from './affine/use-server-config';
+import { useQuery } from './use-query';
 
 export type Subscription = NonNullable<
   NonNullable<SubscriptionQuery['currentUser']>['subscription']