Next.js Discord

Discord Forum

Post API request helper handler Attempt

Answered
Asian paper wasp posted this in #help-forum
Open in Discord
Asian paper waspOP
import axios, { AxiosRequestConfig } from 'axios'

const postData = async (url = '', data?: any, options?: any, strictOK: boolean = false) => {
    try {
        const config: AxiosRequestConfig = {
            ...options,
            method: 'POST',
            proxy: false,
            url: url,
            data: data
        }

        console.log("postData - Axios config", config)


        const response = await axios(config)

        console.log("postData - response status", response.status)
        console.log("postData - response data", response.data)

        if (response.data.errors) {
            return {
                isError: true,
                status: response.status,
                message: response.data.errors[0]
            }
        }

        if (response.status = 203 || (strictOK && response.status != 200)) {
            return {
                isError: true,
                status: response.status,
                message: response.data.data
            }

        }

        if (response.status >= 200 && response.status <= 299) {
            return response.data
        }

        if (response.data && response.status > 299) {
            return {
                isError: true,
                status: response.status,
                message: response.data
            }
        }

        return new Error('Bad Request')
    }
    catch (error: any) {
        console.error("postData - error", error.message)

        if (error.response) {
            const { response } = error
            const errors = response.data.fieldErrors ? response.data.fieldErrors : response.data

            return {
                isError: true,
                status: response.status,
                errors,
            }
        }

        if (error.Request) {
            return error.Request
        }

        return error.message
    }


}

export default postData
Answered by Ray
the filename of the route handler in app router need to be route.ts
so create it at app/api/engagement/add-to-discord/route.ts
View full answer

32 Replies

Asian paper waspOP
I tried making my own helper function to just call whenever i want to call the backend however its not working as expected
const handleAddToDiscord = async () => {
    const res = await postData(`api/engagement/add-to-discord`, {emoteList: emoteList})
  }

This is how I call it but whenever I do, I get this error
add-to-discord is the backend handler
I beleive the the problem is because my postData handler isnt server side
but idk how to do that
@Asian paper wasp Click to see attachment
Ray
the filename of the route handler in app router need to be route.ts
so create it at app/api/engagement/add-to-discord/route.ts
Answer
When I was working with my internship our project configured differently so I assume I cant do the same here
@Ray were you using page router?
Asian paper waspOP
Possibly
you can create at app/engagement/add-to-discord/route.ts then the url will be /engagement/add-to-discord
@Asian paper wasp shouldnt it be api/engagment...
Ray
no if the file is at app/engagement/add-to-discord/route.ts
app/api/engagement/add-to-discord/route.ts - > /api/engagement/add-to-discord
@Ray `app/api/engagement/add-to-discord/route.ts` - > `/api/engagement/add-to-discord`
Asian paper waspOP
does this mean its working?
@Asian paper wasp Click to see attachment
Ray
yes but look like you have problem in route.ts
Asian paper waspOP
ok ill check it out thank you
@Asian paper wasp ok ill check it out thank you
Ray
you should export a POST() function in route.ts
export async function POST(req: Request) {}
@Ray you should export a `POST()` function in route.ts `export async function POST(req: Request) {}`
Asian paper waspOP
:Hmm: 
import { NextApiRequest, NextApiResponse } from 'next';

export async function POST(req: NextApiRequest, res: NextApiResponse) {
    try {
        const data = req.body;

        res.status(200).json({ message: 'POST request successful', data });
    } catch (error) {
        
        res.status(500).json({ error: 'Internal Server Error' });
    }
}

TypeError: res.status is not a function
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
    try {
        const data = await req.json();
        return NextResponse.json({ message: 'POST request successful', data })
    } catch (error) {
        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
    }
}
Asian paper waspOP
theres no res?
@Asian paper wasp theres no res?
Ray
no
Asian paper waspOP
oh i just return res
Ok no more bothering you, thanks you!
Ray
np