From 73421483f60fd25d57e22b4c49e4b111745692cb Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 29 Jan 2024 11:48:35 +0000 Subject: [PATCH] fix(nuxt): improve return type of `useRequestEvent` (#25480) --- docs/1.getting-started/6.data-fetching.md | 2 +- docs/3.api/2.composables/use-request-event.md | 2 +- docs/3.api/3.utils/set-response-status.md | 11 +++++++---- packages/nuxt/src/app/components/nuxt-island.ts | 4 ++-- packages/nuxt/src/app/composables/cookie.ts | 4 ++-- packages/nuxt/src/app/composables/ssr.ts | 11 +++++++---- packages/nuxt/src/app/composables/url.ts | 2 +- test/fixtures/basic-types/modules/runtime/page.vue | 2 +- .../basic/components/islands/LongAsyncComponent.vue | 2 +- test/fixtures/basic/modules/runtime/page.vue | 2 +- test/fixtures/basic/plugins/server-only.server.ts | 4 +++- 11 files changed, 27 insertions(+), 19 deletions(-) diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md index d977f35474..a3cc0ef554 100644 --- a/docs/1.getting-started/6.data-fetching.md +++ b/docs/1.getting-started/6.data-fetching.md @@ -462,7 +462,7 @@ export const fetchWithCookie = async (event: H3Event, url: string) => { // This composable will automatically pass cookies to the client const event = useRequestEvent() -const { data: result } = await useAsyncData(() => fetchWithCookie(event, '/api/with-cookie')) +const { data: result } = await useAsyncData(() => fetchWithCookie(event!, '/api/with-cookie')) onMounted(() => console.log(document.cookie)) diff --git a/docs/3.api/2.composables/use-request-event.md b/docs/3.api/2.composables/use-request-event.md index 5cb1b318bb..3837b9c8e6 100644 --- a/docs/3.api/2.composables/use-request-event.md +++ b/docs/3.api/2.composables/use-request-event.md @@ -15,7 +15,7 @@ Within your pages, components, and plugins you can use `useRequestEvent` to acce const event = useRequestEvent() // Get the URL -const url = event.path +const url = event?.path ``` ::callout diff --git a/docs/3.api/3.utils/set-response-status.md b/docs/3.api/3.utils/set-response-status.md index 200d644f91..4660aeef95 100644 --- a/docs/3.api/3.utils/set-response-status.md +++ b/docs/3.api/3.utils/set-response-status.md @@ -15,11 +15,14 @@ Nuxt provides composables and utilities for first-class server-side-rendering su ```js const event = useRequestEvent() -// Set the status code to 404 for a custom 404 page -setResponseStatus(event, 404) +// event will be undefined in the browser +if (event) { + // Set the status code to 404 for a custom 404 page + setResponseStatus(event, 404) -// Set the status message as well -setResponseStatus(event, 404, 'Page Not Found') + // Set the status message as well + setResponseStatus(event, 404, 'Page Not Found') +} ``` ::callout diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts index fbf424777f..2d23c62b0d 100644 --- a/packages/nuxt/src/app/components/nuxt-island.ts +++ b/packages/nuxt/src/app/components/nuxt-island.ts @@ -83,7 +83,7 @@ export default defineComponent({ const event = useRequestEvent() // TODO: remove use of `$fetch.raw` when nitro 503 issues on windows dev server are resolved - const eventFetch = import.meta.server ? event.fetch : import.meta.dev ? $fetch.raw : globalThis.fetch + const eventFetch = import.meta.server ? event!.fetch : import.meta.dev ? $fetch.raw : globalThis.fetch const mounted = ref(false) onMounted(() => { mounted.value = true; teleportKey.value++ }) @@ -168,7 +168,7 @@ export default defineComponent({ if (import.meta.server && import.meta.prerender) { const hints = r.headers.get('x-nitro-prerender') if (hints) { - appendResponseHeader(event, 'x-nitro-prerender', hints) + appendResponseHeader(event!, 'x-nitro-prerender', hints) } } setPayload(key, result) diff --git a/packages/nuxt/src/app/composables/cookie.ts b/packages/nuxt/src/app/composables/cookie.ts index 1e6ee18ea9..be64a70364 100644 --- a/packages/nuxt/src/app/composables/cookie.ts +++ b/packages/nuxt/src/app/composables/cookie.ts @@ -111,7 +111,7 @@ export function useCookie (name: string, _opts?: const nuxtApp = useNuxtApp() const writeFinalCookieValue = () => { if (opts.readonly || isEqual(cookie.value, cookies[name])) { return } - writeServerCookie(useRequestEvent(nuxtApp), name, cookie.value, opts as CookieOptions) + writeServerCookie(useRequestEvent(nuxtApp)!, name, cookie.value, opts as CookieOptions) } const unhook = nuxtApp.hooks.hookOnce('app:rendered', writeFinalCookieValue) nuxtApp.hooks.hookOnce('app:error', () => { @@ -131,7 +131,7 @@ export function refreshCookie(name: string) { function readRawCookies (opts: CookieOptions = {}): Record | undefined { if (import.meta.server) { - return parse(getRequestHeader(useRequestEvent(), 'cookie') || '', opts) + return parse(getRequestHeader(useRequestEvent()!, 'cookie') || '', opts) } else if (import.meta.client) { return parse(document.cookie, opts) } diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts index 29c720d9b5..8509e968bc 100644 --- a/packages/nuxt/src/app/composables/ssr.ts +++ b/packages/nuxt/src/app/composables/ssr.ts @@ -5,8 +5,8 @@ import { useNuxtApp } from '../nuxt' import { toArray } from '../utils' /** @since 3.0.0 */ -export function useRequestEvent (nuxtApp: NuxtApp = useNuxtApp()): H3Event { - return nuxtApp.ssrContext?.event as H3Event +export function useRequestEvent (nuxtApp: NuxtApp = useNuxtApp()) { + return nuxtApp.ssrContext?.event } /** @since 3.0.0 */ @@ -52,7 +52,10 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu if (arg1 && typeof arg1 !== 'number') { return _setResponseStatus(arg1, arg2 as number | undefined, arg3) } - return _setResponseStatus(useRequestEvent(), arg1, arg2 as string | undefined) + const event = useRequestEvent() + if (event) { + return _setResponseStatus(event, arg1, arg2 as string | undefined) + } } /** @since 3.8.0 */ @@ -60,5 +63,5 @@ export function prerenderRoutes (path: string | string[]) { if (!import.meta.server || !import.meta.prerender) { return } const paths = toArray(path) - appendHeader(useRequestEvent(), 'x-nitro-prerender', paths.map(p => encodeURIComponent(p)).join(', ')) + appendHeader(useRequestEvent()!, 'x-nitro-prerender', paths.map(p => encodeURIComponent(p)).join(', ')) } diff --git a/packages/nuxt/src/app/composables/url.ts b/packages/nuxt/src/app/composables/url.ts index 6503c29b65..b85a781d26 100644 --- a/packages/nuxt/src/app/composables/url.ts +++ b/packages/nuxt/src/app/composables/url.ts @@ -6,7 +6,7 @@ import { useRequestEvent } from './ssr' /** @since 3.5.0 */ export function useRequestURL () { if (import.meta.server) { - const url = getRequestURL(useRequestEvent()) + const url = getRequestURL(useRequestEvent()!) url.pathname = joinURL(useRuntimeConfig().app.baseURL, url.pathname) return url } diff --git a/test/fixtures/basic-types/modules/runtime/page.vue b/test/fixtures/basic-types/modules/runtime/page.vue index a18e627462..93d144af97 100644 --- a/test/fixtures/basic-types/modules/runtime/page.vue +++ b/test/fixtures/basic-types/modules/runtime/page.vue @@ -8,7 +8,7 @@ definePageMeta({ }) if (import.meta.server) { - setResponseHeader(useRequestEvent(), 'x-extend', useRoute().meta.value as string) + setResponseHeader(useRequestEvent()!, 'x-extend', useRoute().meta.value as string) } diff --git a/test/fixtures/basic/components/islands/LongAsyncComponent.vue b/test/fixtures/basic/components/islands/LongAsyncComponent.vue index c9714bc788..f9832d7794 100644 --- a/test/fixtures/basic/components/islands/LongAsyncComponent.vue +++ b/test/fixtures/basic/components/islands/LongAsyncComponent.vue @@ -49,6 +49,6 @@ defineProps<{ }>() const evt = useRequestEvent() -const headers = getResponseHeaders(evt) +const headers = evt ? getResponseHeaders(evt) : {} const { data } = await useFetch('/api/very-long-request') diff --git a/test/fixtures/basic/modules/runtime/page.vue b/test/fixtures/basic/modules/runtime/page.vue index a18e627462..93d144af97 100644 --- a/test/fixtures/basic/modules/runtime/page.vue +++ b/test/fixtures/basic/modules/runtime/page.vue @@ -8,7 +8,7 @@ definePageMeta({ }) if (import.meta.server) { - setResponseHeader(useRequestEvent(), 'x-extend', useRoute().meta.value as string) + setResponseHeader(useRequestEvent()!, 'x-extend', useRoute().meta.value as string) } diff --git a/test/fixtures/basic/plugins/server-only.server.ts b/test/fixtures/basic/plugins/server-only.server.ts index f205d70ef1..46e045b86f 100644 --- a/test/fixtures/basic/plugins/server-only.server.ts +++ b/test/fixtures/basic/plugins/server-only.server.ts @@ -4,7 +4,9 @@ export default defineNuxtPlugin({ name: 'server-only-plugin', setup () { const evt = useRequestEvent() - setHeader(evt, 'custom-head', 'hello') + if (evt) { + setHeader(evt, 'custom-head', 'hello') + } }, env: { islands: false