TanStack Query

What is Tanstack query?

মূলত এটির মাধ্যমে আমরা Data fetch করতে পারি।

1. আমরা সাধারণত ডাটা fetch করার জন্য,

• useEffect() অথবা useLoaderData()

ব্যবহার করে থাকি।

2. useEffect() method এর পরিবর্তে আমরা Tanstack qyery এর দুটি method ব্যবহার করতে পারি।

   • useQuery()

   • useMutation()

3. useQuery() method এর মাধ্যমে আমরা

   • isLoading , isError , data

     খুরব সহজেই ব্যবহার করতে পারি।

Step 1: Install Tanstack Query

প্রথমেই আপনার প্রজেক্ট directory তে গিয়ে terminal টি open করে নিজের কমান্ড টি terminal এ run করে tanstack quey প্যাকেজটি আপনার প্রকেক্টে install করে নিতে হবে।

npm i @tanstack/react-query

Step 2: Setup Tanstack Query

• আপনার react project এর index.js অথবা main.js ফাইলে নিচের মতো করে QueryClient ও QueryClientProvider import করতে হবে।

    import {
      QueryClient,
      QueryClientProvider,
    } from '@tanstack/react-query'
  

• যেখানে main function render হয়েছে তার উপরে QueryClient নিচের মতো লিখতে হবে।

    const queryClient = new QueryClient();
  

• এখন main component কে QueryClientProvider দ্বারা wrap করতে হবে নিজে মাতো

    <QueryClientProvider client={queryClient}>
          <AuthProvider>
            <RouterProvider router={routes} />
          </AuthProvider>
          <Toaster />
    </QueryClientProvider>
  

উদাহরণসরূপ main.jsx সম্পূর্ণ কোডটি নিচে দেয়া হলো।

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";
import { RouterProvider } from "react-router-dom";
import routes from "./routes/index.jsx";
import AuthProvider from "./providers/AuthProvider";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <RouterProvider router={routes} />
      </AuthProvider>
      <Toaster />
    </QueryClientProvider>
  </React.StrictMode>
);

Step 3: Use Tanstack Query

যেখানে আরা tanstack query ব্যবহার করবো, সেখানে আমরা useQuery() এবং useMutation() method ব্যবহার করে data fetch করতে পরি।

useQuery() ব্যবহার

ধরা যাক,

• আমাদের একটি component এর নাম services.jsx

• আমরা এখানে ডাটা fetch করবো।

তাহলে নিচের কোডের মতো code লিখবো।

import { useQuery } from "@tanstack/react-query";
import useAxios from "../hooks/useAxios";

const [category, setCategory] = useState("");
const [price, setPrice] = useState("");
const [page, setPage] = useState(1);

const axios = useAxios();
// function এর মাধ্যমে ডাটা fetch করা হচ্ছে
const getServices = async () => {
    const res = await axios.get(
      `/services/`
    );
    return res;
};
  const {data: services, isLoading, isError}= useQuery({
    queryKey: ["service", price, category, page],
    queryFn: getServices,
  });

1. এখানে প্রথমে useQuery() কে import করা হয়েছে।

2. useQuery() কে call করা হয়েছে যা একটি object গ্রহণ করে। সেই object এ ২ টি properties নিয়ে থাকে
   queryKey: ["service"]
queryFn: getServices

queryKey কোন একটি key এর নাম দিতে হবে
queryFn এ একটি function এর নাম দিতে হবে। এই function একটি ডাকা fetch করে তা return করে দিবে।

3. যা পরবর্তীতে {data: services} এর মাধ্যমে আমরা Data টি পেতে পারি।

তাছাড়া আমরা এখানে isLoading, isError পাবো যার মাধ্যমে আমরা loading এবং error দেখাতে পারি।