React Query
React Query example
Demonstrates mutation, query, and streamed query.
Result
Query result: Loading...
Stream result: Loading...
Mutation result: None
Code
1import { get, post, prefix, openapi, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @openapi({
6 summary: 'Get a greeting',
7 description: 'Get a greeting from the server',
8 })
9 @get('greeting')
10 static getHello() {
11 return { greeting: 'Hello world!' };
12 }
13
14 @openapi({
15 summary: 'Post a greeting',
16 description: 'Post a greeting to the server',
17 })
18 @post('greeting')
19 static async postHello(req: VovkRequest<{ greeting: string }>) {
20 const { greeting } = await req.json();
21 return { greeting };
22 }
23}
1import { get, post, prefix, openapi, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @openapi({
6 summary: 'Get a greeting',
7 description: 'Get a greeting from the server',
8 })
9 @get('greeting')
10 static getHello() {
11 return { greeting: 'Hello world!' };
12 }
13
14 @openapi({
15 summary: 'Post a greeting',
16 description: 'Post a greeting to the server',
17 })
18 @post('greeting')
19 static async postHello(req: VovkRequest<{ greeting: string }>) {
20 const { greeting } = await req.json();
21 return { greeting };
22 }
23}
1import { get, post, prefix, openapi, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @openapi({
6 summary: 'Get a greeting',
7 description: 'Get a greeting from the server',
8 })
9 @get('greeting')
10 static getHello() {
11 return { greeting: 'Hello world!' };
12 }
13
14 @openapi({
15 summary: 'Post a greeting',
16 description: 'Post a greeting to the server',
17 })
18 @post('greeting')
19 static async postHello(req: VovkRequest<{ greeting: string }>) {
20 const { greeting } = await req.json();
21 return { greeting };
22 }
23}
1import { get, post, prefix, openapi, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @openapi({
6 summary: 'Get a greeting',
7 description: 'Get a greeting from the server',
8 })
9 @get('greeting')
10 static getHello() {
11 return { greeting: 'Hello world!' };
12 }
13
14 @openapi({
15 summary: 'Post a greeting',
16 description: 'Post a greeting to the server',
17 })
18 @post('greeting')
19 static async postHello(req: VovkRequest<{ greeting: string }>) {
20 const { greeting } = await req.json();
21 return { greeting };
22 }
23}
1import { get, prefix, openapi } from 'vovk';
2
3type Token = { message: string };
4
5@prefix('stream')
6export default class StreamController {
7 @openapi({
8 summary: 'Stream tokens',
9 description: 'Stream tokens to the client',
10 })
11 @get('tokens', { cors: true })
12 static async *streamTokens() {
13 const tokens: Token[] = [
14 { message: 'Hello,' },
15 { message: ' World' },
16 { message: ' from' },
17 { message: ' Stream' },
18 { message: '!' },
19 ];
20
21 for (const token of tokens) {
22 yield token;
23 await new Promise((resolve) => setTimeout(resolve, 300));
24 }
25 }
26}
1import { get, prefix, openapi } from 'vovk';
2
3type Token = { message: string };
4
5@prefix('stream')
6export default class StreamController {
7 @openapi({
8 summary: 'Stream tokens',
9 description: 'Stream tokens to the client',
10 })
11 @get('tokens', { cors: true })
12 static async *streamTokens() {
13 const tokens: Token[] = [
14 { message: 'Hello,' },
15 { message: ' World' },
16 { message: ' from' },
17 { message: ' Stream' },
18 { message: '!' },
19 ];
20
21 for (const token of tokens) {
22 yield token;
23 await new Promise((resolve) => setTimeout(resolve, 300));
24 }
25 }
26}
1import { get, prefix, openapi } from 'vovk';
2
3type Token = { message: string };
4
5@prefix('stream')
6export default class StreamController {
7 @openapi({
8 summary: 'Stream tokens',
9 description: 'Stream tokens to the client',
10 })
11 @get('tokens', { cors: true })
12 static async *streamTokens() {
13 const tokens: Token[] = [
14 { message: 'Hello,' },
15 { message: ' World' },
16 { message: ' from' },
17 { message: ' Stream' },
18 { message: '!' },
19 ];
20
21 for (const token of tokens) {
22 yield token;
23 await new Promise((resolve) => setTimeout(resolve, 300));
24 }
25 }
26}
1import { get, prefix, openapi } from 'vovk';
2
3type Token = { message: string };
4
5@prefix('stream')
6export default class StreamController {
7 @openapi({
8 summary: 'Stream tokens',
9 description: 'Stream tokens to the client',
10 })
11 @get('tokens', { cors: true })
12 static async *streamTokens() {
13 const tokens: Token[] = [
14 { message: 'Hello,' },
15 { message: ' World' },
16 { message: ' from' },
17 { message: ' Stream' },
18 { message: '!' },
19 ];
20
21 for (const token of tokens) {
22 yield token;
23 await new Promise((resolve) => setTimeout(resolve, 300));
24 }
25 }
26}
1'use client';
2import { HelloWorldRPC, StreamRPC } from 'vovk-client';
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4import { useState } from 'react';
5
6export function Example() {
7 const query = HelloWorldRPC.getHello.useQuery();
8 const stream = StreamRPC.streamTokens.useQuery();
9 const mutation = HelloWorldRPC.postHello.useMutation();
10
11 const [userInput, setUserInput] = useState('');
12
13 return (
14 <div>
15 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
16 <div>
17 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
18 </div>
19 <div>
20 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
21 </div>
22 <div className="input-group">
23 <input
24 type="text"
25 placeholder="Type a greeting..."
26 value={userInput}
27 onChange={(e) => setUserInput(e.currentTarget.value)}
28 />
29 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
30 </div>
31 </div>
32 );
33}
34
35const queryClient = new QueryClient();
36
37export default function ReactQueryExample() {
38 return (
39 <QueryClientProvider client={queryClient}>
40 <Example />
41 </QueryClientProvider>
42 );
43}
1'use client';
2import { HelloWorldRPC, StreamRPC } from 'vovk-client';
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4import { useState } from 'react';
5
6export function Example() {
7 const query = HelloWorldRPC.getHello.useQuery();
8 const stream = StreamRPC.streamTokens.useQuery();
9 const mutation = HelloWorldRPC.postHello.useMutation();
10
11 const [userInput, setUserInput] = useState('');
12
13 return (
14 <div>
15 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
16 <div>
17 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
18 </div>
19 <div>
20 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
21 </div>
22 <div className="input-group">
23 <input
24 type="text"
25 placeholder="Type a greeting..."
26 value={userInput}
27 onChange={(e) => setUserInput(e.currentTarget.value)}
28 />
29 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
30 </div>
31 </div>
32 );
33}
34
35const queryClient = new QueryClient();
36
37export default function ReactQueryExample() {
38 return (
39 <QueryClientProvider client={queryClient}>
40 <Example />
41 </QueryClientProvider>
42 );
43}
1'use client';
2import { HelloWorldRPC, StreamRPC } from 'vovk-client';
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4import { useState } from 'react';
5
6export function Example() {
7 const query = HelloWorldRPC.getHello.useQuery();
8 const stream = StreamRPC.streamTokens.useQuery();
9 const mutation = HelloWorldRPC.postHello.useMutation();
10
11 const [userInput, setUserInput] = useState('');
12
13 return (
14 <div>
15 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
16 <div>
17 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
18 </div>
19 <div>
20 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
21 </div>
22 <div className="input-group">
23 <input
24 type="text"
25 placeholder="Type a greeting..."
26 value={userInput}
27 onChange={(e) => setUserInput(e.currentTarget.value)}
28 />
29 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
30 </div>
31 </div>
32 );
33}
34
35const queryClient = new QueryClient();
36
37export default function ReactQueryExample() {
38 return (
39 <QueryClientProvider client={queryClient}>
40 <Example />
41 </QueryClientProvider>
42 );
43}
1'use client';
2import { HelloWorldRPC, StreamRPC } from 'vovk-client';
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4import { useState } from 'react';
5
6export function Example() {
7 const query = HelloWorldRPC.getHello.useQuery();
8 const stream = StreamRPC.streamTokens.useQuery();
9 const mutation = HelloWorldRPC.postHello.useMutation();
10
11 const [userInput, setUserInput] = useState('');
12
13 return (
14 <div>
15 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
16 <div>
17 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
18 </div>
19 <div>
20 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
21 </div>
22 <div className="input-group">
23 <input
24 type="text"
25 placeholder="Type a greeting..."
26 value={userInput}
27 onChange={(e) => setUserInput(e.currentTarget.value)}
28 />
29 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
30 </div>
31 </div>
32 );
33}
34
35const queryClient = new QueryClient();
36
37export default function ReactQueryExample() {
38 return (
39 <QueryClientProvider client={queryClient}>
40 <Example />
41 </QueryClientProvider>
42 );
43}
Last updated on