如何让SWR中/user/me复用/register的useSWRMutation缓存数据？

要实现注册成功后，useSWR('/user/me')直接读取注册接口返回的缓存数据而非发起请求，核心是手动将注册接口返回的用户数据同步到/user/me对应的SWR缓存中，具体实现步骤如下：

1. 在注册请求的回调中更新目标缓存 #

使用useSWRMutation的onSuccess回调，拿到注册接口返回的用户数据后，调用SWR的mutate函数，将/user/me的缓存设置为该数据，并关闭自动重新验证（避免触发不必要的GET请求）。

代码示例：注册组件 #

import { useSWRMutation } from 'swr/mutation';
import { mutate } from 'swr';

// 注册接口的fetcher函数
async function registerFetcher(url, { arg }) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  });
  return response.json(); // 返回注册成功后的用户数据
}

export function RegisterForm() {
  const { trigger } = useSWRMutation('/register', registerFetcher, {
    onSuccess: (userData) => {
      // 将注册返回的用户数据写入/user/me的缓存
      mutate('/user/me', userData, { revalidate: false });
    },
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formValues = {
      // 收集的表单数据，比如username、password等
    };
    await trigger(formValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入项 */}
      <button type="submit">注册</button>
    </form>
  );
}

2. 读取缓存的用户数据 #

在需要获取用户信息的组件中，正常使用useSWR('/user/me')即可——此时SWR会优先读取已存入的缓存数据，不会发起实际的GET请求。

代码示例：用户信息组件 #

import useSWR from 'swr';

// 用户信息接口的fetcher（仅在缓存无数据时触发）
async function userMeFetcher(url) {
  const response = await fetch(url);
  return response.json();
}

export function UserProfile() {
  const { data: user } = useSWR('/user/me', userMeFetcher);

  if (!user) return <div>加载中...</div>;
  return (
    <div>
      <h2>用户信息</h2>
      <p>用户名：{user.username}</p>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

额外说明 #

• 如果后续需要强制刷新/user/me的数据（比如用户修改信息后），只需调用mutate('/user/me')（不传入第二个参数），即可触发fetcher重新请求并更新缓存。
• 确保mutate函数是从SWR包中导入的全局方法，或者通过useSWRConfig获取的实例方法（两者效果一致）。

内容的提问来源于stack exchange，提问作者meg hidey