Next.js 13-14中能否将Server Actions作为React Query的queryFn及替代查询/突变函数？

问题1：是否可以在React Query中调用Next.js Server Actions作为queryFn？ #

完全可以。在Next.js 13-14的App Router模式下，Server Actions可以直接作为React Query的queryFn使用，这是一种兼顾服务端安全性和客户端状态管理的合理方案。

举个实际实现例子：
首先定义一个标记了'use server'的Server Action用于获取数据：

// app/actions.ts
'use server';

export async function fetchUser(userId: string) {
  // 可直接执行服务端逻辑，比如查询数据库或调用内部API
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store',
  });
  
  if (!res.ok) throw new Error('用户数据获取失败');
  return res.json();
}

然后在客户端组件中用React Query的useQuery调用这个Server Action：

// app/components/UserProfile.tsx
'use client';

import { useQuery } from '@tanstack/react-query';
import { fetchUser } from '../actions';

export default function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

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

  return <div>用户名：{data.name}</div>;
}

需要注意的点：

• Server Action必须标注'use server'指令，否则会被当作客户端函数执行引发错误
• 调用Server Action时，React Query本质是触发客户端到服务端的远程请求，Next.js会自动处理路由和安全验证
• 可充分利用React Query的缓存、重试、背景刷新等特性，结合Server Actions的服务端执行能力优化用户体验

问题2：在Next.js 13-14中使用React Query执行查询或突变时，能否用Server Actions替代实际函数？ #

当然可以，Server Actions完全可以替代普通客户端函数处理查询或突变操作，尤其适合处理敏感逻辑。

比如用Server Actions处理数据更新的例子：
先定义用于更新数据的Server Action：

// app/actions.ts
'use server';

export async function updateUser(userId: string, newData: { name: string }) {
  // 服务端侧可直接做权限校验、数据库更新等操作
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newData),
    cache: 'no-store',
  });
  
  if (!res.ok) throw new Error('用户信息更新失败');
  return res.json();
}

然后在客户端组件中用React Query的useMutation调用这个Server Action：

// app/components/EditUser.tsx
'use client';

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { updateUser } from '../actions';

export default function EditUser({ userId, currentName }: { userId: string; currentName: string }) {
  const queryClient = useQueryClient();
  const [name, setName] = useState(currentName);

  const { mutate, isPending } = useMutation({
    mutationFn: (updatedName: string) => updateUser(userId, { name: updatedName }),
    onSuccess: () => {
      // 成功后刷新对应查询的缓存
      queryClient.invalidateQueries({ queryKey: ['user', userId] });
    },
  });

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => mutate(name)} disabled={isPending}>
        {isPending ? '保存中...' : '保存'}
      </button>
    </div>
  );
}

这种方式的优势：

• 敏感逻辑（如权限校验、数据库操作）完全在服务端执行，避免客户端暴露核心业务细节，提升安全性
• 统一在Server Actions中处理API交互，减少客户端重复代码，便于维护
• 结合React Query的状态管理能力，自动处理加载、错误、缓存更新等状态，简化组件逻辑

额外注意事项：

• Server Actions中不能使用客户端特有的API（如window对象），因为它们运行在服务端环境
• 对于高频查询，合理配置React Query的缓存策略，减少不必要的Server Actions调用
• 确保错误处理逻辑完善，让React Query能正确捕获并展示Server Actions抛出的错误

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