在NextJS 13.4中,使用新的应用路由器来执行GET(所有项目或特定ID)的正确方法是什么?(响应,NextAPI响应或NextResponse)?

gupuwyp2  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(102)

在新的App Router中,在NextJS 13.4中执行GET(获取所有项目或通过特定ID)的正确方法是什么?
以前使用NextAPIRequest、NextAPIResponse进行删除的方法,使用if(req.method = 'GET'),通过const { id } = request.query;从URL中提取参数,并使用NextAPIResponse抛出错误消息,似乎已经过时了。
为了清楚起见-请展示如何使用GET“all”和匹配UUID的GET来获取数据。

3pvhb19x

3pvhb19x1#

这里是NextJS 13.4中更新的GET API,使用了新的应用程序路由,包括错误消息。
为了示例的清晰性,我将包括对支持客户端的调用;在您的应用中,您用于获取数据的API或客户端可以不同,但您可以在此示例中看到错误消息等,并且您可以根据您的情况进行修改。
你需要创建一个特定的文件夹+文件,像这样:/app/api/tacos/route.js。应用程序路由器尊重文件夹和你的代码,它做的HTTP动词的具体处理应该在一个名为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:

// 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作为参数传递给函数。

// 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);
  }
};

相关问题