{error.message}

#### Using the GhostMakerModel Decorator (Recommended)

You can now use the GhostMakerModel decorator to define model names and IDs for automatic query key generation. This is the recommended and most convenient way to ensure stable and meaningful cache keys for your models.

`tsx
import { GhostMakerModel } from "@mittwald/react-ghostmaker";

@GhostMakerModel({
name: "User",
getId: (user) => user.id,
})
class User {
constructor(
public id: string,
public name: string,
) {}
}

@GhostMakerModel({
name: "Blog",
getId: (blog) => blog.id,
})
class Blog {
constructor(
public id: string,
public title: string,
) {}
}
`

Advantages:

- Declarative, directly on the model class
- No need for central registration
- Name and ID can be set explicitly (for readable query keys)
- Works for multiple models and inheritance

#### Alternative: registerModelIdentifier (deprecated)

The previous registerModelIdentifier function is still available but marked as deprecated. It can be used to centrally register IDs for models:

`tsx
import { registerModelIdentifier } from "@mittwald/react-ghostmaker";

registerModelIdentifier((model) => {
if (model instanceof User) return user-${model.id};
if (model instanceof Blog) return blog-${model.id};
return undefined;
});
`

> Note: Prefer the GhostMakerModel decorator for new projects.

🎭 Flexible Component Props with MaybeReactGhost

The MaybeReactGhost pattern allows your components to accept both ghost
objects and regular objects, making them more flexible and reusable.

$3

Use MaybeReactGhost for component props that should work with both ghosts
and regular objects:

`tsx
import { type MaybeReactGhost, asGhostProps } from "@mittwald/react-ghostmaker";

interface Props {
blog: MaybeReactGhost;
}

function BlogCard(props: Props) {
// Automatically handles both ghost and regular objects
const { blogGhost } = asGhostProps(props);

return (


// Works with both ghosts and regular objects


`

$3

You can build more complex component hierarchies where data can be passed down
either as resolved values or as ghosts:

`tsx
// This component can work with both resolved and unresolved blog data
function BlogDisplay(props: { blog: MaybeReactGhost }) {
const { blogGhost } = asGhostProps(props);

const { value: blogData, invalidate } = blogGhost.getDetailed().useGhost();

return (


Use MaybeReactGhost when:

- You want components that can work with both async (ghost) and sync (regular)
data
- Building reusable components that might receive data in different loading
states
- Creating component libraries that should be flexible about data sources
- Passing data down component trees where some levels might resolve the data
early

Don't use it when:

- You always know the data will be a ghost (use ReactGhost directly)
- You always know the data will be resolved (use the plain type T)
- Simple components that don't need this flexibility

🔧 Cache Management

$3

#### Using useGhost Hook

The useGhost hook returns an invalidate function for refreshing specific
ghost data:

`tsx
function BlogView() {
const blogGhost = BlogGhost.ofId("123");

const { value: blogData, invalidate } = blogGhost.getDetailed().useGhost();

const handleRefresh = () => {
invalidate(); // Refreshes only this specific ghost chain
};

return (


#### Using Ghost's invalidate Method

Each ghost has an invalidate method that requires a QueryClient:

`tsx
import { useQueryClient } from "@tanstack/react-query";

function UpdateBlogButton() {
const blogGhost = BlogGhost.ofId("123");
const queryClient = useQueryClient();

const handleUpdate = async () => {
const blogData = await blogGhost.getDetailed();
await updateBlog(blogData.id, { title: "Updated Title" });

// Invalidate this specific ghost
blogGhost.invalidate(queryClient);
};

return Update Blog;
}
`

#### Global Invalidation by ID

Use invalidateGhostsById for global cache invalidation:

`tsx
import { invalidateGhostsById } from "@mittwald/react-ghostmaker";

async function deleteBlog(blogId: string) {
await fetch(/api/blogs/${blogId}, { method: "DELETE" });

// Invalidate all cached data for this blog
invalidateGhostsById(blog-${blogId});
}
`

📚 Complete Example

Here's a comprehensive example showing a blog application:

`tsx
// models/Blog.ts
export class Blog {
constructor(public id: string) {}

static ofId(id: string): Blog {
return new Blog(id);
}

async getDetailed() {
const response = await fetch(/api/blogs/${this.id});
const data = await response.json();
return new DetailedBlog(data);
}
}

export class DetailedBlog extends Blog {
constructor(data: { id: string; title: string; author: string }) {
super(data.id);
this.title = data.title;
this.author = data.author;
}

public readonly title: string;
public readonly author: string;

async getAuthor() {
const response = await fetch(/api/authors/${this.author});
return response.json();
}
}

// models/react/BlogGhost.ts
import { makeGhost, type ReactGhost } from "@mittwald/react-ghostmaker";
import { Blog } from "../Blog";

export const BlogGhost = makeGhost(Blog);
export type BlogGhostType = ReactGhost;

// models/react/init.ts
import { registerModelIdentifier } from "@mittwald/react-ghostmaker";
import { Blog, DetailedBlog } from "../Blog";

registerModelIdentifier((model) => {
if (model instanceof Blog) return blog-${model.id};
if (model instanceof DetailedBlog) return detailed-blog-${model.id};
return undefined;
});

// components/BlogPage.tsx
import { Suspense } from "react";
import { type ReactGhost } from "@mittwald/react-ghostmaker";
import { Blog } from "../models/Blog";

function BlogPage() {
const blogGhost = BlogGhost.ofId("123");

return (