amplifyquery 1.0.0 → 1.0.1

package/README.md

@@ -50,7 +50,67 @@ AmplifyQuery.configure({
 });
 ```
 
-### 2. Service Creation
+### 2. Setup Provider (Important!)
+
+Wrap your application with `AmplifyQueryProvider` at the root level. This provides the React Query client context to your components.
+
+```tsx
+// App.tsx or your main application file
+import React from "react";
+import { AmplifyQueryProvider } from "amplifyquery"; // Or from 'amplifyquery/provider'
+import YourApp from "./YourApp"; // Your main application component
+
+function App() {
+  return (
+    <AmplifyQueryProvider>
+      <YourApp />
+    </AmplifyQueryProvider>
+  );
+}
+
+export default App;
+```
+
+Alternatively, if you need to use a custom `QueryClient` instance:
+
+```tsx
+// App.tsx or your main application file
+import React from "react";
+import { createCustomQueryProvider, getQueryClient } from "amplifyquery"; // Or from 'amplifyquery/provider'
+import { QueryClient } from "@tanstack/react-query";
+import YourApp from "./YourApp"; // Your main application component
+
+// Create a custom client (optional)
+const customQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Your custom query client options
+      staleTime: 1000 * 60 * 10, // 10 minutes
+    },
+  },
+});
+
+// Create a provider with your custom client, or use the default
+const MyCustomProvider = createCustomQueryProvider(customQueryClient);
+// const MyDefaultProvider = createCustomQueryProvider(); // Uses the default client configured via AmplifyQuery.configure()
+
+function App() {
+  return (
+    // Use your custom provider
+    <MyCustomProvider>
+      <YourApp />
+    </MyCustomProvider>
+    // Or, if using the default client with createCustomQueryProvider:
+    // <MyDefaultProvider>
+    //   <YourApp />
+    // </MyDefaultProvider>
+  );
+}
+
+export default App;
+```
+
+### 3. Service Creation
 
 ```typescript
 import { AmplifyQuery } from "amplifyquery";
@@ -73,7 +133,7 @@ const UserSettingsService =
   AmplifyQuery.createSingletonService<UserSettingsModel>("UserSettings");
 ```
 
-### 3. Data Fetching and Saving
+### 4. Data Fetching and Saving
 
 ```typescript
 // Fetch all items
@@ -104,7 +164,7 @@ await TodoService.update({
 await TodoService.delete("some-id");
 ```
 
-### 4. Using React Hooks
+### 5. Using React Hooks
 
 ```tsx
 import React from "react";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { getClient } from "./client";
-import { queryClient, createQueryKeys, invalidateModel, invalidateModelItem, invalidateModelByField, invalidateAll, ensureMutationsFlushed } from "./query";
+import { queryClient, getQueryClient, createQueryKeys, invalidateModel, invalidateModelItem, invalidateModelByField, invalidateAll, ensureMutationsFlushed } from "./query";
 import { createAmplifyService } from "./service";
 import { createSingletonService } from "./singleton";
 import { AmplifyQueryConfig } from "./types";
@@ -29,8 +29,9 @@ import { createRelationalHook, setAppUrl, getAppUrl } from "./utils";
  */
 export declare function configure(config: AmplifyQueryConfig): void;
 export * from "./types";
-export { queryClient, invalidateModel, invalidateModelItem, invalidateModelByField, invalidateAll, ensureMutationsFlushed, createQueryKeys, };
+export { queryClient, getQueryClient, invalidateModel, invalidateModelItem, invalidateModelByField, invalidateAll, ensureMutationsFlushed, createQueryKeys, };
 export { getClient };
+export * from "./provider";
 export declare const Utils: {
     getUserId: () => Promise<string>;
     formatTimestamp: (date?: Date) => string;
@@ -130,4 +131,5 @@ export declare const AmplifyQuery: {
     getModelIds: {
         User: () => Promise<string>;
     };
+    getQueryClient: typeof getQueryClient;
 };

package/dist/index.js

@@ -14,12 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AmplifyQuery = exports.getAppUrl = exports.setAppUrl = exports.Auth = exports.Storage = exports.Utils = exports.getClient = exports.createQueryKeys = exports.ensureMutationsFlushed = exports.invalidateAll = exports.invalidateModelByField = exports.invalidateModelItem = exports.invalidateModel = exports.queryClient = void 0;
+exports.AmplifyQuery = exports.getAppUrl = exports.setAppUrl = exports.Auth = exports.Storage = exports.Utils = exports.getClient = exports.createQueryKeys = exports.ensureMutationsFlushed = exports.invalidateAll = exports.invalidateModelByField = exports.invalidateModelItem = exports.invalidateModel = exports.getQueryClient = exports.queryClient = void 0;
 exports.configure = configure;
 const client_1 = require("./client");
 Object.defineProperty(exports, "getClient", { enumerable: true, get: function () { return client_1.getClient; } });
 const query_1 = require("./query");
 Object.defineProperty(exports, "queryClient", { enumerable: true, get: function () { return query_1.queryClient; } });
+Object.defineProperty(exports, "getQueryClient", { enumerable: true, get: function () { return query_1.getQueryClient; } });
 Object.defineProperty(exports, "createQueryKeys", { enumerable: true, get: function () { return query_1.createQueryKeys; } });
 Object.defineProperty(exports, "invalidateModel", { enumerable: true, get: function () { return query_1.invalidateModel; } });
 Object.defineProperty(exports, "invalidateModelItem", { enumerable: true, get: function () { return query_1.invalidateModelItem; } });
@@ -69,6 +70,8 @@ function configure(config) {
 }
 // Re-export types
 __exportStar(require("./types"), exports);
+// Export provider
+__exportStar(require("./provider"), exports);
 // Re-export utility services
 exports.Utils = utils_1.Utils;
 exports.Storage = utils_1.StorageService;
@@ -86,4 +89,5 @@ exports.AmplifyQuery = {
     Storage: utils_1.StorageService,
     Auth: utils_1.AuthService,
     getModelIds: singleton_1.getModelIds,
+    getQueryClient: query_1.getQueryClient,
 };

package/dist/provider.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { QueryClient } from "@tanstack/react-query";
+interface AmplifyQueryProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * TanStack Query Provider for AmplifyQuery
+ *
+ * This component provides the QueryClient to the entire application.
+ * Use this at the root of your application to enable React Query.
+ *
+ * @example
+ * ```tsx
+ * import { AmplifyQueryProvider } from 'amplifyquery/provider';
+ *
+ * function App() {
+ *   return (
+ *     <AmplifyQueryProvider>
+ *       <YourApp />
+ *     </AmplifyQueryProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function AmplifyQueryProvider({ children, }: AmplifyQueryProviderProps): React.ReactElement;
+/**
+ * Creates a custom QueryClient provider with configuration options
+ *
+ * @param customQueryClient Optional custom QueryClient instance
+ * @returns A provider component with the custom client
+ *
+ * @example
+ * ```tsx
+ * import { createCustomQueryProvider } from 'amplifyquery/provider';
+ * import { QueryClient } from '@tanstack/react-query';
+ *
+ * // Create a custom client with specific options
+ * const customClient = new QueryClient({
+ *   defaultOptions: {
+ *     queries: {
+ *       staleTime: 1000 * 60 * 5,
+ *     },
+ *   },
+ * });
+ *
+ * // Create a provider with this client
+ * const CustomProvider = createCustomQueryProvider(customClient);
+ *
+ * function App() {
+ *   return (
+ *     <CustomProvider>
+ *       <YourApp />
+ *     </CustomProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function createCustomQueryProvider(customQueryClient?: QueryClient): ({ children }: AmplifyQueryProviderProps) => React.ReactElement;
+export {};

package/dist/provider.js

@@ -0,0 +1,103 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AmplifyQueryProvider = AmplifyQueryProvider;
+exports.createCustomQueryProvider = createCustomQueryProvider;
+const React = __importStar(require("react"));
+const react_query_1 = require("@tanstack/react-query");
+const query_1 = require("./query");
+/**
+ * TanStack Query Provider for AmplifyQuery
+ *
+ * This component provides the QueryClient to the entire application.
+ * Use this at the root of your application to enable React Query.
+ *
+ * @example
+ * ```tsx
+ * import { AmplifyQueryProvider } from 'amplifyquery/provider';
+ *
+ * function App() {
+ *   return (
+ *     <AmplifyQueryProvider>
+ *       <YourApp />
+ *     </AmplifyQueryProvider>
+ *   );
+ * }
+ * ```
+ */
+function AmplifyQueryProvider({ children, }) {
+    // Get the shared query client instance
+    const queryClient = (0, query_1.getQueryClient)();
+    return (<react_query_1.QueryClientProvider client={queryClient}>{children}</react_query_1.QueryClientProvider>);
+}
+/**
+ * Creates a custom QueryClient provider with configuration options
+ *
+ * @param customQueryClient Optional custom QueryClient instance
+ * @returns A provider component with the custom client
+ *
+ * @example
+ * ```tsx
+ * import { createCustomQueryProvider } from 'amplifyquery/provider';
+ * import { QueryClient } from '@tanstack/react-query';
+ *
+ * // Create a custom client with specific options
+ * const customClient = new QueryClient({
+ *   defaultOptions: {
+ *     queries: {
+ *       staleTime: 1000 * 60 * 5,
+ *     },
+ *   },
+ * });
+ *
+ * // Create a provider with this client
+ * const CustomProvider = createCustomQueryProvider(customClient);
+ *
+ * function App() {
+ *   return (
+ *     <CustomProvider>
+ *       <YourApp />
+ *     </CustomProvider>
+ *   );
+ * }
+ * ```
+ */
+function createCustomQueryProvider(customQueryClient) {
+    return ({ children }) => {
+        // Use custom client or get the default one
+        const client = customQueryClient || (0, query_1.getQueryClient)();
+        return (<react_query_1.QueryClientProvider client={client}>{children}</react_query_1.QueryClientProvider>);
+    };
+}

package/dist/query.d.ts

@@ -12,6 +12,11 @@ type ConfigOptions = {
  * TanStack Query client
  */
 export declare let queryClient: QueryClient;
+/**
+ * Get the current query client instance
+ * @returns The QueryClient instance
+ */
+export declare function getQueryClient(): QueryClient;
 /**
  * AmplifyQuery configuration
  * @param options Configuration options

package/dist/query.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.queryClient = void 0;
+exports.getQueryClient = getQueryClient;
 exports.configure = configure;
 exports.createQueryKeys = createQueryKeys;
 exports.invalidateModel = invalidateModel;
@@ -98,6 +99,13 @@ function createMmkvPersister() {
  * TanStack Query client
  */
 exports.queryClient = new react_query_1.QueryClient(config.queryClientConfig);
+/**
+ * Get the current query client instance
+ * @returns The QueryClient instance
+ */
+function getQueryClient() {
+    return exports.queryClient;
+}
 /**
  * AmplifyQuery configuration
  * @param options Configuration options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amplifyquery",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Amplify+Query",
   "keywords": [
     "Amplify",