Next.js Discord

Discord Forum

Can anyone help me ?

Answered
Little Stint posted this in #help-forum
Open in Discord
Little StintOP
Code: 

import { NextApiRequest, NextApiResponse } from 'next'
import prisma from '../../lib/prisma'

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  if (!req.query) {
    return res.status(400).json({ error: 'No query parameters provided.' });
  }

  const email = Array.isArray(req.query.email) ? req.query.email[0] : req.query.email;

  if (!email) {
    return res.status(400).json({ error: 'Invalid email parameter.' });
  }

  try {
    const formSubmissions = await prisma.formSubmission.findMany({
      where: {
        email,
      },
      select: {
        name: true,
        email: true,
        message: true,
        date: true,
      },
    })

    return res.status(200).json({formSubmissions})
  } catch (error) {
    console.error('Error data forms:', error)
    return res.status(500).json({ error: 'Error data forms.' })
  }
}



Error: 

- error TypeError: res.status is not a function
Answered by Dayo
oh I don't know. haven't really done that before but I think you can achieve that with a middleware or by passing a secret token to your api

but you may wanna do some more research on that
View full answer

40 Replies

Dayo
looks like you're mixing both api routes and route handlers. if you're using the pages directory api routes, you'd do something like this:

export default async function handler(req: NextApiRequest,
  res: NextApiResponse) {
    // rest of code as before
}


otherwise if you're using the app directory's route handler, you should return NextResponse, so it'll look like

import {NextResponse} from 'next/server';

export async function GET(request: Request){
    ...
    return NextResponse.json()
}
import { NextApiRequest, NextApiResponse } from 'next'
import prisma from '../../lib/prisma'

export default async function handler(req: NextApiRequest,
  res: NextApiResponse) {
  if (!req.query) {
    return res.status(400).json({ error: 'No query parameters provided.' });
  }

  const email = Array.isArray(req.query.email) ? req.query.email[0] : req.query.email;

  if (!email) {
    return res.status(400).json({ error: 'Invalid email parameter.' });
  }

  try {
    const formSubmissions = await prisma.formSubmission.findMany({
      where: {
        email,
      },
      select: {
        name: true,
        email: true,
        message: true,
        date: true,
      },
    })

    return res.status(200).json({ formSubmissions })
  } catch (error) {
    console.error('Error data forms:', error)
    return res.status(500).json({ error: 'Error data forms.' })
  }
}
Little StintOP
gives me this error

- error Detected default export in 'P:\pessoal\website\app\api\getforms\route.ts'. Export a named export for each HTTP method instead.
- error No HTTP methods exported in 'P:\pessoal\website\app\api\getforms\route.ts'. Export a named export for each HTTP method.
Dayo
looks like you're in the app directory. what does your file structure look like?
Little StintOP
app > api > getforms > route.ts
Dayo
you're using the app directory. you need to export an HTTP method like export async function GET
check that url i sent
Little StintOP
ok
import { NextApiRequest, NextApiResponse } from 'next'
import prisma from '../../lib/prisma'

export async function GET(req: NextApiRequest,
  res: NextApiResponse) {
  if (!req.query) {
    return res.status(400).json({ error: 'No query parameters provided.' });
  }

  const email = Array.isArray(req.query.email) ? req.query.email[0] : req.query.email;

  if (!email) {
    return res.status(400).json({ error: 'Invalid email parameter.' });
  }

  try {
    const formSubmissions = await prisma.formSubmission.findMany({
      where: {
        email,
      },
      select: {
        name: true,
        email: true,
        message: true,
        date: true,
      },
    })

    return res.status(200).json({ formSubmissions })
  } catch (error) {
    console.error('Error data forms:', error)
    return res.status(500).json({ error: 'Error data forms.' })
  }
}


Like this ?
@Little Stint ok
New Zealand Heading Dog
The method is correct, however you are still using "res.status" instead of "NextResponse.json()". Have a look at https://nextjs.org/docs/app/building-your-application/routing/router-handlers for how to use API routes with the app directory.
Little StintOP
@New Zealand Heading Dog
@Little Stint Click to see attachment
Dayo
are you sure this should be a GET request or a POST?
also, from your first line that's commented, if that's indeed how your directory is, it's not correct

should be app/api/folder-name/route.ts
Little StintOP
GET Request

no firts line is wrong

path:
app/api/getforms/route.ts
@Little Stint GET Request no firts line is wrong path: app/api/getforms/route.ts
Dayo
but it looks like you're submitting a form to your Prisma instance. am I missing sth?
Little StintOP
No, the api is to return rows from the formSubmission table where the email is the same as the email in the database.
I already have this problem these days
Dayo
I see
this won't work then. your error should be sth like Property 'query' does not exist on type 'NextRequest'
try converting req.url to a URL by using the new URL keyword

as in

const url = new URL(req.url)

const emailParam  = url.searchParams.get("email")
Little StintOP
Dayo
you'll still use the email line
but instead of req.query.email use the emailParam
Little StintOP
this ?
Dayo
yeah try it
Little StintOP
ok 1 mi
Work! thank you very much for this amazing help!!!
Dayo
awesome!
Little StintOP
@Dayo

Do you know how I make the API private?
Dayo
wdym private?
Little StintOP
I wanted to put the private route just to connect the front end to the back end and not third parties have access
Dayo
oh I don't know. haven't really done that before but I think you can achieve that with a middleware or by passing a secret token to your api

but you may wanna do some more research on that
Answer
Little StintOP
Ok thank you very much I will use the token idea