graphql - 如何在Nextjs中间件中使用Hook？

Question

我有一个这样的中间件

import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { useCheckIsAdminQuery } from "../../generated/graphql";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
    
    const {data,loading,error} = useCheckIsAdminQuery()
    if(data?.checkIsAdmin){
        return NextResponse.next()
    }else{
        const url = req.nextUrl.clone()
        url.pathname = '/404'
        return NextResponse.redirect(url)
    }

    
}

useCheckIsQuery() 只是 codegen 包生成的一个钩子(Hook)，但我无法在中间件中调用这个钩子(Hook)。 错误显示

Invalid hook call. Hooks can only be called inside of the body of a function component. 

如何修复它？

Answer 1

根据 React 文档:“不要在循环、条件或嵌套函数内调用 Hooks。相反，在任何早期返回之前，始终在 React 函数的顶层使用 Hooks。” .

Nextjs 的中间件不是 React 函数，因此您不能在其中使用钩子(Hook)。解决您的问题的方法是使用您的自定义逻辑创建一个钩子(Hook)，并在您想要生效的页面中手动调用它。