Nuxt•7mo ago

getCookie in server routes returns undefined on initial page serve (ssr)

Hi there, Experiencing an issue where cookies are unavailable in H3 events inside /server/api/ route requests on initial page serve (ssr). For example, say I'm fetching some data on a page component:

<script setup>
const country = await $fetch('/api/country', {
  method: 'get'
});
</script>

<script setup>
const country = await $fetch('/api/country', {
  method: 'get'
});
</script>

Inside ~/server/api/country.get.ts, I'm getting a cookie like this: const countryCode = getCookie(event, 'country'); Everything works as expected when navigating to the page via NuxtLink or navigateTo, but when reloading the page, the cookie is undefined (and throws an error). Here's a repro: https://stackblitz.com/edit/github-bbkvhs?file=server%2Fapi%2Fcountry.get.ts How to reproduce the issue: -Select a country (which sets a cookie) -Click "View Country" -You'll see that the country data is fetched and works as intended -Now refresh the page, you should get an error [GET] "/api/country": 500 Country cookie not found! Any ideas why this is happening? Also, I realize my very simple example isn't the best way to handle a flow like this, but in my actual use case I need to get an access token from a cookie to make an authenticated request to my database, and for whatever reason I'm not able to do this on initial page serve.

bask-digital

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

5 Replies

manbartzOP•7mo ago

https://nuxt.com/docs/getting-started/data-fetching#pass-client-headers-to-the-api This seems to work, I guess I can make a composable wrapper to clean this up. Can anyone clarify if this is the best way?

Nuxt

Data fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

Smef•7mo ago

use useFetch instead of $fetch. $fetch gets run on both SSR and client-side, so your requests are firing twice and having the issue.

manbartzOP•7mo ago

Hmm, but useFetch doesn't seem to run at all on load, see here: https://github.com/nuxt/nuxt/issues/13805#issuecomment-1397317230

GitHub

on initial client side load with server: false, useFetch does not...

Environment Operating System: Darwin Node Version: v17.2.0 Nuxt Version: 3.0.0-27491748.3186841 Package Manager: [email protected] Builder: vite User Config: - Runtime Modules: - Build Modules: - Reprod...

manbartzOP•7mo ago

For what it's worth, I tried this: const { data: useFetchData } = await useFetch('/api/useFetch') And it doesn't run on load.

Smef•7mo ago

The whole purpose of useFetch is exactly what you're using it for. In the example you linked they are calling it later, client-side-only, in a function call I swapped it out in your example file and it made everything work properly and stopped the double requests, so I can confirm this is the solution It's also explicitly made for the case you're trying to solve

Gaming

Programming

getCookie in server routes returns undefined on initial page serve (ssr)