Skip to main content

Create a Tanstack Query Hook

Getting Started with Tanstack Query​

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

Might turn out to be a wise tip

You can watch through whole document of React Query find out what you want! or just pick g-uncode and start firing all cylinders

Lets install Tanstack-Query​

npm i @tanstack/react-query

Lets jump into make a custom hook and reusable component with Tanstack Query​

A Summary of files needs to be created under src/ to fulfill the custom hook and reusable component:

  • src/pages/Query.tsx → localhost:3000/query
  • src/types.ts → Type constants
  • src/components/dataFetcher/DataFetcher.tsx → Reusable Component (U should make unique Component according to fetch item)
Example

For fetching a country api, you can name the component as CountryFetcher.tsx

  • src/components/dataFetcher/DataList.tsx → Reusable Component (U should make unique Component according to fetch item)
Example

For fetching a country api, you can name the component as CountryList.tsx

  • src/hooks/useFetch.ts → Function where the actual functionality of React-Query is managed.

Create your first root query Page​

Create a file at src/pages/:

src/pages/Query.tsx
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import DataFetcher from "../components/dataFetcher/DataFetcher";

const url = "Required Api URL";
const queryClient = new QueryClient();

const Query = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <DataFetcher url={url} keyword="country" />
    </QueryClientProvider>
  );
};

export default Query;

A new page is now available at http://localhost:3000/Query.

Create your first Component​

Create a file at src/components/dataFetcher:

src/components/dataFetcher/DataFetcher.tsx
import React from "react";
import { useFetch } from "@site/src/hooks/useFetch";
import { Country } from "@site/src/types";
import DataList from "./DataList";

interface DataFetcherProps {
  url: string;
  keyword: string;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ url, keyword }) => {
  const { data, isError, isLoading } = useFetch<Country[]>(url, keyword);

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

  if (isError) {
    return <div>Error loading data</div>;
  }

  return <DataList data={data ?? []} />;
};

export default DataFetcher;

Create your first custom hook​

Create a file at src/hooks/:

src/hooks/useFetch.ts
import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export const useFetch = <T>(url: string, keyword: string) => {
  return useQuery<T>({
    queryKey: [{ keyword }, url],
    queryFn: async (): Promise<T> => {
      try {
        const result = await axios.get(url);
        return result.data;
      } catch (error: any) {
        if (error.response && error.response.status === 404) {
          return [] as unknown as T;
        } else {
          throw error;
        }
      }
    },
  });
};

Specify types​

Create a file at src/:

src/types.ts
export interface Country {
  name: {
    common: string,
    official: string,
  };
  cca3: string;
  region: string;
  subregion: string;
  population: number;
}
Example

Provided a example type interface for country api.

Show your Data list​

src/components/dataFetcher/DataList.tsx
import React from "react";
import { Country } from "@site/src/types";

interface DataListProps {
  data: Country[];
}

const DataList: React.FC<DataListProps> = ({ data }) => {
  return (
    <div>
      <h1>Data List</h1>
      <ul>
        {data.map((item, index) => (
          //   <li key={index}>{JSON.stringify(item)}</li>
          <li key={item.cca3}>
            {item.name.common} ({item.region})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DataList;