Static Params
Static Params example
This example demonstrates a static API represented by a single handler that renders 6 sets of static parameters: section (a | b) and page (1 | 2 | 3).
Result
Code
1import { z } from 'zod/v4';
2import { prefix, get, operation } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('static-params')
6export default class StaticParamsController {
7 @operation({
8 summary: 'Static Params',
9 description: 'Get the static params: section and page',
10 })
11 @get('{section}/page{page}.json', {
12 staticParams: [
13 { section: 'a', page: '1' },
14 { section: 'a', page: '2' },
15 { section: 'a', page: '3' },
16 { section: 'b', page: '1' },
17 { section: 'b', page: '2' },
18 { section: 'b', page: '3' },
19 ],
20 })
21 static getStaticParams = withZod({
22 params: z.object({
23 section: z.enum(['a', 'b']),
24 page: z.enum(['1', '2', '3']),
25 }),
26 handle: async (_req, { section, page }) => {
27 return { section, page };
28 },
29 });
30}
1import { z } from 'zod/v4';
2import { prefix, get, operation } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('static-params')
6export default class StaticParamsController {
7 @operation({
8 summary: 'Static Params',
9 description: 'Get the static params: section and page',
10 })
11 @get('{section}/page{page}.json', {
12 staticParams: [
13 { section: 'a', page: '1' },
14 { section: 'a', page: '2' },
15 { section: 'a', page: '3' },
16 { section: 'b', page: '1' },
17 { section: 'b', page: '2' },
18 { section: 'b', page: '3' },
19 ],
20 })
21 static getStaticParams = withZod({
22 params: z.object({
23 section: z.enum(['a', 'b']),
24 page: z.enum(['1', '2', '3']),
25 }),
26 handle: async (_req, { section, page }) => {
27 return { section, page };
28 },
29 });
30}
1import { z } from 'zod/v4';
2import { prefix, get, operation } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('static-params')
6export default class StaticParamsController {
7 @operation({
8 summary: 'Static Params',
9 description: 'Get the static params: section and page',
10 })
11 @get('{section}/page{page}.json', {
12 staticParams: [
13 { section: 'a', page: '1' },
14 { section: 'a', page: '2' },
15 { section: 'a', page: '3' },
16 { section: 'b', page: '1' },
17 { section: 'b', page: '2' },
18 { section: 'b', page: '3' },
19 ],
20 })
21 static getStaticParams = withZod({
22 params: z.object({
23 section: z.enum(['a', 'b']),
24 page: z.enum(['1', '2', '3']),
25 }),
26 handle: async (_req, { section, page }) => {
27 return { section, page };
28 },
29 });
30}
1import { z } from 'zod/v4';
2import { prefix, get, operation } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('static-params')
6export default class StaticParamsController {
7 @operation({
8 summary: 'Static Params',
9 description: 'Get the static params: section and page',
10 })
11 @get('{section}/page{page}.json', {
12 staticParams: [
13 { section: 'a', page: '1' },
14 { section: 'a', page: '2' },
15 { section: 'a', page: '3' },
16 { section: 'b', page: '1' },
17 { section: 'b', page: '2' },
18 { section: 'b', page: '3' },
19 ],
20 })
21 static getStaticParams = withZod({
22 params: z.object({
23 section: z.enum(['a', 'b']),
24 page: z.enum(['1', '2', '3']),
25 }),
26 handle: async (_req, { section, page }) => {
27 return { section, page };
28 },
29 });
30}
1'use client';
2import { useState } from 'react';
3import { StaticParamsRPC } from 'vovk-client';
4import { VovkParams, type VovkReturnType } from 'vovk';
5
6export default function StaticParamsExample() {
7 const [serverResponse, setServerResponse] = useState<VovkReturnType<typeof StaticParamsRPC.getStaticParams>>();
8 const [section, setSection] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['section']>('a');
9 const [page, setPage] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['page']>('1');
10
11 return (
12 <>
13 <label>Section:</label>
14 <select value={section} onChange={(e) => setSection(e.target.value as typeof section)}>
15 {['a', 'b'].map((key: string) => (
16 <option key={key} value={key}>
17 {key}
18 </option>
19 ))}
20 </select>
21 <br />
22 <label>Page:</label>
23 <select value={page} onChange={(e) => setPage(e.target.value as typeof page)}>
24 {['1', '2', '3'].map((key: string) => (
25 <option key={key} value={key}>
26 {key}
27 </option>
28 ))}
29 </select>
30 <br />
31 <button
32 onClick={async () => {
33 setServerResponse(await StaticParamsRPC.getStaticParams({ params: { section, page } }));
34 }}
35 >
36 Get static params response
37 </button>
38 <div>{serverResponse ? JSON.stringify(serverResponse) : ''}</div>
39 </>
40 );
41}
1'use client';
2import { useState } from 'react';
3import { StaticParamsRPC } from 'vovk-client';
4import { VovkParams, type VovkReturnType } from 'vovk';
5
6export default function StaticParamsExample() {
7 const [serverResponse, setServerResponse] = useState<VovkReturnType<typeof StaticParamsRPC.getStaticParams>>();
8 const [section, setSection] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['section']>('a');
9 const [page, setPage] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['page']>('1');
10
11 return (
12 <>
13 <label>Section:</label>
14 <select value={section} onChange={(e) => setSection(e.target.value as typeof section)}>
15 {['a', 'b'].map((key: string) => (
16 <option key={key} value={key}>
17 {key}
18 </option>
19 ))}
20 </select>
21 <br />
22 <label>Page:</label>
23 <select value={page} onChange={(e) => setPage(e.target.value as typeof page)}>
24 {['1', '2', '3'].map((key: string) => (
25 <option key={key} value={key}>
26 {key}
27 </option>
28 ))}
29 </select>
30 <br />
31 <button
32 onClick={async () => {
33 setServerResponse(await StaticParamsRPC.getStaticParams({ params: { section, page } }));
34 }}
35 >
36 Get static params response
37 </button>
38 <div>{serverResponse ? JSON.stringify(serverResponse) : ''}</div>
39 </>
40 );
41}
1'use client';
2import { useState } from 'react';
3import { StaticParamsRPC } from 'vovk-client';
4import { VovkParams, type VovkReturnType } from 'vovk';
5
6export default function StaticParamsExample() {
7 const [serverResponse, setServerResponse] = useState<VovkReturnType<typeof StaticParamsRPC.getStaticParams>>();
8 const [section, setSection] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['section']>('a');
9 const [page, setPage] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['page']>('1');
10
11 return (
12 <>
13 <label>Section:</label>
14 <select value={section} onChange={(e) => setSection(e.target.value as typeof section)}>
15 {['a', 'b'].map((key: string) => (
16 <option key={key} value={key}>
17 {key}
18 </option>
19 ))}
20 </select>
21 <br />
22 <label>Page:</label>
23 <select value={page} onChange={(e) => setPage(e.target.value as typeof page)}>
24 {['1', '2', '3'].map((key: string) => (
25 <option key={key} value={key}>
26 {key}
27 </option>
28 ))}
29 </select>
30 <br />
31 <button
32 onClick={async () => {
33 setServerResponse(await StaticParamsRPC.getStaticParams({ params: { section, page } }));
34 }}
35 >
36 Get static params response
37 </button>
38 <div>{serverResponse ? JSON.stringify(serverResponse) : ''}</div>
39 </>
40 );
41}
1'use client';
2import { useState } from 'react';
3import { StaticParamsRPC } from 'vovk-client';
4import { VovkParams, type VovkReturnType } from 'vovk';
5
6export default function StaticParamsExample() {
7 const [serverResponse, setServerResponse] = useState<VovkReturnType<typeof StaticParamsRPC.getStaticParams>>();
8 const [section, setSection] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['section']>('a');
9 const [page, setPage] = useState<VovkParams<typeof StaticParamsRPC.getStaticParams>['page']>('1');
10
11 return (
12 <>
13 <label>Section:</label>
14 <select value={section} onChange={(e) => setSection(e.target.value as typeof section)}>
15 {['a', 'b'].map((key: string) => (
16 <option key={key} value={key}>
17 {key}
18 </option>
19 ))}
20 </select>
21 <br />
22 <label>Page:</label>
23 <select value={page} onChange={(e) => setPage(e.target.value as typeof page)}>
24 {['1', '2', '3'].map((key: string) => (
25 <option key={key} value={key}>
26 {key}
27 </option>
28 ))}
29 </select>
30 <br />
31 <button
32 onClick={async () => {
33 setServerResponse(await StaticParamsRPC.getStaticParams({ params: { section, page } }));
34 }}
35 >
36 Get static params response
37 </button>
38 <div>{serverResponse ? JSON.stringify(serverResponse) : ''}</div>
39 </>
40 );
41}
Last updated on