RPC

import { getFactory } from "@/server/router/factory";

export const exampleRouter = getFactory()
    .createApp()
    .get("/", async (c) => {
        return c.json({ ok: true }, 200);
    });

const app = new Hono<{ Bindings: CloudflareEnv }>()
    .basePath("/api")
    .use(cors)
    .route("/example", router.example);

import { getFactory } from "@/server/router/factory";
import { isAuthenticated } from "@/server/router/middleware";

export const exampleRouter = getFactory()
    .createApp()
    .get("/", isAuthenticated({ id: "example" }), async (c) => {
        // If `isAuthenticated` is provided, the user will be available
        // in the context variable `c.var`
        const { user } = c.var;

        return c.json({ ok: true, user }, 200);
    });

import { rpc } from "@/lib/rpc";

// This makes a GET request to the /api/teams endpoint
const res = await rpc.api.teams.$get();

if (res.status !== 200 || !res.ok) {
    throw new Error("Failed to fetch teams");
}

const teams = await res.json().then((data) => data.teams);

"use client";

import { useQuery } from "@tanstack/react-query";
import { rpc } from "@/lib/rpc";
import type { FC } from "react";

const Page: FC = () => {
    const teams = useQuery({
        // This is a utility to create a query key, which is used to cache
        // the result
        queryKey: rpc.$key(rpc.api.teams),
        queryFn: async () => {
            // This makes a GET request to the /api/teams endpoint
            const res = await rpc.api.teams.$get();

            if (res.status !== 200 || !res.ok) {
                throw new Error("Failed to fetch teams");
            }

            return res.json().then((data) => data.teams);
        },
    });

    return (
        <div>
            {teams.isPending && <p>Loading...</p>}
            {teams.isError && <p>Error: {teams.error.message}</p>}
            {teams.isSuccess && (
                <ul>
                    {teams.data.map((team) => (
                        <li key={team.id}>{team.name}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default Page;

"use client";

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { rpc } from "@/lib/rpc";
import type { InferRequestType } from "hono";
import type { FC } from "react";

interface PageProps {
    params: Promise<{ teamSlug: string }>;
}

const Page: FC<PageProps> = async (props) => {
    const { teamSlug } = await props.params;

    const queryClient = useQueryClient();

    // This makes a PATCH request to the /api/teams/:urlSlug endpoint
    const updateFn = rpc.api.teams[":urlSlug"].$patch;
    const updateTeam = useMutation({
        mutationFn: async (input: InferRequestType<typeof updateFn>) => {
            const res = await updateFn(input);

            if (res.status !== 200 || !res.ok) {
                throw new Error("Failed to update team");
            }

            const updated = res.json().then((data) => data.team);

            console.log("Updated team:", updated);
        },
        // This is used to invalidate the query cache for the teams endpoint
        onSuccess: async () => {
            await queryClient.invalidateQueries({
                queryKey: rpc.$key(rpc.api.teams),
            });
        },
    });

    const handleUpdate = async () => {
        await updateTeam.mutateAsync({
            // This specifies the :urlSlug parameter in the endpoint
            // The type is inferred from the endpoint definition
            // so you get type safety here
            param: { urlSlug: teamSlug },
            // This is the request body
            // The type is also inferred from the endpoint definition
            // so you get type safety here as well
            json: { name: "My new team" },
        });
    };

    return <div>{/* ... */}</div>;
};

pnpm hono:generate

// rpc with generated flat types
// this is extremely performant, but requires you to run `pnpm hono:generate`
import { rpc } from "@/hono/rpc";

// rpc with fully inferred types
// this may show down your Next.js dev server and IDE performance,
// but it does not require you to run `pnpm hono:generate`
import { rpc } from "@/lib/rpc";