Treaty TanStack QueryType-safe React Query for Elysia

import { treaty } from "@elysiajs/eden";
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";
import { createTreatyContext } from "treaty-tanstack-react-query";
import type { App } from "./server";

// Create treaty client and context
const client = treaty<App>("http://localhost:3000");
const queryClient = new QueryClient();

const { TreatyProvider, useTreaty } = createTreatyContext<typeof client>();

// Wrap your app
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TreatyProvider client={client} queryClient={queryClient}>
        <Users />
      </TreatyProvider>
    </QueryClientProvider>
  );
}

// Use type-safe queries
function Users() {
  const treaty = useTreaty();

  const { data } = useQuery(
    treaty.api.users.queryOptions() // ✨ Fully typed!
  );

  return <div>{data?.[0]?.name}</div>;
}