npm package: @htlkg/data
Description: GraphQL client, queries, mutations, hooks, and stores for Hotelinking applications.
Latest version: 0.0.26

# @htlkg/data

GraphQL client, queries, mutations, hooks, and stores for Hotelinking applications.

## Changelog

### 0.0.25
- Added `useActivityLogs` hook for reactive activity log fetching
- Added `fetchActivityLogs` and `fetchRecentActivity` query functions
- Removed `createActivityLog` mutation (activity logging is now handled by DynamoDB Streams Lambdas, not the GraphQL proxy)

## Installation

```bash
npm install @htlkg/data
```

## Modules

### [Client](src/client/client.md)
GraphQL client generation for client-side and server-side data fetching with Amplify.

### [Hooks](src/hooks/README.md)
Vue composables for reactive data management: `useBrands`, `useAccounts`, `useUsers`, `useProducts`.

### [Queries](src/queries/queries.md)
GraphQL query functions for accounts, brands, users, and products.

### [Mutations](src/mutations/mutations.md)
GraphQL mutation functions for creating, updating, and deleting resources.

### [Stores](src/stores/stores.md)
Nanostore factories for request-scoped state management in Astro SSR.

### [Content Collections](src/content-collections/content-collections.md)
Astro content collection generators and schema definitions.

## Quick Start

### Server-Side (Astro Pages) - Zero Config (Recommended)

When using `@htlkg/astro` integration, the Amplify client is **automatically injected** into `Astro.locals.amplifyClient` by the auth middleware. No imports, no config needed:

```typescript
---
// In any Astro page (.astro file)
export const prerender = false;

// Just use it - no imports needed for client setup!
const { amplifyClient } = Astro.locals;

// Fetch data directly
const { data: users } = await amplifyClient.models.User.list({
  selectionSet: ['id', 'email', 'status'],
  authMode: 'userPool',
});

const { data: brands } = await amplifyClient.models.Brand.list();
---

<ul>
  {users?.map(user => <li>{user.email}</li>)}
</ul>
```

**Requirements:**
- Must use `@htlkg/astro` integration with `vueAppSetup: 'full'`
- User must be authenticated (client is only available when `Astro.locals.user` exists)
- Page must have `export const prerender = false` (SSR mode)

### Client-Side (Vue Components)

```typescript
// Client-side data fetching
import { getSharedClient } from '@htlkg/data/client';
import type { Schema } from '@backend/data/resource';

const client = getSharedClient<Schema>();
const { data } = await client.models.Brand.list();

// Vue composables
import { useBrands, useAccounts } from '@htlkg/data/hooks';

const { brands, loading, error, refetch } = useBrands({
  accountId: 'account-123',
  activeOnly: true,
});

// Server-side queries
import { fetchBrands, fetchAccounts } from '@htlkg/data/queries';

const brands = await fetchBrands(client, { accountId });
```

## Migration Guide: From Manual Client to Zero-Config

### Before (Manual Setup)

```typescript
---
import { generateServerClientUsingCookies } from "@htlkg/data/client";
import { parseAmplifyConfig } from "aws-amplify/utils";
import type { Schema } from "@backend/data/resource";
import { amplifyOutputs } from "@/lib/amplify-config";

const amplifyConfig = parseAmplifyConfig(amplifyOutputs);
const client = generateServerClientUsingCookies<Schema>({
  config: amplifyConfig,
  cookies: Astro.cookies,
  request: Astro.request,
});

const { data } = await client.models.User.list();
---
```

### After (Zero-Config)

```typescript
---
const { amplifyClient } = Astro.locals;

const { data } = await amplifyClient.models.User.list();
---
```

**Benefits:**
- No imports needed for client setup
- No config parsing
- No manual parameter passing
- Type-safe with full IntelliSense support
- Client is automatically scoped to the authenticated user