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, operation, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @operation({
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 @operation({
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, operation, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @operation({
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 @operation({
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, operation, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @operation({
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 @operation({
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, operation, type VovkRequest } from 'vovk';
2
3@prefix('hello-world')
4export default class HelloWorldController {
5 @operation({
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 @operation({
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}
1404: Not Found
1404: Not Found
1404: Not Found
1404: Not Found
1'use client';
2import { HelloWorldRPC, JSONLinesRPC } from 'vovk-client';
3import {
4 QueryClient,
5 QueryClientProvider,
6 useQuery,
7 useMutation,
8 experimental_streamedQuery as streamedQuery,
9} from '@tanstack/react-query';
10import { useState } from 'react';
11
12export function Example() {
13 const query = useQuery({
14 queryKey: HelloWorldRPC.getHello.queryKey(),
15 queryFn: () => HelloWorldRPC.getHello(),
16 });
17 const stream = useQuery({
18 queryKey: JSONLinesRPC.streamTokens.queryKey(['todo']),
19 queryFn: streamedQuery({
20 queryFn: () => JSONLinesRPC.streamTokens(),
21 }),
22 });
23 const mutation = useMutation({
24 mutationFn: HelloWorldRPC.postHello,
25 });
26
27 const [userInput, setUserInput] = useState('');
28
29 return (
30 <div>
31 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
32 <div>
33 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
34 </div>
35 <div>
36 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
37 </div>
38 <div className="input-group">
39 <input
40 type="text"
41 placeholder="Type a greeting..."
42 value={userInput}
43 onChange={(e) => setUserInput(e.currentTarget.value)}
44 />
45 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
46 </div>
47 </div>
48 );
49}
50
51const queryClient = new QueryClient();
52
53export default function ReactQueryExample() {
54 return (
55 <QueryClientProvider client={queryClient}>
56 <Example />
57 </QueryClientProvider>
58 );
59}
1'use client';
2import { HelloWorldRPC, JSONLinesRPC } from 'vovk-client';
3import {
4 QueryClient,
5 QueryClientProvider,
6 useQuery,
7 useMutation,
8 experimental_streamedQuery as streamedQuery,
9} from '@tanstack/react-query';
10import { useState } from 'react';
11
12export function Example() {
13 const query = useQuery({
14 queryKey: HelloWorldRPC.getHello.queryKey(),
15 queryFn: () => HelloWorldRPC.getHello(),
16 });
17 const stream = useQuery({
18 queryKey: JSONLinesRPC.streamTokens.queryKey(['todo']),
19 queryFn: streamedQuery({
20 queryFn: () => JSONLinesRPC.streamTokens(),
21 }),
22 });
23 const mutation = useMutation({
24 mutationFn: HelloWorldRPC.postHello,
25 });
26
27 const [userInput, setUserInput] = useState('');
28
29 return (
30 <div>
31 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
32 <div>
33 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
34 </div>
35 <div>
36 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
37 </div>
38 <div className="input-group">
39 <input
40 type="text"
41 placeholder="Type a greeting..."
42 value={userInput}
43 onChange={(e) => setUserInput(e.currentTarget.value)}
44 />
45 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
46 </div>
47 </div>
48 );
49}
50
51const queryClient = new QueryClient();
52
53export default function ReactQueryExample() {
54 return (
55 <QueryClientProvider client={queryClient}>
56 <Example />
57 </QueryClientProvider>
58 );
59}
1'use client';
2import { HelloWorldRPC, JSONLinesRPC } from 'vovk-client';
3import {
4 QueryClient,
5 QueryClientProvider,
6 useQuery,
7 useMutation,
8 experimental_streamedQuery as streamedQuery,
9} from '@tanstack/react-query';
10import { useState } from 'react';
11
12export function Example() {
13 const query = useQuery({
14 queryKey: HelloWorldRPC.getHello.queryKey(),
15 queryFn: () => HelloWorldRPC.getHello(),
16 });
17 const stream = useQuery({
18 queryKey: JSONLinesRPC.streamTokens.queryKey(['todo']),
19 queryFn: streamedQuery({
20 queryFn: () => JSONLinesRPC.streamTokens(),
21 }),
22 });
23 const mutation = useMutation({
24 mutationFn: HelloWorldRPC.postHello,
25 });
26
27 const [userInput, setUserInput] = useState('');
28
29 return (
30 <div>
31 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
32 <div>
33 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
34 </div>
35 <div>
36 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
37 </div>
38 <div className="input-group">
39 <input
40 type="text"
41 placeholder="Type a greeting..."
42 value={userInput}
43 onChange={(e) => setUserInput(e.currentTarget.value)}
44 />
45 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
46 </div>
47 </div>
48 );
49}
50
51const queryClient = new QueryClient();
52
53export default function ReactQueryExample() {
54 return (
55 <QueryClientProvider client={queryClient}>
56 <Example />
57 </QueryClientProvider>
58 );
59}
1'use client';
2import { HelloWorldRPC, JSONLinesRPC } from 'vovk-client';
3import {
4 QueryClient,
5 QueryClientProvider,
6 useQuery,
7 useMutation,
8 experimental_streamedQuery as streamedQuery,
9} from '@tanstack/react-query';
10import { useState } from 'react';
11
12export function Example() {
13 const query = useQuery({
14 queryKey: HelloWorldRPC.getHello.queryKey(),
15 queryFn: () => HelloWorldRPC.getHello(),
16 });
17 const stream = useQuery({
18 queryKey: JSONLinesRPC.streamTokens.queryKey(['todo']),
19 queryFn: streamedQuery({
20 queryFn: () => JSONLinesRPC.streamTokens(),
21 }),
22 });
23 const mutation = useMutation({
24 mutationFn: HelloWorldRPC.postHello,
25 });
26
27 const [userInput, setUserInput] = useState('');
28
29 return (
30 <div>
31 <div>Query result: {query.data?.greeting ?? <em>Loading...</em>}</div>
32 <div>
33 Stream result: {stream.data?.map(({ message }, i) => <span key={i}>{message}</span>) ?? <em>Loading...</em>}
34 </div>
35 <div>
36 Mutation result: {mutation.data?.greeting ?? (mutation.isPending ? <em>Loading...</em> : <em>None</em>)}
37 </div>
38 <div className="input-group">
39 <input
40 type="text"
41 placeholder="Type a greeting..."
42 value={userInput}
43 onChange={(e) => setUserInput(e.currentTarget.value)}
44 />
45 <button onClick={() => mutation.mutate({ body: { greeting: userInput } })}>Mutate</button>
46 </div>
47 </div>
48 );
49}
50
51const queryClient = new QueryClient();
52
53export default function ReactQueryExample() {
54 return (
55 <QueryClientProvider client={queryClient}>
56 <Example />
57 </QueryClientProvider>
58 );
59}
Last updated on