Theo's Typesafe Cult•17mo ago

NEXT edge api routes: sending a json response

I'm currently migrating my app to work with edge worked fine so far until i tried to return json to the frontend, then the frontend was complaining with SyntaxError: Unexpected end of JSON input I just followed the examples from nextjs guide (pages router in particular), but it seems this isn't the right way to send json to the frontend, how should i do it? edge runtime code:

const responseBody = JSON.stringify({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})

return new Response(responseBody, {
    status: 200,
    headers: {
        'content-type': 'application/json',
    },
})

const responseBody = JSON.stringify({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})

return new Response(responseBody, {
    status: 200,
    headers: {
        'content-type': 'application/json',
    },
})

It's erroring out on this part in particular(on the frontend):

    const { accessToken, expiresAt } = await fetch('/api/......', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ refreshToken }),
    })
        .then((res) => {
            return res.json() // -<<<<<< It's ERRORING HERE
        })
        .then((d) => {
            return d
        })

    const { accessToken, expiresAt } = await fetch('/api/......', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ refreshToken }),
    })
        .then((res) => {
            return res.json() // -<<<<<< It's ERRORING HERE
        })
        .then((d) => {
            return d
        })

1 Reply

j3llyb3ans•17mo ago

Old code using normal NEXTjs runtime (works just fine):

if (newRefreshToken) {
    res.setHeader('Set-Cookie', [serializedAccessToken, serializedRefreshToken ?? ''])
} else {
    res.setHeader('Set-Cookie', [serializedAccessToken])
}

res.status(200).json({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})if (newRefreshToken) {
    res.setHeader('Set-Cookie', [serializedAccessToken, serializedRefreshToken ?? ''])
} else {
    res.setHeader('Set-Cookie', [serializedAccessToken])
}

res.status(200).json({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})

if (newRefreshToken) {
    res.setHeader('Set-Cookie', [serializedAccessToken, serializedRefreshToken ?? ''])
} else {
    res.setHeader('Set-Cookie', [serializedAccessToken])
}

res.status(200).json({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})if (newRefreshToken) {
    res.setHeader('Set-Cookie', [serializedAccessToken, serializedRefreshToken ?? ''])
} else {
    res.setHeader('Set-Cookie', [serializedAccessToken])
}

res.status(200).json({
    accessToken: newAccessToken,
    refreshToken: newRefreshToken ?? '',
    expiresAt: Date.now() + 3600 * 1000,
})

---- on a related note, how do i set two cookies with Response ? is it this way?:

'Set-Cookie':  `${serializedAccessToken},${serializedRefreshToken}`

'Set-Cookie':  `${serializedAccessToken},${serializedRefreshToken}`

it also doesn't help that there's barely anything about the Response constructor on MDN

Gaming

Programming

NEXT edge api routes: sending a json response