@gencow/react

React hooks for Gencow — useQuery, useMutation, GencowProvider.

Install

npm install @gencow/react

Quick Start

// layout.tsx
import { GencowProvider, gencowAuth } from "@gencow/react";

const { useAuth } = gencowAuth("http://localhost:5456");

export default function Layout({ children }) {
    const { token } = useAuth();
    return (
        <GencowProvider baseUrl="http://localhost:5456" token={token}>
            {children}
        </GencowProvider>
    );
}

Hooks

useQuery — 실시간 데이터 구독

import { useQuery } from "@gencow/react";
import { api } from "@/gencow/api";

const tasks = useQuery(api.tasks.list);           // Task[] | undefined
const task = useQuery(api.tasks.get, { id: 1 });  // Task | undefined

• undefined = 로딩 중 (Convex와 동일)
• WebSocket으로 서버가 데이터 변경 시 자동 갱신

조건부 쿼리 (skip/enabled)

// 방법 A: "skip" 토큰 (Convex 스타일) — 추천
const messages = useQuery(api.chat.getMessages,
    conversationId ? { conversationId } : "skip"
);

// 방법 B: enabled 옵션 (TanStack Query 스타일)
const messages = useQuery(api.chat.getMessages,
    { conversationId },
    { enabled: !!conversationId }
);
// → skip 상태에서는 API 호출 없이 undefined 반환

useMutation — 데이터 변경

import { useMutation } from "@gencow/react";

const [create, isPending, error] = useMutation(api.tasks.create);
await create({ title: "새 태스크" });
// → 서버가 WebSocket으로 useQuery를 자동 갱신

useStatus — WebSocket 연결 상태

import { useStatus } from "@gencow/react";

const { isConnected } = useStatus();

Auth

import { gencowAuth } from "@gencow/react";

export const { signIn, signUp, signOut, useAuth } = gencowAuth();

// 로그인
await signIn("[email protected]", "password");

// 컴포넌트에서
const { token, user, isAuthenticated } = useAuth();

License

MIT