fork of hey-api/openapi-ts because I need some additional things
Merge pull request #3361 from rigtigeEmil/fix/client-nuxt-computed-body-serialization
+85
-26
+5
.changeset/rare-glasses-smile.md
+5
.changeset/rare-glasses-smile.md
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-false/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-false/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-number/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-number/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-strict/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-strict/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-string/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/base-url-string/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/clean-false/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/clean-false/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/default/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/default/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/import-file-extension-ts/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/import-file-extension-ts/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen.ts';
7
7
import type { HttpMethod } from '../core/types.gen.ts';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/sdk-client-optional/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/sdk-client-optional/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/sdk-client-required/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/sdk-client-required/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/tsconfig-node16-sdk/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/tsconfig-node16-sdk/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen.js';
7
7
import type { HttpMethod } from '../core/types.gen.js';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/tsconfig-nodenext-sdk/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/clients/@hey-api/client-nuxt/tsconfig-nodenext-sdk/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen.js';
7
7
import type { HttpMethod } from '../core/types.gen.js';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/sse-nuxt/client/client.gen.ts
+2
-2
packages/openapi-ts-tests/main/test/__snapshots__/3.1.x/sse-nuxt/client/client.gen.ts
···
1
1
// This file is auto-generated by @hey-api/openapi-ts
2
2
3
3
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
4
-
import { reactive, ref, watch } from 'vue';
4
+
import { reactive, ref, toValue, watch } from 'vue';
5
5
6
6
import { createSseClient } from '../core/serverSentEvents.gen';
7
7
import type { HttpMethod } from '../core/types.gen';
···
138
138
body: opts.body,
139
139
bodySerializer: opts.bodySerializer,
140
140
});
141
-
const body = ref(serializeBody(opts));
141
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
142
142
opts.body = body;
143
143
watch(bodyParams, (changed) => {
144
144
body.value = serializeBody(changed);
+54
packages/openapi-ts/src/plugins/@hey-api/client-nuxt/__tests__/client.test.ts
+54
packages/openapi-ts/src/plugins/@hey-api/client-nuxt/__tests__/client.test.ts
···
1
+
// Mock $fetch global (Nuxt auto-import)
2
+
const $fetchMock = vi.fn();
3
+
vi.stubGlobal('$fetch', $fetchMock);
4
+
1
5
// Mock Nuxt composables with realistic return values
2
6
vi.mock('nuxt/app', () => ({
3
7
useAsyncData: vi.fn(() => ({
···
26
30
})),
27
31
}));
28
32
33
+
import { useFetch } from 'nuxt/app';
34
+
import { computed, ref } from 'vue';
35
+
29
36
import { createClient } from '../bundle/client';
37
+
38
+
describe('useFetch with computed body', () => {
39
+
it('does not throw when body is a ComputedRef', () => {
40
+
const client = createClient();
41
+
const page = ref(1);
42
+
const body = computed(() => ({ page: page.value, pageSize: 10 }));
43
+
44
+
expect(() => {
45
+
client.post({
46
+
body,
47
+
composable: 'useFetch',
48
+
url: '/test',
49
+
});
50
+
}).not.toThrow();
51
+
});
52
+
53
+
it('serializes ComputedRef body correctly on initial call', () => {
54
+
const client = createClient();
55
+
const body = computed(() => ({ page: 1, search: 'hello' }));
56
+
57
+
client.post({
58
+
body,
59
+
composable: 'useFetch',
60
+
url: '/test',
61
+
});
62
+
63
+
// useFetch should be called with the serialized body as a ref
64
+
expect(useFetch).toHaveBeenCalled();
65
+
const callArgs = vi.mocked(useFetch).mock.calls.at(-1)!;
66
+
const opts = callArgs[1] as Record<string, unknown>;
67
+
// body should be a ref containing the JSON-serialized value
68
+
expect((opts.body as { value: unknown }).value).toBe('{"page":1,"search":"hello"}');
69
+
});
70
+
71
+
it('does not throw when body is a plain Ref', () => {
72
+
const client = createClient();
73
+
const body = ref({ page: 1, pageSize: 10 });
74
+
75
+
expect(() => {
76
+
client.post({
77
+
body,
78
+
composable: 'useFetch',
79
+
url: '/test',
80
+
});
81
+
}).not.toThrow();
82
+
});
83
+
});
30
84
31
85
describe('buildUrl', () => {
32
86
const client = createClient();
+2
-2
packages/openapi-ts/src/plugins/@hey-api/client-nuxt/bundle/client.ts
+2
-2
packages/openapi-ts/src/plugins/@hey-api/client-nuxt/bundle/client.ts
···
1
1
import { useAsyncData, useFetch, useLazyAsyncData, useLazyFetch } from 'nuxt/app';
2
-
import { reactive, ref, watch } from 'vue';
2
+
import { reactive, ref, toValue, watch } from 'vue';
3
3
4
4
import { createSseClient } from '../../client-core/bundle/serverSentEvents';
5
5
import type { HttpMethod } from '../../client-core/bundle/types';
···
136
136
body: opts.body,
137
137
bodySerializer: opts.bodySerializer,
138
138
});
139
-
const body = ref(serializeBody(opts));
139
+
const body = ref(serializeBody({ ...opts, body: toValue(opts.body) }));
140
140
opts.body = body;
141
141
watch(bodyParams, (changed) => {
142
142
body.value = serializeBody(changed);