客户端数据获取与缓存

function ArticleList() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let ignore = false;            // 手动防竞态
    setLoading(true);
    fetch('/api/articles')
      .then((r) => r.json())
      .then((data) => { if (!ignore) setArticles(data); })
      .finally(() => { if (!ignore) setLoading(false); });
    return () => { ignore = true; }; // 卸载后丢弃结果
  }, []);

  // ...
}

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function UserProfile({ id }: { id: string }) {
  const { data, error, isLoading, mutate } = useSWR<User>(`/api/users/${id}`, fetcher);

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage message={error.message} />;

  return (
    <div>
      <h1>{data!.name}</h1>
      {/* 手动触发重新验证 */}
      <button onClick={() => mutate()}>刷新</button>
    </div>
  );
}

import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) => fetch(url).then((r) => r.json()),
        revalidateOnFocus: false,   // 窗口重新聚焦时不再自动验证
        dedupingInterval: 60000,    // 60 秒内相同 key 的请求直接复用
      }}
    >
      <Router />
    </SWRConfig>
  );
}

mutate();                          // 1. 重新验证：后台重取，期间旧数据继续显示
mutate(newData, false);            // 2. 只改缓存：立即替换本地数据，不发请求
await mutate(updateLocal(), { revalidate: true }); // 3. 乐观更新：先本地改，再重取对齐

function CommentBox({ articleId }: { articleId: string }) {
  const { data: comments, mutate } = useSWR<Comment[]>(
    [`/api/comments`, articleId],
    ([url, id]) => fetch(`${url}?article=${id}`).then((r) => r.json()),
  );
  const [text, setText] = useState('');

  const submit = async () => {
    const optimistic: Comment = { id: `temp-${Date.now()}`, text, pending: true };

    // 第一步：先改本地缓存，界面立刻出现这条评论（乐观）
    await mutate([...(comments ?? []), optimistic], false);

    try {
      await fetch('/api/comments', {
        method: 'POST',
        body: JSON.stringify({ articleId, text }),
      });
      // 第二步：服务器确认后重新验证，拿到真实数据（含真实 id）
      await mutate();
    } catch {
      // 第三步：失败回滚——重新验证会把临时条目冲掉
      await mutate();
      alert('发送失败，请重试');
    }
    setText('');
  };

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={submit}>发送</button>
      <ul>
        {comments?.map((c) => (
          <li key={c.id} style={{ opacity: c.pending ? 0.5 : 1 }}>{c.text}</li>
        ))}
      </ul>
    </div>
  );
}

import { QueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
  );
}

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then((r) => r.json()),
    staleTime: 5 * 60 * 1000, // 5 分钟内缓存视为新鲜，不重新获取
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage />;

  return (
    <ul>
      {data.map((user: User) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

function CreateUser() {
  const mutation = useMutation({
    mutationFn: (newUser: { name: string; email: string }) =>
      fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser),
      }).then((r) => r.json()),
    onSuccess: () => {
      // 声明式失效：所有 queryKey 以 ['users'] 开头的缓存标记为过期，
      // 挂载中的组件立即自动重新获取
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    mutation.mutate({
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" />
      <input name="email" />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? '创建中...' : '创建'}
      </button>
    </form>
  );
}

import { useInfiniteQuery } from '@tanstack/react-query';

function ArticleFeed() {
  const query = useInfiniteQuery({
    queryKey: ['articles'],
    queryFn: ({ pageParam }) =>
      fetch(`/api/articles?cursor=${pageParam}`).then((r) => r.json()),
    initialPageParam: 0,
    // 返回下一页游标；没有下一页时返回 undefined
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  if (query.isLoading) return <Spinner />;
  if (query.isError) return <ErrorMessage />;

  return (
    <div>
      {query.data.pages.map((page, i) => (
        <ul key={i}>
          {page.items.map((a: Article) => (
            <li key={a.id}>{a.title}</li>
          ))}
        </ul>
      ))}
      <button
        disabled={!query.hasNextPage || query.isFetchingNextPage}
        onClick={() => query.fetchNextPage()}
      >
        {query.isFetchingNextPage ? '加载中...' : '加载更多'}
      </button>
    </div>
  );
}

function SearchBox() {
  const [keyword, setKeyword] = useState('');
  const debounced = useDebounce(keyword, 300); // 输入防抖（自写或 usehooks-ts）

  const { data: suggestions, isFetching } = useQuery({
    queryKey: ['suggest', debounced],
    queryFn: () => fetch(`/api/suggest?q=${encodeURIComponent(debounced)}`).then((r) => r.json()),
    enabled: debounced.length >= 2,   // 太短不请求
    placeholderData: (prev) => prev,  // 换词时保留上一个词的结果，避免列表闪烁
  });

  return (
    <div>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      {isFetching && <span>搜索中</span>}
      <ul>{suggestions?.map((s: string) => <li key={s}>{s}</li>)}</ul>
    </div>
  );
}