**./lib/providers.tsx **
```
"use client";

import React, { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

export default function Providers({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        staleTime: 60 * 1000,
                    },
                },
            })
    );

    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
} 
```

**app/dashboard/dashboard.tsx**
```
"use client";

import { columns } from "./columns";
import { TStock } from "@/types";
import { DataTable } from "./data-table";
import { useQuery } from "@tanstack/react-query";
import axiosClient from "@/lib/axiosClient";

export default function Dashboard() {
    const { data: stock, isSuccess } = useQuery<TStock[]>({
        queryKey: ["stock"],
        queryFn: async (): Promise<TStock[]> =>
            await axiosClient
                .get("/api/stock")
                .then((response) => response.data)
                .catch((error) => console.error(error)),
    });

    return (
        <div className="container px-0 py-10">
            {isSuccess && <DataTable columns={columns} data={stock} />}
        </div>
    );
}
```

**/app/dashboard/page.tsx**
```
import {
    dehydrate,
    HydrationBoundary,
    QueryClient,
} from "@tanstack/react-query";
import Dashboard from "./dashboard";
import axiosClient from "@/lib/axiosClient";
import { TStock } from "@/types";

export default async function DashboardPage() {
    const queryClient = new QueryClient();

    await queryClient.prefetchQuery({
        queryKey: ["stock"],
        queryFn: async (): Promise<TStock[]> =>
            await axiosClient
                .get("/api/stock")
                .then((response) => response.data)
                .catch((error) => console.error(error)),
    });

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <Dashboard />
        </HydrationBoundary>
    );
}
```