Trying to refactor Bonnies API Handler using "next-connect" from pages to app version
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Her code is:
Then createHandler is
import type { NextApiRequest, NextApiResponse } from "next";
import { createHandler } from "@/lib/api/handler";
import { generateData } from "@/lib/db/data/generateData";
import { addShow, getShows } from "@/lib/features/shows/queries";
const handler = createHandler();
handler.get(async (req: NextApiRequest, res: NextApiResponse) => {
let shows = await getShows();
// generate shows if there aren't any
if (shows.length === 0) {
await generateData();
shows = await getShows();
}
return res.status(200).json({ shows });
});Then createHandler is
import type { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";
import { validateToken } from "@/lib/auth/utils";
import { processApiError } from "./utils";
// base handler for centralized error and method handling
export const createHandler = ({
authRequired,
}: { authRequired?: boolean } = {}) => {
const handler = nextConnect({
onError(error, req: NextApiRequest, res: NextApiResponse) {
const { status, message } = processApiError(error);
res.status(status).json({ message });
},
onNoMatch(req: NextApiRequest, res: NextApiResponse) {
res.status(405).end(`Method ${req.method} Not Allowed`);
},
});
if (authRequired) {
handler.use(async (req, res, next) => {
const tokenIsValid = await validateToken(req);
if (!tokenIsValid) return res.status(401).end();
return next();
});
}
return handler;
};7 Replies
Asiatic LionOP
My version so-far is
// api/shows/route.ts
import { createHandler } from "@/lib/api/handler";
import { generateData } from "@/lib/db/data/generateData";
import { getShows } from "@/lib/features/shows/queries";
import { NextResponse } from "next/server";
const handler = createHandler();
handler.get(async (req) => {
let shows = await getShows();
// generate shows if there aren't any
if (shows.length === 0) {
await generateData();
shows = await getShows();
}
return NextResponse.json({ shows });
});import type { NextApiRequest, NextApiResponse } from "next";
import nextConnect, { createEdgeRouter } from "next-connect";
import { validateToken } from "@/lib/auth/utils";
import { processApiError } from "./utils";
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
const router = createEdgeRouter<NextRequest, NextFetchEvent>();
// base handler for centralized error and method handling
export const createHandler = ({
authRequired,
}: { authRequired?: boolean } = {}) => {
router.handler({
onError(error, req, res) {
const { status, message } = processApiError(error);
NextResponse.json(
{ message },
{
status: status,
}
);
},
onNoMatch(req, res) {
NextResponse.json(`Method ${req.method} Not Allowed`);
},
});
if (authRequired) {
router.use(async (req: NextRequest, res, next) => {
const userId = req.nextUrl.searchParams.get("userId"); // To read query params
const tokenIsValid = await validateToken(req, userId);
if (!tokenIsValid)
return NextResponse.json({
status: 401,
});
return next();
});
}
return router;
};But i get an
- error No HTTP methods exported in 'D:\base-concert-venue-app\src\app\api\shows\route.ts'. Export a named export for each HTTP method.
Any advice? 🙂
should i wrap the handler.get in export function GET() { .. } ?