You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This pull request introduces a new example project demonstrating how to integrate Rivet Actors with TanStack React Query in a React application. The example provides a full-stack setup, including backend actor definitions, frontend React components, build configuration, and documentation. It also updates workspace and lockfile dependencies to support the new example.
New Example: React Query Integration with Rivet Actors
Example Project Structure and Features
Adds a new examples/react-query directory with a complete example of integrating Rivet Actors and TanStack React Query, including backend actor logic, frontend React UI, and real-time state synchronization. [1][2][3][4][5][6][7][8][9][10]
Frontend Implementation
Implements a React frontend using @rivetkit/react and @tanstack/react-query, with a sample App.tsx that connects to a backend actor, subscribes to events, and mirrors actor state into the React Query cache for live UI updates. [1][2][3]
Backend Actor and API
Defines a simple counter actor in src/actors.ts and exposes it via an HTTP API using Hono in src/server.ts. [1][2]
Documentation and Configuration
Documentation and Setup
Provides a detailed README.md with setup instructions, feature overview, and resource links for the new example. Adds a tsconfig.json and package.json with all necessary dependencies and scripts for building and running the project. [1][2][3]
Build and Workspace Integration
Adds Vite and Turbo configuration for development and builds, and integrates the example into the monorepo workspace with updates to pnpm-lock.yaml and workspace dependency overrides. [1][2][3][4][5][6][7][8][9][10][11][12][13][14]
---\n## PR Review: feat(rivetkit): add support for tanstack query\n\nGood addition overall — the architecture of extracting shared query-sync logic into a dedicated @rivetkit/query-core package is clean and the example demonstrates the integration well. A few issues need attention before merge.\n\n---\n\n### Critical: Packaging Bugs\n\n**@rivetkit/react is missing required dependencies**\n\nrivetkit-typescript/packages/react/package.json imports from both @rivetkit/query-core and @tanstack/react-query but neither is listed in dependencies or peerDependencies. When published to npm, installing @rivetkit/react will not pull these packages in and end-user builds will fail at runtime.\n\n@rivetkit/query-core should be a regular dependency (or bundled), and @tanstack/react-query should be an optional peer dependency (since the query integration is opt-in via the queryClient argument).\n\n---\n\n### Important: Stale Closure in useActorQuery\n\nrivetkit-typescript/packages/react/src/mod.ts — the syncActorToQueryClient call inside useActorQuery uses actorOpts as an effect dependency:\n\n\nuseEffect(() => {\n const { unsubscribe } = syncActorToQueryClient({\n actorOpts, // new object reference on every render\n ...\n });\n return unsubscribe;\n}, [actorOpts, localQueryClient, resolvedQueryKeyFn]);\n\n\nWhen callers inline the options object, actorOpts is a new reference every render, so the teardown/resubscribe cycle fires on every render. The same key-serialization approach already used in useActor (serialize to a stable string and use that as the dep) should be applied here too.\n\n---\n\n### Important: queryFn Returning Null Masked as the Type\n\nIn both useActorQuery and the example App.tsx:\n\n\nqueryFn: () => Promise.resolve(null as unknown as ActorConnState<...>),\nenabled: false,\n\n\nIf a consumer ever calls query.refetch() — manually, via DevTools, or because of default window-focus refetch behavior — this silently overwrites the entire actor state cache entry with null. Consider throwing a descriptive error instead.\n\n---\n\n### Example Issues\n\nMissing Vercel example — CLAUDE.md requires a Vercel equivalent for every new example, or skipVercel: true in a template field of the example package.json. Neither is present here.\n\nStale copy-paste in index.html — the page title reads Hono React Counter instead of something like React Query + Rivet Actors.\n\nREADME uses npm install instead of pnpm — the project-wide convention is pnpm.\n\nREADME uses relative doc links — links like /docs/platforms/react only resolve correctly on the docs site. Use absolute URLs in the example README, consistent with other examples in the repo.\n\n**@tanstack/react-query-devtools in dependencies** — this is a dev/debug tool and belongs in devDependencies in the example package.json.\n\n---\n\n### Minor / Nits\n\n**sideEffects field** — both @rivetkit/query-core and @rivetkit/react package.json files list chunk files in sideEffects. Internal chunk files are generated artifacts, not public exports. Either omit the field entirely or set it to false if there are truly no side effects.\n\n**README.md missing from @rivetkit/reactfiles array** — @rivetkit/query-core/package.json includes it but @rivetkit/react/package.json does not. Looks like an oversight.\n\n**useEvent hook factory** — calling useRef/useStore/useEffect inside the returned useEvent closure requires multiple Biome suppressions and is fragile for React Compiler compatibility. Worth a follow-up to refactor into a proper named hook.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new example project demonstrating how to integrate Rivet Actors with TanStack React Query in a React application. The example provides a full-stack setup, including backend actor definitions, frontend React components, build configuration, and documentation. It also updates workspace and lockfile dependencies to support the new example.
New Example: React Query Integration with Rivet Actors
Example Project Structure and Features
examples/react-querydirectory with a complete example of integrating Rivet Actors and TanStack React Query, including backend actor logic, frontend React UI, and real-time state synchronization. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Frontend Implementation
@rivetkit/reactand@tanstack/react-query, with a sampleApp.tsxthat connects to a backend actor, subscribes to events, and mirrors actor state into the React Query cache for live UI updates. [1] [2] [3]Backend Actor and API
src/actors.tsand exposes it via an HTTP API using Hono insrc/server.ts. [1] [2]Documentation and Configuration
Documentation and Setup
README.mdwith setup instructions, feature overview, and resource links for the new example. Adds atsconfig.jsonandpackage.jsonwith all necessary dependencies and scripts for building and running the project. [1] [2] [3]Build and Workspace Integration
pnpm-lock.yamland workspace dependency overrides. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]