ট্যানস্ট্যাক রিঅ্যাক্ট কোয়েরি চিটশিট

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
const queryClient = new QueryClient();
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}
 
export default App;

npm install @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

import { useQuery } from '@tanstack/react-query';
 
function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      return response.json();
    },
  });
 
  if (isLoading) return <p>লোড হচ্ছে...</p>;
  if (error) return <p>এরর: {error.message}</p>;
 
  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  staleTime: 5 * 60 * 1000, // ৫ মিনিট ক্যাশ ফ্রেশ
  cacheTime: 10 * 60 * 1000, // ১০ মিনিট ক্যাশে থাকবে
  refetchOnWindowFocus: true, // উইন্ডো ফোকাসে রিফেচ
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60, // ১ মিনিট
      cacheTime: 1000 * 60 * 5, // ৫ মিনিট
      retry: 3, // ৩ বার রিট্রাই
    },
  },
});

import { useMutation, useQueryClient } from '@tanstack/react-query';
 
function AddPost() {
  const queryClient = useQueryClient();
 
  const mutation = useMutation({
    mutationFn: async (newPost) => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify(newPost),
        headers: { 'Content-Type': 'application/json' },
      });
      return response.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries(['posts']); // কোয়েরি রিফ্রেশ
    },
  });
 
  const handleSubmit = () => {
    mutation.mutate({ title: 'নতুন পোস্ট', body: 'বিস্তারিত', userId: 1 });
  };
 
  return (
    <div>
      <button onClick={handleSubmit} disabled={mutation.isLoading}>
        {mutation.isLoading ? 'যোগ হচ্ছে...' : 'পোস্ট যোগ করুন'}
      </button>
      {mutation.isError && <p>এরর: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>পোস্ট যোগ হয়েছে!</p>}
    </div>
  );
}

function Post({ id }) {
  const { data, isLoading } = useQuery({
    queryKey: ['post', id],
    queryFn: async () => {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
      return response.json();
    },
    enabled: !!id, // id থাকলেই ফেচ হবে
  });
 
  if (isLoading) return <p>লোড হচ্ছে...</p>;
  return <h1>{data.title}</h1>;
}

import { useQueryClient } from '@tanstack/react-query';
 
function PostList() {
  const queryClient = useQueryClient();
 
  const invalidate = () => {
    queryClient.invalidateQueries(['posts']); // কোয়েরি রিফ্রেশ
  };
 
  const prefetch = () => {
    queryClient.prefetchQuery({
      queryKey: ['posts'],
      queryFn: fetchPosts,
    });
  };
 
  return (
    <div>
      <button onClick={invalidate}>রিফ্রেশ</button>
      <button onClick={prefetch}>প্রিফেচ</button>
    </div>
  );
}

mutation.onSuccess = (newPost) => {
  queryClient.setQueryData(['posts'], (oldData) => [...oldData, newPost]);
};

function UpdatePost() {
  const queryClient = useQueryClient();
 
  const mutation = useMutation({
    mutationFn: async (updatedPost) => {
      await fetch(`https://jsonplaceholder.typicode.com/posts/${updatedPost.id}`, {
        method: 'PUT',
        body: JSON.stringify(updatedPost),
      });
    },
    onMutate: async (updatedPost) => {
      await queryClient.cancelQueries(['posts']);
      const previousPosts = queryClient.getQueryData(['posts']);
      queryClient.setQueryData(['posts'], (old) =>
        old.map((post) => (post.id === updatedPost.id ? updatedPost : post))
      );
      return { previousPosts };
    },
    onError: (err, updatedPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });
 
  return (
    <button onClick={() => mutation.mutate({ id: 1, title: 'আপডেটেড' })}>
      আপডেট
    </button>
  );
}

import { useInfiniteQuery } from '@tanstack/react-query';
 
function InfinitePosts() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
    queryKey: ['posts', 'infinite'],
    queryFn: async ({ pageParam = 1 }) => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts?_page=${pageParam}&_limit=10`
      );
      return response.json();
    },
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length ? allPages.length + 1 : undefined;
    },
  });
 
  return (
    <div>
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </div>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'লোড হচ্ছে...' : hasNextPage ? 'পরবর্তী' : 'শেষ'}
      </button>
    </div>
  );
}

useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  retry: 3, // ৩ বার রিট্রাই
  retryDelay: (attempt) => attempt * 1000, // প্রতি রিট্রাইতে দেরি
  onError: (error) => console.error('ফেচ এরর:', error),
});

function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      return response.json();
    },
  });
}
 
function PostList() {
  const { data, isLoading } = usePosts();
  if (isLoading) return <p>লোড হচ্ছে...</p>;
  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import PostList from './PostList';
import AddPost from './AddPost';
 
const queryClient = new QueryClient();
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1 className="text-2xl">রিঅ্যাক্ট কোয়েরি অ্যাপ</h1>
      <AddPost />
      <PostList />
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}
 
export default App;

import { useQuery } from '@tanstack/react-query';
 
async function fetchPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
}
 
export default function PostList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });
 
  if (isLoading) return <p>লোড হচ্ছে...</p>;
  if (error) return <p>এরর: {error.message}</p>;
 
  return (
    <ul className="mt-4">
      {data.slice(0, 5).map((post) => (
        <li key={post.id} className="border p-2 mb-2">
          {post.title}
        </li>
      ))}
    </ul>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';
 
export default function AddPost() {
  const queryClient = useQueryClient();
 
  const mutation = useMutation({
    mutationFn: async (newPost) => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify(newPost),
        headers: { 'Content-Type': 'application/json' },
      });
      return response.json();
    },
    onSuccess: (newPost) => {
      queryClient.setQueryData(['posts'], (old) => [newPost, ...old]);
    },
  });
 
  const handleSubmit = () => {
    mutation.mutate({
      title: 'নতুন পোস্ট',
      body: 'এটি একটি নতুন পোস্ট',
      userId: 1,
    });
  };
 
  return (
    <div className="mb-4">
      <button
        onClick={handleSubmit}
        disabled={mutation.isLoading}
        className="bg-blue-500 text-white p-2 rounded"
      >
        {mutation.isLoading ? 'যোগ হচ্ছে...' : 'নতুন পোস্ট যোগ করুন'}
      </button>
      {mutation.isSuccess && <p className="text-green-500">পোস্ট যোগ হয়েছে!</p>}
      {mutation.isError && <p className="text-red-500">এরর: {mutation.error.message}</p>}
    </div>
  );
}