schemock 0.0.4-alpha.7 → 0.0.4-alpha.8

package/README.md

@@ -1148,6 +1148,56 @@ const user = await api.user.get('123');
 await api.post.create({ title: 'Hello', authorId: '123' });
 ```
 
+### Using with React Hooks (SchemockProvider)
+
+To use the configured client with generated React hooks, wrap your app with `SchemockProvider`:
+
+```tsx
+import { SchemockProvider, createClient, useUsers, useCreateUser } from './generated';
+
+// 1. Create configured client
+const api = createClient({
+  onRequest: (ctx) => {
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      ctx.headers.Authorization = `Bearer ${token}`;
+    }
+    return ctx;
+  },
+  onError: (error) => {
+    if (error.status === 401) window.location.href = '/login';
+  }
+});
+
+// 2. Wrap your app
+function App() {
+  return (
+    <SchemockProvider client={api}>
+      <UserList />
+    </SchemockProvider>
+  );
+}
+
+// 3. Hooks automatically use the configured client
+function UserList() {
+  const { data, isLoading } = useUsers();
+  const createUser = useCreateUser();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {data?.data.map(user => <div key={user.id}>{user.name}</div>)}
+      <button onClick={() => createUser.mutate({ name: 'New User' })}>
+        Add User
+      </button>
+    </div>
+  );
+}
+```
+
+Without `SchemockProvider`, hooks use the default unconfigured client (no auth).
+
 ### Creating Mock JWT Tokens
 
 For testing different user contexts:

package/dist/cli/index.js

@@ -4285,7 +4285,7 @@ function generateHooks(schemas) {
   code.comment("GENERATED BY SCHEMOCK - DO NOT EDIT");
   code.line("import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';");
   code.line("import { useMemo } from 'react';");
-  code.line("import { api } from './client';");
+  code.line("import { useSchemockClient } from './provider';");
   code.line("import type * as Types from './types';");
   code.line();
   generateStableKeyHelper(code);
@@ -4362,6 +4362,7 @@ function generateEntityHooks(code, schema) {
     code.line("enabled?: boolean;");
   }, "}) {");
   code.indent();
+  code.line("const api = useSchemockClient();");
   code.comment("Use stable query key to prevent unnecessary refetches");
   code.line(`const queryKey = useStableQueryKey('${pluralName}', options);`);
   code.block("return useQuery({", () => {
@@ -4380,6 +4381,7 @@ function generateEntityHooks(code, schema) {
     code.line("enabled?: boolean;");
   }, "}) {");
   code.indent();
+  code.line("const api = useSchemockClient();");
   if (hasRelations) {
     code.comment("Use stable query key for includes array");
     code.line(`const queryKey = useStableQueryKey('${pluralName}', id, options?.include);`);
@@ -4407,6 +4409,7 @@ function generateEntityHooks(code, schema) {
   }
   code.docComment(`Create a new ${pascalName}`);
   code.block(`export function useCreate${pascalName}() {`, () => {
+    code.line("const api = useSchemockClient();");
     code.line("const queryClient = useQueryClient();");
     code.block("return useMutation({", () => {
       code.line(`mutationFn: (data: Types.${pascalName}Create) => api.${name}.create(data),`);
@@ -4418,6 +4421,7 @@ function generateEntityHooks(code, schema) {
   code.line();
   code.docComment(`Update an existing ${pascalName}`);
   code.block(`export function useUpdate${pascalName}() {`, () => {
+    code.line("const api = useSchemockClient();");
     code.line("const queryClient = useQueryClient();");
     code.block("return useMutation({", () => {
       code.line(`mutationFn: ({ id, data }: { id: string; data: Types.${pascalName}Update }) =>`);
@@ -4431,6 +4435,7 @@ function generateEntityHooks(code, schema) {
   code.line();
   code.docComment(`Delete a ${pascalName}`);
   code.block(`export function useDelete${pascalName}() {`, () => {
+    code.line("const api = useSchemockClient();");
     code.line("const queryClient = useQueryClient();");
     code.block("return useMutation({", () => {
       code.line(`mutationFn: (id: string) => api.${name}.delete(id),`);
@@ -4442,6 +4447,113 @@ function generateEntityHooks(code, schema) {
   code.line();
 }
 
+// src/cli/generators/provider.ts
+function generateProvider() {
+  const code = new CodeBuilder();
+  code.comment("GENERATED BY SCHEMOCK - DO NOT EDIT");
+  code.line("import { createContext, useContext, type ReactNode } from 'react';");
+  code.line("import { type ApiClient, api as defaultApi } from './client';");
+  code.line();
+  code.multiDocComment([
+    "React Context for the Schemock API client.",
+    "",
+    "This context provides the API client to all hooks in the component tree.",
+    "By default, it uses the unconfigured `api` client."
+  ]);
+  code.line("const SchemockContext = createContext<ApiClient>(defaultApi);");
+  code.line();
+  code.multiDocComment([
+    "Props for the SchemockProvider component."
+  ]);
+  code.block("export interface SchemockProviderProps {", () => {
+    code.docComment("Optional configured API client. If not provided, uses the default unconfigured client.");
+    code.line("client?: ApiClient;");
+    code.docComment("Child components that will have access to the API client.");
+    code.line("children: ReactNode;");
+  });
+  code.line();
+  code.multiDocComment([
+    "Provider component for injecting a configured API client into hooks.",
+    "",
+    "Use this to provide an auth-configured client to all Schemock hooks.",
+    "",
+    "@example",
+    "```tsx",
+    "import { SchemockProvider, createClient } from './generated';",
+    "",
+    "// Create a client with auth interceptors",
+    "const api = createClient({",
+    "  onRequest: (ctx) => {",
+    '    const token = localStorage.getItem("authToken");',
+    "    if (token) {",
+    "      ctx.headers.Authorization = `Bearer ${token}`;",
+    "    }",
+    "    return ctx;",
+    "  },",
+    "  onError: (error) => {",
+    "    if (error.status === 401) {",
+    '      window.location.href = "/login";',
+    "    }",
+    "  }",
+    "});",
+    "",
+    "// Wrap your app with the provider",
+    "function App() {",
+    "  return (",
+    "    <SchemockProvider client={api}>",
+    "      <MyComponent />",
+    "    </SchemockProvider>",
+    "  );",
+    "}",
+    "",
+    "// Now all hooks automatically use the configured client",
+    "function MyComponent() {",
+    "  const { data } = useUsers(); // Uses auth-configured client",
+    "  return <div>{data?.data.map(u => u.name)}</div>;",
+    "}",
+    "```"
+  ]);
+  code.block("export function SchemockProvider({ client, children }: SchemockProviderProps): JSX.Element {", () => {
+    code.line("return (");
+    code.line("  <SchemockContext.Provider value={client ?? defaultApi}>");
+    code.line("    {children}");
+    code.line("  </SchemockContext.Provider>");
+    code.line(");");
+  });
+  code.line();
+  code.multiDocComment([
+    "Hook to access the API client from context.",
+    "",
+    "This is used internally by generated hooks to access the configured client.",
+    "You can also use it directly if you need to call API methods outside of hooks.",
+    "",
+    "@returns The API client from context (or default if no provider)",
+    "",
+    "@example",
+    "```tsx",
+    "import { useSchemockClient } from './generated';",
+    "",
+    "function MyComponent() {",
+    "  const api = useSchemockClient();",
+    "",
+    "  const handleClick = async () => {",
+    "    // Direct API call using the configured client",
+    '    await api.user.create({ name: "John" });',
+    "  };",
+    "",
+    "  return <button onClick={handleClick}>Create User</button>;",
+    "}",
+    "```"
+  ]);
+  code.block("export function useSchemockClient(): ApiClient {", () => {
+    code.line("return useContext(SchemockContext);");
+  });
+  code.line();
+  code.comment("Re-export client types for convenience");
+  code.line("export type { ApiClient } from './client';");
+  return code.toString();
+}
+
 // src/cli/generators/form-schemas.ts
 function generateFormSchemas(schemas) {
   const code = new CodeBuilder();
@@ -6506,6 +6618,9 @@ async function generateClientTarget(target, schemas, endpoints, config, options)
       console.log("   \u26A0\uFE0F  GraphQL target not yet implemented");
       break;
   }
+  const providerCode = generateProvider();
+  await writeOutput3(path.join(outputDir, "provider.ts"), providerCode, options.dryRun);
+  files.push("provider.ts");
   const hooksCode = generateHooks(targetSchemas);
   await writeOutput3(path.join(outputDir, "hooks.ts"), hooksCode, options.dryRun);
   files.push("hooks.ts");
@@ -6632,7 +6747,8 @@ function generateClientIndex(targetType, hasEndpoints = false) {
     "",
     "export * from './types';",
     "export * from './hooks';",
-    "export { api } from './client';"
+    "export * from './provider';",
+    "export { api, createClient } from './client';"
   ];
   if (targetType === "mock") {
     lines.push("export { db } from './db';");
@@ -6801,6 +6917,10 @@ async function generate(options) {
     default:
       throw new Error(`Unknown adapter: ${adapter}`);
   }
+  console.log("\n\u{1F3A3} Generating React Context provider...");
+  const providerCode = generateProvider();
+  await writeOutput4(path.join(outputDir, "provider.ts"), providerCode, options.dryRun);
+  console.log("   \u2713 provider.ts (SchemockProvider + useSchemockClient)");
   console.log("\n\u269B\uFE0F  Generating React hooks...");
   const hooksCode = generateHooks(analyzed);
   await writeOutput4(path.join(outputDir, "hooks.ts"), hooksCode, options.dryRun);
@@ -6892,7 +7012,8 @@ function generateIndex(adapter, hasEndpoints = false) {
     "",
     "export * from './types';",
     "export * from './hooks';",
-    "export { api } from './client';"
+    "export * from './provider';",
+    "export { api, createClient } from './client';"
   ];
   if (adapter === "mock") {
     lines.push("export { db } from './db';");