From 215f58ffb8febc6cb67fd1e4912617a29cfdb2fe Mon Sep 17 00:00:00 2001 From: unnoq Date: Thu, 24 Jul 2025 11:00:19 +0700 Subject: [PATCH 1/2] docs: expand cloudflare worker playground --- playgrounds/cloudflare-worker/package.json | 6 + playgrounds/cloudflare-worker/src/App.tsx | 31 +- .../src/components/chat-room.tsx | 8 +- .../src/components/orpc-mutation.tsx | 58 + .../src/components/orpc-query.tsx | 68 + playgrounds/cloudflare-worker/src/lib/orpc.ts | 7 +- playgrounds/cloudflare-worker/src/main.tsx | 7 +- playgrounds/cloudflare-worker/worker/index.ts | 119 +- .../worker/middlewares/auth.ts | 35 + .../worker/middlewares/db.ts | 109 ++ .../worker/middlewares/retry.ts | 35 + playgrounds/cloudflare-worker/worker/orpc.ts | 10 + .../cloudflare-worker/worker/router/auth.ts | 45 + .../cloudflare-worker/worker/router/index.ts | 26 + .../worker/router/message.ts | 21 + .../cloudflare-worker/worker/router/planet.ts | 98 ++ .../cloudflare-worker/worker/router/sse.ts | 22 + .../cloudflare-worker/worker/schemas/auth.ts | 10 + .../worker/schemas/planet.ts | 27 + .../cloudflare-worker/worker/schemas/user.ts | 37 + pnpm-lock.yaml | 1534 ++++++++++++++++- 21 files changed, 2210 insertions(+), 103 deletions(-) create mode 100644 playgrounds/cloudflare-worker/src/components/orpc-mutation.tsx create mode 100644 playgrounds/cloudflare-worker/src/components/orpc-query.tsx create mode 100644 playgrounds/cloudflare-worker/worker/middlewares/auth.ts create mode 100644 playgrounds/cloudflare-worker/worker/middlewares/db.ts create mode 100644 playgrounds/cloudflare-worker/worker/middlewares/retry.ts create mode 100644 playgrounds/cloudflare-worker/worker/orpc.ts create mode 100644 playgrounds/cloudflare-worker/worker/router/auth.ts create mode 100644 playgrounds/cloudflare-worker/worker/router/index.ts create mode 100644 playgrounds/cloudflare-worker/worker/router/message.ts create mode 100644 playgrounds/cloudflare-worker/worker/router/planet.ts create mode 100644 playgrounds/cloudflare-worker/worker/router/sse.ts create mode 100644 playgrounds/cloudflare-worker/worker/schemas/auth.ts create mode 100644 playgrounds/cloudflare-worker/worker/schemas/planet.ts create mode 100644 playgrounds/cloudflare-worker/worker/schemas/user.ts diff --git a/playgrounds/cloudflare-worker/package.json b/playgrounds/cloudflare-worker/package.json index 046ceeeb9..5e448a6f4 100644 --- a/playgrounds/cloudflare-worker/package.json +++ b/playgrounds/cloudflare-worker/package.json @@ -15,7 +15,13 @@ "@cloudflare/vite-plugin": "^1.9.6", "@orpc/client": "next", "@orpc/experimental-durable-event-iterator": "next", + "@orpc/json-schema": "next", + "@orpc/openapi": "next", "@orpc/server": "next", + "@orpc/tanstack-query": "next", + "@orpc/zod": "next", + "@scalar/api-reference-react": "^0.7.34", + "@tanstack/react-query": "^5.83.0", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.5", "@vitejs/plugin-react": "^4.6.0", diff --git a/playgrounds/cloudflare-worker/src/App.tsx b/playgrounds/cloudflare-worker/src/App.tsx index d06ea35ba..1115812e4 100644 --- a/playgrounds/cloudflare-worker/src/App.tsx +++ b/playgrounds/cloudflare-worker/src/App.tsx @@ -1,9 +1,36 @@ import { ChatRoom } from './components/chat-room' +import { CreatePlanetMutationForm } from './components/orpc-mutation' +import { ListPlanetsQuery } from './components/orpc-query' +import '@scalar/api-reference-react/style.css' +import { ApiReferenceReact } from '@scalar/api-reference-react' export default function App() { + if (location.pathname === '/api') { + return ( + + ) + } + return ( -
+
+

ORPC Playground

+

+ You can visit the + {' '} + Scalar API Reference + {' '} + page. +

+
+ +
+ +
-
+ ) } diff --git a/playgrounds/cloudflare-worker/src/components/chat-room.tsx b/playgrounds/cloudflare-worker/src/components/chat-room.tsx index e72f54d53..712d352ba 100644 --- a/playgrounds/cloudflare-worker/src/components/chat-room.tsx +++ b/playgrounds/cloudflare-worker/src/components/chat-room.tsx @@ -3,13 +3,13 @@ import { client } from '../lib/orpc' export function ChatRoom() { const [messages, setMessages] = useState([]) - const [iterator, setIterator] = useState> | null>(null) + const [iterator, setIterator] = useState> | null>(null) useEffect(() => { const controller = new AbortController() void (async () => { - const iterator = await client.onMessage(undefined, { signal: controller.signal }) + const iterator = await client.message.on(undefined, { signal: controller.signal }) setIterator(iterator) for await (const message of iterator) { @@ -28,7 +28,9 @@ export function ChatRoom() { const form = new FormData(e.target as HTMLFormElement) const message = form.get('message') as string - await client.sendMessage({ message }) + await client.message.send({ message }) + // or --- + // await iterator?.publishMessageRPC({ message }) } return ( diff --git a/playgrounds/cloudflare-worker/src/components/orpc-mutation.tsx b/playgrounds/cloudflare-worker/src/components/orpc-mutation.tsx new file mode 100644 index 000000000..69aed1040 --- /dev/null +++ b/playgrounds/cloudflare-worker/src/components/orpc-mutation.tsx @@ -0,0 +1,58 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query' +import { orpc } from '../lib/orpc' + +export function CreatePlanetMutationForm() { + const queryClient = useQueryClient() + + const { mutate } = useMutation( + orpc.planet.create.mutationOptions({ + onSuccess() { + queryClient.invalidateQueries({ + queryKey: orpc.planet.key(), + }) + }, + onError(error) { + console.error(error) + alert(error.message) + }, + }), + ) + + return ( +
+

oRPC and Tanstack Query | Create Planet example

+ +
{ + e.preventDefault() + const form = new FormData(e.target as HTMLFormElement) + + const name = form.get('name') as string + const description + = (form.get('description') as string | null) ?? undefined + const image = form.get('image') as File + + mutate({ + name, + description, + image: image.size > 0 ? image : undefined, + }) + }} + > + +