xxxxxxxxxx
npm i @tanstack/react-query
// react query
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
// react query
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
import { useQuery } from "react-query";
import axios from "axios";
const { isLoading, error, data } = useQuery("data", () =>
axios.get("https://jsonplaceholder.typicode.com/users/")
);
if (isLoading) return "Loading...";
console.log(data);
if (error) return "An error has occurred: " + error.message;
xxxxxxxxxx
// new way for query after tanstack-query update
const customerQuery = useQuery({
queryKey: ['customer']
queryFn: () =>
fetchCustomer(params.customerId as string),
});
xxxxxxxxxx
import { useQuery } from 'react-query';
const MyComponent = () => {
const { data, isLoading, error } = useQuery('myData', () =>
fetch('https://api.example.com/data', {
// Enable caching for 5 minutes
cacheTime: 5 * 60 * 1000,
}).then((res) => res.json())
);
if (isLoading) {
return <div>Loading</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
{/* Display the fetched data */}
{data && (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
);
};
xxxxxxxxxx
npm i @tanstack/react-query @tanstack/react-query-devtools && npm i -D @tanstack/eslint-plugin-query
//create seperate provider if using nextjs 14 app directory
//lib/ReactQueryProvider.tsx
"use client";
import React, { useEffect, useState } from "react";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
type Props = {
children: React.ReactNode;
};
export default function ReactQueryProvider({ children }: Props) {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />
{children}
</QueryClientProvider>
);
}
//app/layout.tsx
import ReactQueryProvider from "@/lib/ReactQueryProvider";
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await auth();
return (
<html lang="en">
<body
>
<ReactQueryProvider>
{children}
</ReactQueryProvider>
</body>
</html>
);
}