8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

useQueries 失去了并行查询数据的能力,因为 Next.js 要求服务器组件异步

Abdul Qadeer 3月前

116 0

该应用程序由 Next.js 运行。我有一个 useQueries 钩子:const userQueries = useQueries({ queries: user.contacts.map((contactId: string) => ({ queryKey: ['contact', conta...

该应用程序由 Next.js 运行。

我有一个 useQueries 钩子:

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

api.ts 文件中的函数“getUserById”:

export async function getUserById(userId: string) {
    const supabase = createClient();
    let {data} = await supabase
        .from('users')
        .select()
        .eq('id', userId);

    return data && data[0]

}

我发现当我以这种方式加载数据时,它会按顺序加载而不是并行加载。

我尝试将 api 函数设为非异步,以便每个请求不会等待前一个请求,但 Next.js 禁止在没有“async”前缀的情况下执行服务器操作。有办法解决这个问题吗?

帖子版权声明 1、本帖标题:useQueries 失去了并行查询数据的能力,因为 Next.js 要求服务器组件异步
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Abdul Qadeer在本站《typescript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 你可以看一下这个 演示 :

    interface UserResponse {
        firstname: string;
        lastname: string;
        age: number;
        address: string;
        email: string;
    };
    
    const allFields = {
        1: 'firstname' as const,
        2: 'lastname' as const,
        3: 'age' as const,
        4: 'address' as const,
        5: 'email' as const
    };
    
    type AllFields = typeof allFields;
    type AllFieldsKeys = keyof AllFields;
    type ToProp<T extends number> = T extends AllFieldsKeys ? AllFields[T]: never;
    
    type FullResult = {
        [p in AllFieldsKeys as ToProp<p>] : UserResponse[ToProp<p>]
    }
    
    function server<T extends AllFieldsKeys>(fields: T[]): Pick<FullResult, ToProp<T>> {
      return fields.reduce((prev: any, curr) => {
        // In real life value will probably not be null
        return (prev as any)[curr] = null; 
      }, {});
    }
    
    const test = server([1,3,4]);
    console.log(test.address); // OK string
    console.log(test.firstname); // OK string
    console.log(test.lastname); // ERROR
    console.log(test.age); // OK number
    console.log(test.email); // ERROR
    

    笔记

    正如其他人提到的,使用数字代替属性名称可能不是一个好主意。如果使用属性名称,代码将更容易理解:

    interface AllFields {
        firstname: string;
        lastname: string;
        age: number;
        address: string;
        email: string;
    };
    
    type AllFieldsKeys = keyof AllFields;
    
    type ToProp<T extends keyof AllFields> =
        T extends AllFieldsKeys ?
            AllFields[T]: never;
    
    function server<T extends AllFieldsKeys>(fields: T[]): Pick<AllFields, T> {
      return fields.reduce((prev: any, curr) => {
         // Backend will probably return something not null
        return (prev as any)[curr] = null;
      }, {});
    }
    
    const test = server(["address","age"]);
    console.log(test.address); // OK  string
    console.log(test.firstname); // ERROR
    console.log(test.lastname); // ERROR
    console.log(test.age); // OK number
    console.log(test.email); // ERROR
    
返回
作者最近主题: