英文:
How to query a NextJS route handler from a server component and get data from Supabase
问题
每当我尝试从NextJS中的服务器组件内部的路由处理程序获取数据时，查询由服务器进行，因此路由处理程序返回此错误：{ error: 'JSON object requested, multiple (or no) rows returned' }
当我尝试手动查询我的路由处理程序时，没有问题，因为我已经设置了supabase-auth-token。所以路由处理程序中的createRouteHandlerSupabaseClient没有问题。
但是当服务器尝试时，我认为它无法被验证为"me"。
具体来说，我已经正确设置了Supabase文档中的先决条件这里。我正在使用NextJS 13和'app'目录。
/app/api/customroute/[id]/page.jsx
const res = await fetch(`${process.env.HOST}/api/customroute/` + params.id)
const test = await res.json()
console.log(test)
/app/customotherroute/[id]/route.js
export async function GET(req, { params }) {
const supabase = createRouteHandlerSupabaseClient({
headers,
cookies
});
const { data, error } = await supabase
.from('table')
.select('*,other_table(column)')
.eq('id', params.id)
if (error == null) {
return NextResponse.json({ data });
}
return NextResponse.json({ error: error.message });
}
我可以直接在我的服务器组件中使用createServerComponentSupabaseClient来获取数据，但出于代码复制的考虑，我更愿意使用API。
我是否遗漏了什么？
我尝试在路由处理程序中使用以下方式设置用户数据const { data: { user } } = await supabase.auth.getUser() 但没有成功。
英文:
Whenever I try to fetch data from my route handler from within a server component in NextJS, the query is made by the server, therefor the route handler returns this error : { error: 'JSON object requested, multiple (or no) rows returned' }
When I try to query my route handler 'manually' I have no issues because I have my supabase-auth-token set. So the createRouteHandlerSupabaseClient in the routeHandler have no issues.
But when the server does I think it can't be authentified as "me".
To specify, I have correctly set the prerequisites from the supabase documentation here. I am using NextJS 13 and the 'app' directory.
/app/api/customroute/[id]/page.jsx
const res = await fetch(`${process.env.HOST}/api/customroute/` + params.id)
const test = await res.json()
console.log(test)
/app/customotherroute/[id]/route.js
export async function GET(req, { params }) {
const supabase = createRouteHandlerSupabaseClient({
headers,
cookies
});
const { data, error } = await supabase
.from('table')
.select('*,other_table(column)')
.eq('id', params.id)
if (error == null) {
return NextResponse.json({ data });
}
return NextResponse.json({ error: error.message });
}
I can go back to fecthing data using a createServerComponentSupabaseClient directly in my server component but for the sake of code replication I would prefer to use an API.
Is there something I am missing ?
I have tried to set the user data in the route handler using const { data: { user } } = await supabase.auth.getUser() but it did not work.
答案1
得分: 0
这是目前NextJS中的一个 bug。在调用路由处理程序时，服务器未正确传递 cookie，因此 cookie 列表为空。这在 supabase 的 YouTube 视频中有记录。https://youtu.be/KmJN-bEayeY?t=600 现有的解决方法是在服务器组件内实现查询。
英文:
Okay, after a lot of digging, I found the (obvious) answer to this.
This is currently a bug in NextJS.
The cookies are not correctly passed by the server when calling a routehandler. So the cookies list is empty.
This is documented in this youtube video from supabase.
https://youtu.be/KmJN-bEayeY?t=600
The current workaround is to implement the query inside the server component.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论