Progressive Response example

Demonstrates an experimental feature called “Progressive Response” that implemented with JSONLinesResponse on the server and handled with progressive function on the client. For demonstational purposes users and tasks resolve in random order, using setTimeout with a random delay of 0-10 seconds. Press “Load” button to load users and tasks. The response is streamed progressively, so you can see the results as they come in, rather than waiting for the entire response to be ready. Open devtools to see the network requests.

Result

Code

ProgressiveService.ts

src/modules/progressive/ProgressiveService.ts


import { JSONLinesResponse, type VovkIteration } from 'vovk';
import type ProgressiveController from './ProgressiveController.ts';
 
export default class ProgressiveService {
  static async getUsers() {
    await new Promise((resolve) => setTimeout(resolve, Math.random() * 10_000));
    return [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Alice Johnson' },
      { id: 4, name: 'Bob Brown' },
      { id: 5, name: 'Charlie White' },
    ];
  }
 
  static async getTasks() {
    await new Promise((resolve) => setTimeout(resolve, Math.random() * 10_000));
    return [
      { id: 1, title: 'Task One', completed: false },
      { id: 2, title: 'Task Two', completed: true },
      { id: 3, title: 'Task Three', completed: false },
      { id: 4, title: 'Task Four', completed: true },
      { id: 5, title: 'Task Five', completed: false },
    ];
  }
 
  static streamProgressiveResponse(
    resp: JSONLinesResponse<VovkIteration<typeof ProgressiveController.streamProgressiveResponse>>
  ) {
    Promise.all([
      this.getUsers().then((users) => resp.send({ users })),
      this.getTasks().then((tasks) => resp.send({ tasks })),
    ])
      .then(resp.close)
      .catch(resp.throw);
  }
}

The code above is fetched from GitHub repository.

ProgressiveController.ts

src/modules/progressive/ProgressiveController.ts


import { get, JSONLinesResponse, prefix, type VovkIteration } from 'vovk';
import { withZod } from 'vovk-zod';
import { z } from 'zod';
import ProgressiveService from './ProgressiveService.ts';
 
@prefix('progressive')
export default class ProgressiveController {
  @get('', { cors: true })
  static streamProgressiveResponse = withZod({
    validateEachIteration: true,
    iteration: z.union([
      z.strictObject({
        users: z.array(
          z.strictObject({
            id: z.number(),
            name: z.string(),
          })
        ),
      }),
      z.strictObject({
        tasks: z.array(
          z.strictObject({
            id: z.number(),
            title: z.string(),
            completed: z.boolean(),
          })
        ),
      }),
    ]),
    async handle(req) {
      const response = new JSONLinesResponse<VovkIteration<typeof ProgressiveController.streamProgressiveResponse>>(
        req
      );
 
      void ProgressiveService.streamProgressiveResponse(response);
 
      return response;
    },
  });
}

The code above is fetched from GitHub repository.

ProgressiveExample.tsx

src/app/progressive/ProgressiveExample.tsx


'use client';
import { useState } from 'react';
import { progressive, type VovkIteration } from 'vovk';
import { ProgressiveRPC } from '@/client';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';
 
export default function ProgressiveExample() {
  type Iteration = VovkIteration<typeof ProgressiveRPC.streamProgressiveResponse>;
  const [users, setUsers] = useState<Extract<Iteration, { users: unknown }>['users'] | null>(null);
  const [tasks, setTasks] = useState<Extract<Iteration, { tasks: unknown }>['tasks'] | null>(null);
  const [isLoaded, setIsLoaded] = useState<boolean | null>(null);
 
  const load = () => {
    setUsers(null);
    setTasks(null);
    const { users: usersPromise, tasks: tasksPromise } = progressive(ProgressiveRPC.streamProgressiveResponse);
    setIsLoaded(false);
    Promise.all([usersPromise.then(setUsers), tasksPromise.then(setTasks)]).finally(() => setIsLoaded(true));
  };
 
  return (
    <>
      <button onClick={load} disabled={isLoaded === false}>
        Load Users and Tasks Progressively {isLoaded ? 'Again' : ''}
      </button>
      {isLoaded !== null && <h2>Users</h2>}
      {isLoaded !== null && !users && <ListSkeleton />}
      {!!users?.length &&
        users?.map((user) => (
          <ul key={user.id}>
            <li>{user.name}</li>
          </ul>
        ))}
 
      {isLoaded !== null && <h2>Tasks</h2>}
      {isLoaded !== null && !tasks && <ListSkeleton />}
      {!!tasks?.length &&
        tasks?.map((task) => (
          <ul key={task.id}>
            <li>
              {task.title} {task.completed ? '✅' : ''}
            </li>
          </ul>
        ))}
    </>
  );
}
 
const ListSkeleton = () => (
  <ul>
    {Array(5)
      .fill(0)
      .map((_, index) => (
        <li key={index}>
          <Skeleton width={150} />
        </li>
      ))}
  </ul>
);

The code above is fetched from GitHub repository.

Progressive Response example

Result

Code

ProgressiveService.ts

ProgressiveController.ts

ProgressiveExample.tsx

Related Documentation