// Our wrapper around tanstack query import { useMutation } from "@connectrpc/connect-query"; import { createFileRoute, Link, useRouter } from "@tanstack/react-router"; // Our generated query import { vote } from "../gen/proto/goat/v1/goat-GoatService_connectquery"; // Our generated types import { Vote } from "../gen/proto/goat/v1/goat_pb"; import { Button } from "@goat/ui/components/button"; export const Route = createFileRoute("/")({ component: App, }); function App() { // Use the mutation hook with our generated query const v = useMutation(vote); const { navigate } = useRouter(); return ( <div> <div > <p>Is this the 🐐 stack?</p> <div> <Button variant={"outline"} disabled={v.isPending} onClick={async () => { await v.mutateAsync({ Vote: Vote.YES, }); navigate({ to: "/results" }); }} > Yes </Button> <Button variant={"outline"} disabled={v.isPending} onClick={async () => { await v.mutateAsync({ Vote: Vote.NO, }); navigate({ to: "/results" }); }} > No </Button> </div> </div> </div> ); }

Introducing the GoaT stack