在新的App Router中,在NextJS 13.4中执行GET(获取所有项目或通过特定ID)的正确方法是什么?以前使用NextAPIRequest、NextAPIResponse进行删除的方法,使用if(req.method = 'GET'),通过const { id } = request.query;从URL中提取参数,并使用NextAPIResponse抛出错误消息,似乎已经过时了。为了清楚起见-请展示如何使用GET“all”和匹配UUID的GET来获取数据。
3pvhb19x1#
这里是NextJS 13.4中更新的GET API,使用了新的应用程序路由,包括错误消息。为了示例的清晰性,我将包括对支持客户端的调用;在您的应用中,您用于获取数据的API或客户端可以不同,但您可以在此示例中看到错误消息等,并且您可以根据您的情况进行修改。你需要创建一个特定的文件夹+文件,像这样:/app/api/tacos/route.js。应用程序路由器尊重文件夹和你的代码,它做的HTTP动词的具体处理应该在一个名为route.js的文件。我会包括文件名和路由在代码块上方的注解。
/app/api/tacos/route.js
route.js
// METHOD 1 // FILE NAME /app/api/tacos/route.js // import { NextApiRequest, NextApiResponse } from 'next'; // this is was the OLD way pre-NextJS 13.4 import { NextResponse } from 'next/server'; import supabase from '../../supabase/client'; import { useRouter } from 'next/navigation'; export async function GET(request) { try { let { data, error } = await supabase.from('my_table').select('*'); if (error) { return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 }); } return NextResponse.json({ data }); } catch (error) { return NextResponse.json({ error: 'Catch Error - Internal Server Error' }, { status: 500 }); } }
字符串如果你想用一个特定的ID做一个GET?您可以在URL中使用两种方法之一。在方法2中-您可以向URL添加查询字符串。
// METHOD 2 // FILE NAME /app/api/tacos/route.js import { NextResponse, NextRequest } from 'next/server'; import supabase from '../../../supabase/client'; export async function GET(request) { // ! OLD WAY - no longer works // const { id } = request.query; // * THIS WORKS const searchParams = request.nextUrl.searchParams; const id = searchParams.get('id'); try { let { data, error } = await supabase.from('my_table').select('*').eq('id', id); console.log('GET Method 2 supabase ~ data:', data); console.log('GET Method 2 supabase ~ error:', error); if (error) { console.log('GET Method 2 supabase ~ error:', error); return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 }); } // * this also works // return NextResponse.json({ data }, { status: 200 }); return NextResponse.json({ data }); } catch (error) { console.log('GET Method 2 supabase - Try/Catch ~ catch(error):', error); return NextResponse.json({ error: 'Try/Catch Error - Internal Server Error' }, { status: 500 }); } }
型在方法3中,让我们在URL中添加这个[slug](因此这需要将文件route.js放在不同的地方,请参阅下面几行的//注解,为了让不熟悉的人清楚,它需要您在文件夹tacos下创建一个名为[id]的文件夹。括号标记法被NextJS识别,当您调用API时,你可以用一个类似UUID的字符串替换这个slug:
tacos
[id]
// METHOD 3 // FILE NAME /app/api/tacos/[id]/route.js import { NextResponse, NextRequest } from 'next/server'; import supabase from '../../../supabase/client'; export async function GET(request, { params }) { const id = params.id; // this is what will grab the string - use an UUID console.log(id); try { let { data, error } = await supabase.from('my_table').select('*').eq('id', id); console.log('GET Method 3 supabase ~ data:', data); console.log('GET Method 3 supabase ~ error:', error); if (error) { console.log('GET Method 3 supabase ~ error:', error); return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 }); } return NextResponse.json({ data }); // * this also works // return NextResponse.json({ data }, { status: 200 }); } catch (error) { console.log('GET Method 3 supabase - Try/Catch ~ catch(error):', error); return NextResponse.json({ error: 'Try/Catch Error - Internal Server Error' }, { status: 500 }); } }
型为了清楚起见,在Typescript中,函数签名将类似于export async function GET(request: NextRequest) {阅读更多关于路由处理程序here的信息。=这里是如何调用API =为了完整起见,下面是我在客户端应用中用来调用此API的非常简单的函数。为了简单起见,我硬编码了一个id;在您的应用中,您可能希望将id作为参数传递给函数。
export async function GET(request: NextRequest) {
// METHOD 1 const getAllData = async () => { try { const response = await fetch(`/api/saveCalculation`, { method: 'GET', }); if (response.ok) { const data = await response.json(); console.log('getAllData - Response OKAY - data', data); console.log('OKAY'); } else { // Handle the error console.log('getAllData - Response NOT OKAY'); } } catch (error) { console.error('getAllData - Try/Catch - Error', error); } }; // METHOD 2 const getSpecificID = async () => { const id = 'addYour-UUID-here-2323-232323232323'; try { const response = await fetch(`/api/saveCalculation?id=${id}`, { method: 'GET', }); if (response.ok) { const data = await response.json(); console.log('Response OKAY - responseData', data); console.log('OKAY'); } else { // Handle the error console.log('Response NOT OKAY'); const data = await response.json(); console.log('getSpecificID - Response not OK', data); } } catch (error) { console.error('Try/Catch - Error', error); const data = await response.json(); console.log('getSpecificID - Response not OK', data); } }; // METHOD 3 const getSpecificIDByUrl = async () => { const id = 'addYour-UUID-here-2323-232323232323'; try { const response = await fetch(`/api/saveCalculation/${id}`, { method: 'GET', }); if (response.ok) { const data = await response.json(); console.log('Response OKAY - data', data); console.log('OKAY'); } else { // Handle the error console.log('Response NOT OKAY'); const data = await response.json(); console.log('getSpecificIDByUrl - Response not OK', data); } } catch (error) { console.error('Try/Catch - Error', error); const data = await response.json(); console.log('getSpecificIDByUrl - Response not OK', data); } };
型
1条答案
按热度按时间3pvhb19x1#
这里是NextJS 13.4中更新的GET API,使用了新的应用程序路由,包括错误消息。
为了示例的清晰性,我将包括对支持客户端的调用;在您的应用中,您用于获取数据的API或客户端可以不同,但您可以在此示例中看到错误消息等,并且您可以根据您的情况进行修改。
你需要创建一个特定的文件夹+文件,像这样:
/app/api/tacos/route.js
。应用程序路由器尊重文件夹和你的代码,它做的HTTP动词的具体处理应该在一个名为route.js
的文件。我会包括文件名和路由在代码块上方的注解。字符串
如果你想用一个特定的ID做一个GET?
您可以在URL中使用两种方法之一。
在方法2中-您可以向URL添加查询字符串。
型
在方法3中,让我们在URL中添加这个[slug](因此这需要将文件
route.js
放在不同的地方,请参阅下面几行的//注解,为了让不熟悉的人清楚,它需要您在文件夹tacos
下创建一个名为[id]
的文件夹。括号标记法被NextJS识别,当您调用API时,你可以用一个类似UUID的字符串替换这个slug:型
为了清楚起见,在Typescript中,函数签名将类似于
export async function GET(request: NextRequest) {
阅读更多关于路由处理程序here的信息。
=这里是如何调用API =
为了完整起见,下面是我在客户端应用中用来调用此API的非常简单的函数。为了简单起见,我硬编码了一个id;在您的应用中,您可能希望将id作为参数传递给函数。
型