Implement fetch() wrapper to get correct type in DataState, instead of any or Response

Author: davidde

src/components/content/block-page/index.tsx

@@ -51,7 +51,7 @@ export default function BlockPage(props: { network: string }) {
         setFinalizedError(error);
       }
       try {
-        const res = await fetch(blockRewardUrl);
+        const res = await fetch(blockRewardUrl!);
         if (!res.ok) throw new Error(`Response NOT OK, status: ${res.status}`);
         const data = await res.json();
         if (!data.result.blockReward) throw new Error('Block reward missing from response.');

src/components/content/gastracker-page/index.tsx

@@ -4,12 +4,12 @@ import { ChartBarIcon } from '@heroicons/react/24/outline';
 import GastrackerCard from './gastracker-card';
 import BreakMobile from '@/components/common/break-mobile';
 import PageWrapper from '@/components/common/page-wrapper';
-import { useDataState } from '@/lib/data-state';
+import { fetchJson, useDataState } from '@/lib/data-state';
 
 
 export default function GastrackerPage() {
   const pricesData = useDataState<any>({
-    fetcher: (url) => fetch(url),
+    fetcher: (url) => fetchJson(url),
     args: ['https://eth.blockscout.com/api/v2/stats'],
   });
 

src/components/content/home-page/blocks/block-reward.tsx

@@ -1,18 +1,23 @@
-import { useDataState, useArgs } from '@/lib/data-state';
+import { useDataState, fetchJson } from '@/lib/data-state';
 import { getBlockRewardUrl, getEtherValueFromWei } from '@/lib/utilities';
 import LoadingPulse from '@/components/common/indicators/loading-pulse';
 import LoadingPulseStatic from '@/components/common/indicators/loading-pulse-static';
 import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
 import ValueWithRefetch from '@/components/common/indicators/value-with-refetch';
+import { BigNumber } from 'alchemy-sdk';
 
 
+type BlockRewardData = {
+  blockReward: BigNumber,
+};
+
 export default function BlockReward(props: {
   id: number,
   network: string,
   blockNumber?: number,
 }) {
-  const blockRewardData = useDataState<any>({
-    fetcher: (url) => fetch(url),
+  const blockRewardData = useDataState<BlockRewardData, [string?]>({
+    fetcher: (url) => fetchJson(url!),
     args: [getBlockRewardUrl(props.network, props.blockNumber)],
   });
 
@@ -21,7 +26,7 @@ export default function BlockReward(props: {
 
   let errorFallback = <ErrorWithRefetch refetch={blockRewardData.fetch} />;
   // Latest Block often doesn't have a reward yet:
-  if (props.id === 0 && blockRewardData.error && blockRewardData.error.message === 'Empty response') {
+  if (props.id === 0 && blockRewardData.error && blockRewardData.error.message === 'Empty json response') {
     errorFallback = <ValueWithRefetch refetch={blockRewardData.fetch} value='TBD'/>;
   }
 

src/components/content/home-page/blocks/index.tsx

@@ -18,7 +18,7 @@ export default function Blocks(props: {
           <ErrorWithRefetch
             error='Error getting latest block'
             className='pl-4 py-2'
-            refetch={props.latestBlockData.refetch}
+            refetch={props.latestBlockData.fetch}
           />
           :
           [...Array(5)].map((_, i) =>

src/components/content/home-page/stats/index.tsx

@@ -9,18 +9,31 @@ import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import StatCard from './stat-card';
 import { getGasPriceGwei, getGasPriceUsd } from '@/lib/utilities';
-import { useDataState, useArgs, DataState } from '@/lib/data-state';
+import { useDataState, DataState, fetchJson } from '@/lib/data-state';
 
 
+type EthSupplyData = {
+  available_supply: string;
+}
+
+type PricesAndTxsData = {
+  coin_price: string;
+  gas_prices: {
+    average: number;
+  };
+  transactions_today: string;
+  total_transactions: string;
+}
+
 export default function Stats() {
-  const ethSupplyData = useDataState<any>({
-    fetcher: (url) => fetch(url),
+  const ethSupplyData = useDataState<EthSupplyData, [string]>({
+    fetcher: (url) => fetchJson(url),
     args: ['https://eth.blockscout.com/api/v2/stats/charts/market'],
   });
   const ethSupply = ethSupplyData.value ? +ethSupplyData.value.available_supply : undefined;
 
-  const pricesAndTxsData = useDataState<any>({
-    fetcher: (url) => fetch(url),
+  const pricesAndTxsData = useDataState<PricesAndTxsData, [string]>({
+    fetcher: (url) => fetchJson(url),
     args: ['https://eth.blockscout.com/api/v2/stats'],
   });
 

src/components/content/home-page/stats/stat-card.tsx

@@ -23,7 +23,7 @@ export default function StatCard<T>(props: {
         <div className='pl-12'>
           <props.dataState.Render
             value={props.value}
-            errorFallback={<ErrorWithRefetch refetch={props.dataState.refetch} />}
+            errorFallback={<ErrorWithRefetch refetch={props.dataState.fetch} />}
           />
         </div>
       </div>

src/lib/data-state.tsx

@@ -172,39 +172,40 @@ export function useDataState<T, A extends any[] = any[]>(
 // and attaches it to the DataState's internal DataRoot value that is
 // tracked and updated with `useState`:
 function useFetcher<T, A extends any[] = any[]>(
-  fetcher: (...args: A) => Promise<T>,
+  fetcher: (...args: A) => Promise<T> | Response,
   args: A,
   setRoot: Dispatch<SetStateAction<DataRoot<T>>>,
-): () => Promise<any> {
+): () => Promise<T | undefined> {
   return useCallback(async () => {
     // console.log('Fetch triggered with args: ', args);
     // Skip fetching if one of the arguments is still undefined:
     if (args?.some(arg => arg === undefined)) return;
 
-    let response;
-
     try {
-      response = await fetcher(...args);
-      // console.log('response = ', response);
-
-      // If the function is fetch, call `.json()`:
-      if (response instanceof Response) {
-        if (!response.ok) throw new Error(`Fetch response NOT OK, status: ${response.status}`);
-        const json = await response.json();
-        if ('result' in json) response = json.result;
-        else response = json;
-      }
+      let response = await fetcher(...args);
       if (!response) throw new Error('Empty response');
-      setRoot(DataState.value(response));
+
+      const typedResponse = response as T;
+      setRoot(DataState.value(typedResponse));
+      return typedResponse;
     } catch (err) {
       setRoot(DataState.error(err));
     }
-
-    // console.log('response = ', response);
-    return response;
   }, [fetcher, args, setRoot]);
 }
 
+// To be used as a wrapper for fetch() inside useDataState inline fetcher definition:
+// (This allows the types to match with the DataState's, instead of returning a fetch Response type)
+export async function fetchJson<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Fetch failed, status: ${response.status}`);
+  const json = await response.json();
+  const result = 'result' in json ? json.result : json;
+  if (!result) throw new Error('Empty json response');
+
+  return result as T;
+}
+
 // Hook that memoizes the argument array to prevent a new array
 // from being created on every render:
 // (For inline use in `useDataState()` or `DataState.Init()` calls)