Tanstack查询的安装和使用（以前是反应查询）

<code class="bash">npm install @tanstack/react-query</code>

<code class="bash">yarn add @tanstack/react-query</code>

<code class="bash">npm install @tanstack/react-query-devtools</code>

<code class="javascript">import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* 可选：添加开发者工具 */}
      <ReactQueryDevtools initialIsOpen={false} /> 
    </QueryClientProvider>
  );
}</code>

<code class="javascript">import { useQuery } from '@tanstack/react-query';

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  return response.json();
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>错误：{error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}</code>

<code class="javascript">import { useMutation } from '@tanstack/react-query';

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

function CreatePostForm() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: '新文章', body: '文章内容' })}>
      创建文章
    </button>
  );
}</code>

<code class="javascript">const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  return response.json();
};</code>