前端缓存？！为什么你应该在下一个项目中尝试 TanStack Query？

Jetbrains 中国

一、什么是 TanStack Query？

TanStack Query 是一个强大的数据获取库，它解决了客户端状态和服务器状态之间的鸿沟。它不是状态管理库的替代品，而是专门为异步数据管理而设计的工具。

二、核心优势

2.1 极简的数据获取

即获取了数据，还缓存了数据，减轻了后台访问压力！

// 获取角色列表（分页） 同时缓存了5分钟
export const useRolePage = (paramsRef) => {
    return useQuery({
        queryKey: computed(() => ["sysRolePage", paramsRef.value]),
        queryFn: () => roleApi.page(paramsRef.value),
        // 缓存时间5分钟
        staleTime: 5 * 60 * 1000,
        // 翻页时保持上一次数据
        keepPreviousData: true
    })
}

// 获取全部角色列表
export const useRoleAll = () => {
    return useQuery({
        queryKey: ["sysRoleAll"],
        queryFn: () => roleApi.all(),
        // 缓存时间5分钟
        staleTime: 5 * 60 * 1000,
    })
}

2.2 智能缓存和背景更新

TanStack Query 自动缓存数据，并在多个组件使用相同查询时共享缓存。当数据过期时，它会在后台自动更新，用户无感知。

增删改查会自动触发invalidateRoleCaches ，从而前端自动请求最新数据进行缓存！

export const useSysRoleMutations = () => {
    const queryClient = useQueryClient()

    // 缓存失效统一方法
    const invalidateRoleCaches = async (id) => {
        // 刷新分页列表（可选全量刷新）
        await queryClient.invalidateQueries({queryKey: ['sysRolePage'], exact: false});
        // 刷新全部角色列表
        await queryClient.invalidateQueries({queryKey: ['sysRoleAll'], exact: false});
        // 刷新单条角色详情（如果提供了 id）
        if (id) {
            await queryClient.invalidateQueries({queryKey: ['sysRoleById', id]});
        }
    };

    // create
    const create = useMutation({
        mutationFn: (data) => roleApi.create(data),
        onSuccess: async () => {
            await invalidateRoleCaches();
        },
    });

    // update
    const update = useMutation({
        mutationFn: (data) => roleApi.update(data),
        onSuccess: async (_, data) => {
            await invalidateRoleCaches(data.id);
        },
    });

    // delete /{id}
    const deleteById = useMutation({
        mutationFn: (id) => roleApi.delete(id),
        onSuccess: async (_, id) => {
            await invalidateRoleCaches(id);
        },
    });

    // 批量删除
    const deleteBatch = useMutation({
        mutationFn: (ids) => roleApi.deleteBatch(ids),
        onSuccess: async () => {
            await invalidateRoleCaches();
        },
    });
    return {create, update, deleteById, deleteBatch}
}

2.3 内置乐观更新

提供流畅的用户体验

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    // 取消正在进行的重新获取
    await queryClient.cancelQueries({ queryKey: ['todos'] })
    
    // 保存当前状态的快照
    const previousTodos = queryClient.getQueryData(['todos'])
    
    // 乐观更新
    queryClient.setQueryData(['todos'], old => [...old, newTodo])
    
    return { previousTodos }
  },
  onError: (err, newTodo, context) => {
    // 出错时回滚
    queryClient.setQueryData(['todos'], context.previousTodos)
  }
})

"少写代码，多创造价值——TanStack Query 正是这样一个让你事半功倍的神器！"
"用过都说好！"

重复过往

好！

Jetbrains 中国

@重复过往你是懂水贴的，啊哈哈

百得社区