React ??(TanStack ??): React? ?? ??? ??? ???? ? ?? ?? ?????

React Query(?? TanStack Query?? ?)? React ??????? ?? ?? ?? ?? ??? ???? ? ?? ?? ????????. ??? ????, ??, ??? ? ??? ??? ???? ???? ?? ??? ??? ??????. React Query? API ??, ??? ?? ? ????, ?? ?? ??? ??? ?? ????? ???? ??????.

TanStack Query? ???? ???? ???? React ???????? ?? ??? ??? ? ??? ???? ?? ??? ??? ??? ? ??? ??? ??? ?????.

---

1. ??? ??(TanStack ??)? ??????

React ??? React ???????? ?? ? ???? ?? ???? ????? ????? ? ??? ?? ??? ???? ? ?? ?? ?????. ??? ????, ??, ??? ? ????? ????? ????? ?????.

?? REST API, GraphQL ?? ?? ??? ??? ???? ?? ?? ??? API?? ???? ???? ???? ?? ??? ???? ? ?????.

?? ??:

• ?? ??: React Query? ??? ???? ???? ????? ?? ???? ?? ?? ?? ???? ? ??? ??? ? ????.
• ?? ???: ???? ??? ?? ????? ?? ?? ???? ???? ?????? ?? ?? ??? ???? ?????.
• ????? ????: React Query? ???? ?? ?? ???? ??? ? ??? ??????? ???? ???? ?? ??? ? ????.
• ?? ? ??? ??: React Query? ????? ?? ? ??? ??? ????? ??? ???? ??? ??????.

---

2. React Query? ?? ??

1. ??

React Query? ??? ??(?? ?? ??? ??)?? ???? ???? ? ?????. ??? React ??? ???? ???? ???? ? ???? ?? ?? ?????.

?:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

const Posts = () => {
  const { data, error, isLoading } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching posts</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• useQuery ??? fetchPosts ??? ???? ???? ?????. ??? ???? ?? ??? React Query? ??? ???? ? ? ??? ?????.

2. ????

??? ???? ???? ????? ???? ? ?????(?: POST, PUT, DELETE ??). ??? ????? ??? ??? ? ??? ???? ?? ? ??? ???? ????? ? ????.

?:

import { useMutation } from 'react-query';

function createPost(postData) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: { 'Content-Type': 'application/json' },
  }).then((response) => response.json());
}

const NewPost = () => {
  const mutation = useMutation(createPost);

  const handleCreatePost = async () => {
    await mutation.mutate({ title: 'New Post', body: 'This is a new post' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading ? <p>Creating post...</p> : null}
      {mutation.isError ? <p>Error creating post</p> : null}
      {mutation.isSuccess ? <p>Post created!</p> : null}
    </div>
  );
};

• useMutation ??? ??? ??, ????, ??? ?? ??? ?????.

3. ??

React Query? ?? ??? ???? ?????. ? ??? ???? ??? ??? ???? ??? ?? ?? ??? ??? ? ????. ??? ???? ??? ?? ???? ???? ???????.

?? ??? ????? ??? ??(??? ???? ??? ??? ???? ??)? ???? ? ?? ??? ?? ?? ??? ????? ? ????.

?:

const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
  cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});

4. ??? ??

React Query? ??? ??? ????? ?????. ??? ?? ??? ? ?? ????? ???? ???? ??? ???? ??? ? ??? ??? ???? ?????.

?:

const fetchPage = (page) => fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
  .then((res) => res.json());

const PaginatedPosts = () => {
  const [page, setPage] = React.useState(1);
  const { data, isLoading, isError } = useQuery(['posts', page], () => fetchPage(page));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((prev) => prev + 1)}>Next</button>
    </div>
  );
};

• useQuery ??? ???? ??? ???? ???? ?? ?? ?(['posts', page])? ?? ?????.

---

3. React Query(TanStack Query) ?? ? ??

React Query? ????? ?? ??(TanStack Query)? ???? ???.

npm install react-query

1. React ?? ??? ??

???????? React Query? ?????? QueryClientProvider?? ?? ?? ??? ???? ?? ?? ??? ????? ???? ???.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
  </QueryClientProvider>
);

• QueryClient? React Query? ?? ?????. ?? ?? ??? ??? ?????.

---

4. React Query? ?? ??

1. ??? ?? ? ?? ??

React Query? useInfiniteQuery? ???? ??? ??? ?? ???? ????? ??? ??? ??? ??? ??? ? ????.

?:

import { useInfiniteQuery } from 'react-query';

function fetchPostsPage({ pageParam = 1 }) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
    .then((res) => res.json());
}

const InfinitePosts = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPostsPage, {
    getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
  });

  return (
    <div>
      {isLoading ? <div>Loading...</div> : null}
      {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 ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  );
};

2. ?? ???

queryClient.invalidateQueries? ???? ??? ???? ???? ? ????. ??? ??? ?? ?? ?? ???? ??? ?? ?????.

?:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

const Posts = () => {
  const { data, error, isLoading } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching posts</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• ??? ?? ? ???? ??? ? ??? ??? ???? ?? ???? ???.

---

5. React Query ??? ??

1. ???? ??? ????

React ??? ??, ?? ? ?? ?? ??? ?? ???? ?? ??? ????? ? ?? ????? ????.

2. ?? ??

??? ???? ????? ???? ???? ???? ??? ??? ? ??? ????.

3. ?? ????

React Query? ????? ??? ???? ??? ???? ? ???? ????? ?? ???? ??? ?? ??? ?????.

4. ??? ??? ?? ? ?? ??

React Query? ??? ??? ???? ??? ??? ?? ???? ???? ????? ??? ? ????.

5. ???? ?? DevTools

React Query? ??, ?? ? ?? ??? ????? ??? ? ?? ??? DevTools ?????? ?????.

---

**6. ??

**

React ??(TanStack Query)? React ???????? ??? ???? ? ?? ??? ???? ????? ?? ??? ??? ?????. ??? ??, ????? ????, ??? ?? ? ?? ?? ??? ?? React Query? ?? ? ???? ?? ???? ?? ??? ? ??? ????.

---

? ??? React ??(TanStack ??): React? ?? ???? ??? ???? ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!