From 7f0fe2fbe789825c942a76dac3f73a321631414f Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 13 May 2023 20:49:05 +0100 Subject: [PATCH] fix(nuxt): allow serialising undefined refs (#20828) --- packages/nuxt/src/app/plugins/revive-payload.client.ts | 4 ++-- packages/nuxt/src/app/plugins/revive-payload.server.ts | 4 ++-- test/basic.test.ts | 1 + test/fixtures/basic/pages/json-payload.vue | 2 ++ 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/nuxt/src/app/plugins/revive-payload.client.ts b/packages/nuxt/src/app/plugins/revive-payload.client.ts index b291789341..b9d5c1498d 100644 --- a/packages/nuxt/src/app/plugins/revive-payload.client.ts +++ b/packages/nuxt/src/app/plugins/revive-payload.client.ts @@ -5,8 +5,8 @@ import { defineNuxtPlugin } from '#app/nuxt' const revivers = { NuxtError: (data: any) => createError(data), - EmptyShallowRef: (data: any) => shallowRef(JSON.parse(data)), - EmptyRef: (data: any) => ref(JSON.parse(data)), + EmptyShallowRef: (data: any) => shallowRef(data === '_' ? undefined : JSON.parse(data)), + EmptyRef: (data: any) => ref(data === '_' ? undefined : JSON.parse(data)), ShallowRef: (data: any) => shallowRef(data), ShallowReactive: (data: any) => shallowReactive(data), Ref: (data: any) => ref(data), diff --git a/packages/nuxt/src/app/plugins/revive-payload.server.ts b/packages/nuxt/src/app/plugins/revive-payload.server.ts index b8e54569f6..da952ad944 100644 --- a/packages/nuxt/src/app/plugins/revive-payload.server.ts +++ b/packages/nuxt/src/app/plugins/revive-payload.server.ts @@ -6,8 +6,8 @@ import { defineNuxtPlugin } from '#app/nuxt' const reducers = { NuxtError: (data: any) => isNuxtError(data) && data.toJSON(), - EmptyShallowRef: (data: any) => isRef(data) && isShallow(data) && !data.value && JSON.stringify(data.value), - EmptyRef: (data: any) => isRef(data) && !data.value && JSON.stringify(data.value), + EmptyShallowRef: (data: any) => isRef(data) && isShallow(data) && !data.value && (JSON.stringify(data.value) || '_'), + EmptyRef: (data: any) => isRef(data) && !data.value && (JSON.stringify(data.value) || '_'), ShallowRef: (data: any) => isRef(data) && isShallow(data) && data.value, ShallowReactive: (data: any) => isReactive(data) && isShallow(data) && toRaw(data), Ref: (data: any) => isRef(data) && data.value, diff --git a/test/basic.test.ts b/test/basic.test.ts index c7d2a94d00..e18c5bfeb1 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -380,6 +380,7 @@ describe('rich payloads', () => { 'Recursive objects: true', 'Shallow reactive: true', 'Shallow ref: true', + 'Undefined ref: true', 'Reactive: true', 'Ref: true', 'Error: true' diff --git a/test/fixtures/basic/pages/json-payload.vue b/test/fixtures/basic/pages/json-payload.vue index 97a7fc8dd0..0825bde96c 100644 --- a/test/fixtures/basic/pages/json-payload.vue +++ b/test/fixtures/basic/pages/json-payload.vue @@ -6,6 +6,7 @@ if (process.server) { state.value.ref = r state.value.shallowReactive = shallowReactive({ nested: { ref: r } }) state.value.shallowRef = shallowRef(false) + state.value.undefined = shallowRef() state.value.reactive = reactive({ ref: r }) state.value.error = createError({ message: 'error' }) state.value.date = new Date() @@ -19,6 +20,7 @@ if (process.server) { Error: {{ isNuxtError(state.error) }}
Shallow reactive: {{ isReactive(state.shallowReactive) && isShallow(state.shallowReactive) }}
Shallow ref: {{ isShallow(state.shallowRef) }}
+ Undefined ref: {{ isRef(state.undefined) }}
Reactive: {{ isReactive(state.reactive) }}
Ref: {{ isRef(state.ref) }}
Recursive objects: {{ state.ref === state.shallowReactive.nested.ref }}