Next.js中useQueries因服务器组件要求async无法并行查询的问题咨询

核心问题定位 #

你遇到的串行请求问题，本质是错误地在服务器组件中使用了React Query的useQueries钩子。React Query的客户端钩子（包括useQueries）只能在客户端组件中运行，而服务器组件的异步执行逻辑会强制串行处理这些查询，导致失去并行能力。另外，Next.js的服务器操作（Server Actions）必须是async函数，这一点无法绕过。

可行解决方法 #

方法1：将组件转为客户端组件，保留useQueries并行能力

在使用useQueries的组件顶部添加'use client'指令，明确标记为客户端组件，这样React Query就能正常触发并行请求：

'use client'; // 必须添加这行，标记为客户端组件

import { useQueries } from '@tanstack/react-query';
import { getUserById } from './api';

export default function ContactList({ user }) {
  const userQueries = useQueries({
    queries: user.contacts.map((contactId: string) => ({
      queryKey: ['contact', contactId],
      queryFn: () => getUserById(contactId),
    }))
  });

  // 渲染逻辑...
}

同时优化getUserById，缓存Supabase客户端避免重复创建：

// api.ts
import { createClient } from '@supabase/supabase-js';

// 缓存Supabase客户端，避免每次请求都创建新实例
const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!);

export async function getUserById(userId: string) {
  const { data } = await supabase
    .from('users')
    .select()
    .eq('id', userId)
    .single(); // 用single()替代取data[0]，更简洁且能自动处理空数据

  return data;
}

方法2：在服务器组件中用Promise.all实现并行查询

如果你的业务场景必须在服务器组件中处理数据获取，可以直接使用Promise.all来并行调用getUserById，替代useQueries：

// 服务器组件，无需'use client'
import { getUserById } from './api';

export default async function ContactList({ user }) {
  // 用Promise.all并行发起所有请求
  const contacts = await Promise.all(
    user.contacts.map((contactId) => getUserById(contactId))
  );

  // 渲染逻辑...
}

这种方式完全在服务器端并行处理请求，不需要依赖React Query的客户端钩子，同时符合Next.js服务器组件的异步要求。

注意事项 #

• 客户端组件中使用React Query时，确保已正确配置QueryClientProvider，否则钩子无法正常工作。
• 服务器组件中使用Promise.all时，注意处理可能的错误，可以用Promise.allSettled替代来捕获单个请求的失败，避免整个请求链崩溃。

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