doc.md•3.11 kB
Usage
Crawl your APIs
import { crawlApi } from "./crawler/api";
const routes = crawlApi(process.cwd());
Generate hooks
import { generateHooks } from "./generator/hooks";
generateHooks(routes, {
outputDir: "./src/hooks",
useSWRInfinite: true,
graphqlInfiniteQueries: ["getUsersPaginated"]
});
Use hooks in your components
import { useUsersGET } from "../hooks/hooks";
function UsersList() {
const { data, error } = useUsersGET((index) => `/api/users?page=${index+1}`);
if (error) return <div>Error</div>;
if (!data) return <div>Loading...</div>;
return (
<ul>
{data.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}
Supported Hook Types
Source Type Hook Type Notes
Next.js API Route SWR / SWR Infinite Auto detects REST methods
API Client SWR / SWR Infinite Auto-imported, typed
GraphQL Query useQuery / SWR Infinite Inline gql string
GraphQL Mutation useMutation Inline gql string
---
# 3️⃣ Documentation Example (docs.md)
```markdown
# MCP Documentation
## 1. Crawler
The crawler scans your project for:
- `app/api/*` → Next.js route handlers
- `api/*.ts` → API client functions & GraphQL functions
It produces a JSON array of `ApiRoute`:
```ts
interface ApiRoute {
path: string;
methods: string[];
responseType: string;
kind: "next-route" | "api-client" | "graphql-query" | "graphql-mutation";
gqlString?: string;
}
2. Hooks Generator
generateHooks(apiRoutes, options):
apiRoutes: Output of crawler
options:
outputDir: Where hooks.ts will be generated
useSWRInfinite: Enable SWR Infinite for REST / API client
graphqlInfiniteQueries: Array of GraphQL query names for infinite scroll
Generates:
Auto-imported API client functions
Typed hooks for REST and GraphQL
SWR Infinite support for paginated queries
GraphQL inline queries/mutations
3. Example Flow
Add Next.js API routes in app/api/
Add API client / GraphQL functions in api/
Run crawler → ApiRoute[]
Run generator → src/hooks/hooks.ts
Use hooks in your React components
4. Example Hooks Usage
SWR Infinite for REST:
const { data, error } = useUsersGET((pageIndex) => `/api/users?page=${pageIndex+1}`);
SWR Infinite for GraphQL:
const { data, error } = usePostClientgetPostsQuery((pageIndex) => ({ page: pageIndex+1 }));
Mutation (GraphQL):
const mutation = usePostClientcreatePostMutation();
mutation.mutate({ title: "Hello", content: "World" });
API Client Function:
const { data, error } = useUserClientgetUsers();
5. Notes
You can regenerate hooks.ts anytime your APIs change.
GraphQL queries/mutations must use gql\...`` template strings for automatic extraction.
Paginated GraphQL queries must be listed in graphqlInfiniteQueries to enable SWR Infinite.
---
This package now gives you:
1. **Full MCP flow diagram**
2. **README** for quick start
3. **Detailed documentation** with usage examples
---
I can also make a **ready-to-clone GitHub repo** with all the files (`app/api`, `api/*.ts`, `crawler`, `generator`) and pre-generated `hooks.ts`, so you can just run it and see everything working.
Do you want me to do that next?