Merge pull request #878 from MoralisWeb3/feat/next-pagination

Feat: @moralisweb3/next paginated hooks
MoralisWeb3 · Dec 8, 2022 · 3340ac5 · 3340ac5 · github-actions · Dec 8, 2022
2 parents 47fe6f4 + ea01ddc
commit 3340ac5
Show file tree

Hide file tree

Showing 62 changed files with 819 additions and 1,469 deletions.
diff --git a/.changeset/friendly-geese-provide.md b/.changeset/friendly-geese-provide.md
@@ -0,0 +1,5 @@
+---
+'@moralisweb3/next': patch
+---
+
+Added paginated hooks
diff --git a/demos/nextjs/app/components/modules/Profile/Profile.tsx b/demos/nextjs/app/components/modules/Profile/Profile.tsx
@@ -7,7 +7,6 @@ import { useEvmNativeBalance } from '@moralisweb3/next';
 const Profile: FC = () => {
   const { data } = useSession();
   const { data: balance } = useEvmNativeBalance({ address: data?.user?.address });
-
   return (
     <div className={styles.profile}>
       <Image src="/assets/mage.svg" width={46} height={46} alt="profile" />

diff --git a/packages/codegen/src/next/generators/hooks/HooksGenerator.ts b/packages/codegen/src/next/generators/hooks/HooksGenerator.ts
@@ -20,9 +20,15 @@ export class HooksGenerator {
     return this.moduleGenerator.operations.map((operation) => {
       const hookName = getHookName(operation.name, this.module);
 
+      const urlSearchParamNames: string[] = operation.urlSearchParamNames ?? [];
+      const isPaginated = Boolean(urlSearchParamNames.includes('cursor'));
+
       return {
         type: 'add',
-        templateFile: path.join(this.dirname, 'templates/hook.ts.hbs'),
+        templateFile: path.join(
+          this.dirname,
+          isPaginated ? 'templates/hook_paginated.ts.hbs' : 'templates/hook.ts.hbs',
+        ),
         path: path.join(this.packagesFolder, `next/src/hooks/${this.module}/generated/{{ relativePath }}.ts`),
         data: {
           names: {

diff --git a/packages/codegen/src/next/generators/hooks/templates/hook.ts.hbs b/packages/codegen/src/next/generators/hooks/templates/hook.ts.hbs
@@ -1,39 +1,20 @@
-import { fetcher, NoHookParamsError } from '../../../../utils';
 import { 
   {{ names.operation }} as operation, 
-  {{ names.request }}, 
-  {{ names.response }} 
+  {{ names.request }},
 } from '{{ names.commonUtils }}';
 import { FetchParams } from '../../../types';
-import { useCallback } from 'react';
-import Moralis from 'moralis';
-import useSWR from 'swr';
+import { useResolver } from '../../../resolvers';
 
 export const {{ names.hook }} = (
   request?: {{ names.request }}, 
   fetchParams?: FetchParams,
 ) => {
-  const endpoint = '{{ url }}';
-  const { deserializeResponse, serializeRequest } = operation;
-
-  const { data, error, mutate, isValidating } = useSWR<{{ names.response }}>(
-    [endpoint, request ? { deserializeResponse, request: serializeRequest(request, Moralis.Core) } : null], 
-    fetcher, 
-    { revalidateOnFocus: false, ...fetchParams }
-  );
-
-  const fetch = useCallback((params?: {{ names.request }}) => {
-    const fetchRequest = params ?? request;
-    if (!fetchRequest) {
-      throw new NoHookParamsError('useEvmNativeBalance');
-    }
-    return mutate(
-      fetcher(endpoint, {
-        deserializeResponse,
-        request: serializeRequest(fetchRequest, Moralis.Core),
-      }),
-    );
-  }, []);
+  const { data, error, fetch, isFetching } = useResolver({
+    endpoint: '{{ url }}',
+    operation,
+    request,
+    fetchParams,
+  });
 
   return {
     data,
@@ -43,10 +24,10 @@ export const {{ names.hook }} = (
      * @deprecated use `fetch()` instead
      */
     refetch: () => fetch(),
-    isFetching: isValidating,
+    isFetching,
     /**
      * @deprecated use `isFetching` instead
      */
-    isValidating,
+    isValidating: isFetching,
   };
 };
diff --git a/packages/codegen/src/next/generators/hooks/templates/hook_paginated.ts.hbs b/packages/codegen/src/next/generators/hooks/templates/hook_paginated.ts.hbs
@@ -0,0 +1,37 @@
+import { 
+  {{ names.operation }} as operation, 
+  {{ names.request }},
+} from '{{ names.commonUtils }}';
+import { FetchParams } from '../../../types';
+import { useResolverPaginated } from '../../../resolvers';
+
+export const {{ names.hook }} = (
+  request?: {{ names.request }}, 
+  fetchParams?: FetchParams,
+) => {
+  const { data, error, fetch, isFetching } = useResolverPaginated({
+    endpoint: '{{ url }}',
+    operation,
+    request,
+    fetchParams,
+  });
+
+  return {
+    data: data?.data,
+    cursor: data?.cursor,
+    page: data?.page,
+    pageSize: data?.pageSize,
+    total: data?.total,
+    error,
+    fetch,
+    /**
+     * @deprecated use `fetch()` instead
+     */
+    refetch: () => fetch(),
+    isFetching,
+    /**
+     * @deprecated use `isFetching` instead
+     */
+    isValidating: isFetching,
+  };
+};
diff --git a/packages/codegen/src/next/types.ts b/packages/codegen/src/next/types.ts
@@ -1,6 +1,6 @@
 import { Operation } from '@moralisweb3/common-core';
 
 export type UnknownOperation = Operation<unknown, unknown, unknown, unknown>;
-export type OperationAction = Pick<UnknownOperation, 'name' | 'groupName' | 'method' | 'id'>;
+export type OperationAction = Pick<UnknownOperation, 'name' | 'groupName' | 'method' | 'id' | 'urlSearchParamNames'>;
 
 export type Module = 'evmApi' | 'solApi' | 'auth';
diff --git a/packages/next/src/hooks/auth/useAuthRequestChallengeEvm.ts b/packages/next/src/hooks/auth/useAuthRequestChallengeEvm.ts
@@ -1,49 +1,29 @@
-import {
-  requestChallengeEvmOperation as operation,
-  RequestChallengeEvmRequest,
-  RequestChallengeEvmResponse,
-} from '@moralisweb3/common-auth-utils';
-import { fetcher } from '../../utils/fetcher';
+import { requestChallengeEvmOperation as operation, RequestChallengeEvmRequest } from '@moralisweb3/common-auth-utils';
 import { FetchParams } from '../types';
-import { useCallback } from 'react';
-import useSWR from 'swr';
+import { useResolver } from '../resolvers';
 
 export type RequestChallengeEvmRequestClient = Pick<RequestChallengeEvmRequest, 'chainId' | 'address'>;
 
 export const useAuthRequestChallengeEvm = (request?: RequestChallengeEvmRequestClient, fetchParams?: FetchParams) => {
-  const endpoint = 'auth/requestChallengeEvm';
-  const { deserializeResponse } = operation;
-
-  const { data, error, isValidating, mutate } = useSWR<RequestChallengeEvmResponse>(
-    [
-      endpoint,
-      {
-        deserializeResponse,
-        request,
-      },
-    ],
-    request ? fetcher : null,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: false,
-      ...fetchParams,
-    },
-  );
-
-  const requestChallengeAsync = useCallback((params: RequestChallengeEvmRequestClient) => {
-    return mutate(
-      fetcher(endpoint, {
-        deserializeResponse,
-        request: params,
-      }),
-    );
-  }, []);
+  const { data, error, fetch, isFetching } = useResolver({
+    endpoint: 'auth/requestChallengeEvm',
+    operation,
+    request,
+    fetchParams,
+  });
 
   return {
     challenge: data,
     error,
-    requestChallengeAsync,
-    refetch: async () => mutate(),
-    isValidating,
+    requestChallengeAsync: fetch,
+    /**
+     * @deprecated use `fetch()` instead
+     */
+    refetch: () => fetch(),
+    isFetching,
+    /**
+     * @deprecated use `isFetching` instead
+     */
+    isValidating: isFetching,
   };
 };
diff --git a/packages/next/src/hooks/auth/useAuthRequestChallengeSolana.ts b/packages/next/src/hooks/auth/useAuthRequestChallengeSolana.ts
@@ -1,52 +1,35 @@
 import {
   requestChallengeSolanaOperation as operation,
   RequestChallengeSolanaRequest,
-  RequestChallengeSolanaResponse,
 } from '@moralisweb3/common-auth-utils';
-import { fetcher } from '../../utils/fetcher';
 import { FetchParams } from '../types';
-import { useCallback } from 'react';
-import useSWR from 'swr';
+import { useResolver } from '../resolvers';
 
 export type RequestChallengeSolanaRequestClient = Pick<RequestChallengeSolanaRequest, 'address' | 'network'>;
 
 export const useAuthRequestChallengeSolana = (
   request?: RequestChallengeSolanaRequestClient,
   fetchParams?: FetchParams,
 ) => {
-  const endpoint = 'auth/requestChallengeSolana';
-  const { deserializeResponse } = operation;
-
-  const { data, error, isValidating, mutate } = useSWR<RequestChallengeSolanaResponse>(
-    [
-      endpoint,
-      {
-        deserializeResponse,
-        request,
-      },
-    ],
-    request ? fetcher : null,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: false,
-      ...fetchParams,
-    },
-  );
-
-  const requestChallengeAsync = useCallback((params: RequestChallengeSolanaRequestClient) => {
-    return mutate(
-      fetcher(endpoint, {
-        deserializeResponse,
-        request: params,
-      }),
-    );
-  }, []);
+  const { data, error, fetch, isFetching } = useResolver({
+    endpoint: 'auth/requestChallengeSolana',
+    operation,
+    request,
+    fetchParams,
+  });
 
   return {
     challenge: data,
     error,
-    requestChallengeAsync,
-    refetch: async () => mutate(),
-    isValidating,
+    requestChallengeAsync: fetch,
+    /**
+     * @deprecated use `fetch()` instead
+     */
+    refetch: () => fetch(),
+    isFetching,
+    /**
+     * @deprecated use `isFetching` instead
+     */
+    isValidating: isFetching,
   };
 };
diff --git a/packages/next/src/hooks/evmApi/generated/balance/useEvmNativeBalance.ts b/packages/next/src/hooks/evmApi/generated/balance/useEvmNativeBalance.ts
@@ -1,39 +1,20 @@
-import { fetcher, NoHookParamsError } from '../../../../utils';
 import { 
   getNativeBalanceOperation as operation, 
-  GetNativeBalanceRequest, 
-  GetNativeBalanceResponse 
+  GetNativeBalanceRequest,
 } from 'moralis/common-evm-utils';
 import { FetchParams } from '../../../types';
-import { useCallback } from 'react';
-import Moralis from 'moralis';
-import useSWR from 'swr';
+import { useResolver } from '../../../resolvers';
 
 export const useEvmNativeBalance = (
   request?: GetNativeBalanceRequest, 
   fetchParams?: FetchParams,
 ) => {
-  const endpoint = 'evmApi/getNativeBalance';
-  const { deserializeResponse, serializeRequest } = operation;
-
-  const { data, error, mutate, isValidating } = useSWR<GetNativeBalanceResponse>(
-    [endpoint, request ? { deserializeResponse, request: serializeRequest(request, Moralis.Core) } : null], 
-    fetcher, 
-    { revalidateOnFocus: false, ...fetchParams }
-  );
-
-  const fetch = useCallback((params?: GetNativeBalanceRequest) => {
-    const fetchRequest = params ?? request;
-    if (!fetchRequest) {
-      throw new NoHookParamsError('useEvmNativeBalance');
-    }
-    return mutate(
-      fetcher(endpoint, {
-        deserializeResponse,
-        request: serializeRequest(fetchRequest, Moralis.Core),
-      }),
-    );
-  }, []);
+  const { data, error, fetch, isFetching } = useResolver({
+    endpoint: 'evmApi/getNativeBalance',
+    operation,
+    request,
+    fetchParams,
+  });
 
   return {
     data,
@@ -43,10 +24,10 @@ export const useEvmNativeBalance = (
      * @deprecated use `fetch()` instead
      */
     refetch: () => fetch(),
-    isFetching: isValidating,
+    isFetching,
     /**
      * @deprecated use `isFetching` instead
      */
-    isValidating,
+    isValidating: isFetching,
   };
 };
diff --git a/packages/next/src/hooks/evmApi/generated/block/useEvmBlock.ts b/packages/next/src/hooks/evmApi/generated/block/useEvmBlock.ts
@@ -1,39 +1,20 @@
-import { fetcher, NoHookParamsError } from '../../../../utils';
 import { 
   getBlockOperation as operation, 
-  GetBlockRequest, 
-  GetBlockResponse 
+  GetBlockRequest,
 } from 'moralis/common-evm-utils';
 import { FetchParams } from '../../../types';
-import { useCallback } from 'react';
-import Moralis from 'moralis';
-import useSWR from 'swr';
+import { useResolver } from '../../../resolvers';
 
 export const useEvmBlock = (
   request?: GetBlockRequest, 
   fetchParams?: FetchParams,
 ) => {
-  const endpoint = 'evmApi/getBlock';
-  const { deserializeResponse, serializeRequest } = operation;
-
-  const { data, error, mutate, isValidating } = useSWR<GetBlockResponse>(
-    [endpoint, request ? { deserializeResponse, request: serializeRequest(request, Moralis.Core) } : null], 
-    fetcher, 
-    { revalidateOnFocus: false, ...fetchParams }
-  );
-
-  const fetch = useCallback((params?: GetBlockRequest) => {
-    const fetchRequest = params ?? request;
-    if (!fetchRequest) {
-      throw new NoHookParamsError('useEvmNativeBalance');
-    }
-    return mutate(
-      fetcher(endpoint, {
-        deserializeResponse,
-        request: serializeRequest(fetchRequest, Moralis.Core),
-      }),
-    );
-  }, []);
+  const { data, error, fetch, isFetching } = useResolver({
+    endpoint: 'evmApi/getBlock',
+    operation,
+    request,
+    fetchParams,
+  });
 
   return {
     data,
@@ -43,10 +24,10 @@ export const useEvmBlock = (
      * @deprecated use `fetch()` instead
      */
     refetch: () => fetch(),
-    isFetching: isValidating,
+    isFetching,
     /**
      * @deprecated use `isFetching` instead
      */
-    isValidating,
+    isValidating: isFetching,
   };
 };
Title	Statements	Branches	Functions
api-utils	26.34% (49/186)	19.14% (9/47)	22.85% (8/35)
auth	92.77% (77/83)	81.81% (18/22)	90% (18/20)
evm-api	100% (80/80)	66.66% (6/9)	100% (48/48)
common-evm-utils	64.99% (947/1457)	19.43% (123/633)	35.8% (203/567)
sol-api	96.66% (29/30)	66.66% (6/9)	91.66% (11/12)
common-sol-utils	73.77% (135/183)	60% (12/20)	65.67% (44/67)
common-streams-utils	93.13% (787/845)	85.96% (196/228)	84.14% (276/328)
streams	86.82% (402/463)	67.6% (48/71)	84.52% (71/84)