Why is the SessionId always different when you send requests via useFetch? about nuxt HOT 4 OPEN

Start a new pull request in StackBlitz Codeflow.

• github-mpxmop (Open reproduction)

from nuxt.

You would need to set the cookie returned by useFetch on the HTML response. This isn't done automatically right now, but we might consider doing it for useFetch.

https://nuxt.com/docs/getting-started/data-fetching#pass-cookies-from-server-side-api-calls-on-ssr-response

from nuxt.

@danielroe thanks for the answer!

But that doesn't work for me either. I created a composable fetchWithCookie and used it in my code. The sessionId is different every time.

<script setup>
const event = useRequestEvent();

const { data } = await useAsyncData(() => fetchWithCookie(event, '/api/test'));
</script>
<template>
  <div>
    <p>
      If you simply refresh the page, there will be a new session every time.
    </p>
    <pre>{{ data }}</pre>

    <p>
      But if you go straight to endpoint:
      <a href="/api/test">/api/test</a>, the session id will be remain
      permanent. Just what I need!
    </p>
  </div>
</template>

from nuxt.

I solved my issue via middleware. And it’s strange, it doesn’t work in the endpoint, but works in the middleware. How can it be?

/server/middleware/session.ts

export default defineEventHandler(async (event) => {
  console.log('middleware', {
    sessionId: event.context.sessionsId,
    cookie: getCookie(event, 'seesion-id-test-2'),
  })

  if (event.context.sessionsId) {
    return
  }

  const session = await getSession(event, {
    password: '80d42cfb-1cd2-462c-8f17-e3237d9027e9',
    name: 'seesion-id-test-2',
    cookie: {
      maxAge: 3600,
      path: '/',
      sameSite: true,
    },
  })

  event.context.sessionsId = session.id
})

from nuxt.