Data Fetching

Fetch data with ease

458 views

Fetcher Utility

install axios

bash
pnpm add axios

add fetcher utility for GET

ts
import axios from 'axios';

type FetcherArgs = {
  url: string;
  params?: any;
};

export const fetcher = <ResType>({ url, params }: FetcherArgs) =>
  axios.get<ResType>(url, { params }).then((res) => res.data);

Data Hook with SWR

install SWR

bash
pnpm add swr

add swr hook utility

ts
import useSWR from 'swr';

type UseAppSWRArgs<ResType> = {
  url: string;
  params?: any;
  fallbackData?: ResType;
  isReady?: boolean;
};

export const useAppSWR = <ResType, ErrorType = any>({
  url,
  params,
  fallbackData,
  isReady = true,
}: UseAppSWRArgs<ResType>) => {
  const { data, error, mutate } = useSWR<ResType, ErrorType>(
    isReady ? { url, params } : null,
    fetcher,
    {
      fallbackData,
    }
  );

  return {
    data,
    isLoading: !error && !data && isReady,
    isError: error,
    mutate,
  };
};

add data hook

ts
// useMovieData.ts
export const useMovieData = (params?: any) =>
  useAppSWR({
    url: 'https://some-api-url.com/api/movies',
    params,
  });

call the data hook in the component

tsx
// SomeComponent.tsx

const SomeComponent = () => {
  const { data, isLoading } = useMovieData();

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {data.results.map((item) => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
};