Skip to content

docs(examples): StackBlitz starter templates (react-quickstart, react-tanstack-query) - #439

Open
rejifald wants to merge 3 commits into
mainfrom
worktree-stackblitz-templates
Open

docs(examples): StackBlitz starter templates (react-quickstart, react-tanstack-query)#439
rejifald wants to merge 3 commits into
mainfrom
worktree-stackblitz-templates

Conversation

@rejifald

@rejifald rejifald commented Jul 3, 2026

Copy link
Copy Markdown
Owner

What

Two minimal, browser-runnable @stitchapi/react starters under examples/stackblitz/:

Template Shows
react-quickstart stitch() + useStitch — declare an endpoint once, call it as a hook
react-tanstack-query stitchQueryOptions — a stitch as a TanStack Query queryFn (complement, not a competitor)

Openable in one click via stackblitz.com/github/rejifald/StitchAPI/tree/main/examples/stackblitz/<name> (links go live once this lands on main).

Why

Part of the launch/growth push — lower the try-cost so people can run StitchAPI in the browser without local setup. The TanStack template also backs the positioning we're using in the TanStack Query community-resources listing (a queryFn complement, not a rival fetching lib).

Notes

  • Deps are pinned to the published 1.0.0-rc.4stitchapi's npm latest tag is a stale 0.7.0, so exact pins are required or StackBlitz would install the old prototype.
  • Both templates tsc --noEmit clean against the published rc packages; the repo's format/lint/typecheck/tether pre-commit + pre-push hooks pass. examples/ is outside the pnpm workspace globs, so this doesn't touch the frozen lockfile.
  • README wiring (a "Try it online" link from the root README hero) is a deliberate follow-up to keep this PR scoped.

🤖 Generated with Claude Code

@rejifald rejifald left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

review-sweep: 1 verified finding (docs, high, in-diff — would be blocking, but GitHub rejects REQUEST_CHANGES on one's own PR). Both templates otherwise compile and vite build cleanly against the published rc.4 npm packages — this is the only thing standing between them and working demos. See inline comments.

// A stitch is an endpoint declared once and called like a local function —
// no client instance, no codegen, no config files. The explicit generic types
// the parsed JSON result; swap it for an `output:` schema to also validate it.
export const getUsers = stitch<User[]>('https://demo.stitchapi.dev/users');

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs / high] https://demo.stitchapi.dev has no live deployment — the host only exists as a fetch-intercepted fake inside the playground's sandbox-sim (packages/sandbox-sim/src/dispatch.ts KNOWN_DEMO_HOSTS), so the template fails at runtime for every visitor.

Failure: verified live 2026-07-03 — curl https://demo.stitchapi.dev/users fails the TLS handshake (SSL_ERROR_SYSCALL) and plain HTTP returns Vercel DEPLOYMENT_NOT_FOUND. StackBlitz WebContainers run a real browser fetch with no sandbox interception, so a user clicking "Open in StackBlitz" gets TypeError: Failed to fetch, useStitch lands in the error state, and the UI shows "Request failed. Retry" forever — the template's sole promise (run with no local setup) is broken on arrival.

Fix: before merging, either (a) actually deploy a demo API at demo.stitchapi.dev serving GET /users with Access-Control-Allow-Origin: * (required — StackBlitz fetches from a browser origin), e.g. reuse the sandbox-sim handlers behind a tiny Vercel function; or (b) point at a live CORS-open endpoint whose payload already matches User { id, name, email }, e.g. https://jsonplaceholder.typicode.com/users.

Note: the pre-existing top-level README.md:160 ("the live demo API at demo.stitchapi.dev") makes the same false claim and should be fixed alongside whichever option is chosen.


// The same endpoint declaration as the plain quick start. Here it feeds TanStack
// Query as the queryFn — StitchAPI does not replace TanStack Query, it fills it.
export const getUsers = stitch<User[]>('https://demo.stitchapi.dev/users');

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs / high] Same defect as react-quickstart/src/api.ts:12demo.stitchapi.dev is not deployed, so useQuery lands in the error state on first load. Fix together with the quickstart template (deploy the demo API with CORS, or point at a live endpoint matching User { id, name, email }).

# StitchAPI — StackBlitz templates

Minimal, self-contained apps you can open and run in the browser — no local setup. Each
installs the published `@stitchapi/*` packages from npm and points at the public demo API

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs / high] "the public demo API (https://demo.stitchapi.dev)" — there is no such deployment (DNS points at Vercel but returns DEPLOYMENT_NOT_FOUND; the host is only simulated inside the playground sandbox). Reword once the endpoint decision in src/api.ts is made.

@rejifald
rejifald force-pushed the worktree-stackblitz-templates branch 2 times, most recently from 39312a0 to a22367e Compare August 16, 2026 14:55
rejifald and others added 3 commits August 16, 2026 18:06
…eact-tanstack-query)

Two minimal, browser-runnable @stitchapi/react starters under examples/stackblitz/:
- react-quickstart: stitch() + useStitch
- react-tanstack-query: stitchQueryOptions as a TanStack Query queryFn (complement, not competitor)

Both pin published 1.0.0-rc.4 packages (stitchapi's `latest` npm tag is a stale 0.7.0, so
exact pins are required) and typecheck clean against them. Lowers try-cost for the launch
campaign; openable via stackblitz.com/github/.../examples/stackblitz/<name>.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Covers the index.html files and both READMEs. The markdown needed a second
pass after the rebase: Prettier's list-item indentation changed under the
repo's config since this branch was cut, so the `-   ` bullets the READMEs
were written with now fail the root `check:format` gate as `- `.
The templates were pinned to `1.0.0-rc.4`, the current release when this
branch was cut. Three release candidates have shipped since; `rc.7` is what
the repo is at and what npm's `rc` dist-tag resolves to, so a visitor opening
the StackBlitz link was starting on a library three RCs behind.

Nothing in the templates has to change to move: they use `stitch<T>(url)`,
`useStitch(stitch, input)` and `stitchQueryOptions(stitch, input)`, and none of
the breaking changes between rc.4 and rc.7 touch those call shapes — they land
on config envelopes (`wire`, `circuit`, `retry`, `timeout`, `cache`), the
token grammars, and surface-author hooks, none of which these templates use.
@rejifald
rejifald force-pushed the worktree-stackblitz-templates branch from a22367e to 237b191 Compare August 16, 2026 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant