How to access the data in a response for further processing in my client component

Answered

Pacific sand lance posted this in #help-forum

Pacific sand lanceOP

2023-10-13T12:17:37.000Z

I have an API route that i would like to send over the response to my client for further processing

Here is the code :

import { Invoice as InvoiceClient, Xendit } from "xendit-node";
import { NextResponse } from "next/server";

export async function POST(req) {
    const secret = process.env.XENDIT_KEY
    const xenditClient = new Xendit({secretKey: secret})
    const { Invoice } = xenditClient
    
    const xenditInvoiceClient = new InvoiceClient({secretKey: secret})

    const userdata = await req.json()

    try {
        const response = await xenditInvoiceClient.createInvoice({
            data: userdata
        })
        return NextResponse.json({response}, {status: 200})
    } catch (error) {
        console.log('error')
        return NextResponse.json({error}, {status: 500})
    }
    
}

Answered by riský

looks good

View full answer

28 Replies

American black bear

2023-10-13T12:25:52.000Z

you are sending response, so what's the issue?

@American black bear you are sending response, so what's the issue?

Pacific sand lanceOP

2023-10-13T12:29:17.000Z

i want to kinda send the response to my client component, so i can use the data in the response for conditional stuff

riský

2023-10-13T12:31:57.000Z

well, how are you sending the request from client?

as if fetch request, you can make a useState and set that, and then show the message on client

@riský well, how are you sending the request from client?

Pacific sand lanceOP

2023-10-13T12:36:02.000Z

wait

@riský well, how are you sending the request from client?

Pacific sand lanceOP

2023-10-13T12:38:47.000Z

try {
            const data = {
                'externalId': randomID,
                'amount': price,
                'description': paketumrah,
                'customer': {
                    'givenNames': namalengkap,
                    'email': email,
                    'mobileNumber': notelponhp,
                }
            }
            await fetch('/api/invoicemaker', {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data),
            }) .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok')
                }
                return response.json()
            }) .then((data) => {
                console.log(data)
                statusinv = data.status
                linkinvoice = data.invoiceUrl
            })
        } catch (error) {
            console.log(error)
        }

you could see that i tried to access the data from the response as

data.status

since the json response have a "status" in it

riský

2023-10-13T12:40:09.000Z

yeash, so you should be able to use useState and set the message insite this

Pacific sand lanceOP

2023-10-13T12:41:02.000Z

so my code is correct? could you please elaborate on that further

riský

2023-10-13T12:41:15.000Z

show your whole file so i can see what you are actually using here

Pacific sand lanceOP

2023-10-13T12:42:49.000Z

ah it's kinda long

but i'll just display what i'm primarily working on

riský

2023-10-13T12:44:43.000Z

like i more want to know more about statusinv and if it is a useState and you should be using the actuall way of setting

@riský show your whole file so i can see what you are actually using here

Pacific sand lanceOP

2023-10-13T12:45:02.000Z

const handleSubmit = async (event) => {
        event.preventDefault()
        setSubmitting(true)

        let statusinv
        let linkinvoice

        try {
            const data = {
bunch of data
                           }
            }
            await fetch('/api/invoicemaker', {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data),
            }) .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok')
                }
                return response.json()
            }) .then((data) => {
                console.log(data)
                statusinv = data.status
                linkinvoice = data.invoiceUrl
            })
        } catch (error) {
            console.log(error)
        }

        if (statusinv == 'PENDING') {
            try {
                const userbody = { 
                    bunch of data 
                }
                    
                await fetch('/api/submitdata', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(userbody)
                })
    
                setSubmitting(false)
    
            } catch (error) {
                console.error(error)
                setSubmitfail(true)
                setSubmitted(false)
                }
            setSubmitted(true)

        }
  
    }