open-index/open-npm huggingface dataset:
npm package: @gencow/react
Description: React hooks for Gencow — useQuery, useMutation, GencowProvider
Latest version: 0.2.2

# @gencow/react

React hooks for [Gencow](https://gencow.app) — `useQuery`, `useMutation`, `GencowProvider`.

## Install

```bash
npm install @gencow/react
```

## Quick Start

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

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

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

## Hooks

### `useQuery` — 실시간 데이터 구독

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

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

- `data === undefined && isLoading === true` = 로딩 중
- WebSocket으로 서버가 데이터 변경 시 자동 갱신
- 에러 발생 시 `error` 필드로 확인 가능

### 조건부 쿼리 (skip/enabled)

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

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

### `useMutation` — 데이터 변경

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

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

### `useStatus` — WebSocket 연결 상태

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

const { isConnected } = useStatus();
```

## Auth

```tsx
import { createAuthClient } from "@gencow/react";

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

// 로그인
await signIn("user@example.com", "password");

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

## License

MIT