I am listening webhook in next js by creating an API route api/webhook/order_created. The code is
export async function POST(request: Request) {
const session = auth();
if (!session) {
return new Response('Unauthorized', {
status: 401,
})
}
try {
const res = await request.json();
if (res) {
const order: OrderType | null = prepareOrder(res);
if (!order) {
return new Response('Order not created', {
status: 400,
})
}
//connect to the database
await dbConnect();
//create a new order document in the database
const newOrder = new Order(order);
await newOrder.save();
revalidatePath('/orders2');
//send server side event to the client
notifyListeners(order);
return new Response('Success!', {
status: 200,
})
} else {
return new Response('', {
status: 400,
})
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
return new Response(`Webhook error: ${error.message}`, {
status: 400,
})
}
}
Here I am revalidating the UI of the /orders2 page. But it is not refetching the fresh data from the DB and not updating the UI.
Here is my order page code:
import getOrders from '@/actions/woocommerce/getOrders'
import React from 'react'
async function page() {
const orders = await getOrders();
return (
<div className='flex gap-4'>
{
orders.map(order => (
<div key={order.order_id}>
<h1>{order.order_id}</h1>
<p>{order?.amount}</p>
</div>
))
}
</div>
)
}
export default page
Could you please guide me on how I can update the UI after receiving the webhook?
