@idb-orm/react-query 0.0.0 → 0.0.2

package/README.md

@@ -9,17 +9,22 @@ A React adapter for [Tanstack's Query library](https://tanstack.com/query/latest
 Here's an example comparison on how to do a `find` query on a `users` document collection in traditional Tanstack-query and with this package.
 
 ```tsx
-// How to do it in Tanstack-query
+// How to do it in vanilla Tanstack-query
 useQuery({
     queryKey: ["users", "find", userId],
     queryFn: () => client.stores.users.find({ where: { id: userId } }),
 });
 
 // How to do it in this package
-stores.users.useFind({ where: { id: userId } }, [userId]);
+stores.users.useFind({ where: { id: userId } });
+
+// Or
+stores.users.useFind({ where: { id: userId } }, [
+    /* Any additional dependences */
+]);
 ```
 
-The package manages the internal query keys to ensure there is no overlap, and you can state an optional dependency array similar to traditiona react hooks like `useMemo` and `useEffect`.
+The package manages the internal query keys to ensure there is no overlap, and you can state an optional dependency array similar to traditional react hooks like `useMemo` and `useEffect`.
 
 ## Installation
 
@@ -59,14 +64,44 @@ function App(){
         <Provider>
     )
 }
+```
+
+## Usage
+
+Anywhere inside a component, you can call one of three hooks for each store:
+
+```ts
+// Will find all documents that matches the filter/selector
+stores.users.useFind({
+    query: {
+        /* Selector Object */
+    },
+    /* Additional options */
+});
 
+// Will find the first document that matches the filter/selector
+stores.users.useFindFirst({
+    query: {
+        /* Selector Object */
+    },
+    /* Additional options */
+});
+
+// Will find the first document that matches the filter/selector
+stores.users.useGet({
+    key: /* Primary Key */
+    /* Additional options */
+});
 ```
 
+These hooks return the same type as the result of the Tanstack [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) hook. Check out their documentation for more information as well as additional options.
+
 Some things to note:
 
+-   Fields passed into the `query` key of a hook input will be used to determine query invalidation. These query objects are serialized into JSON by Tanstack, so any TS/JS types that are not serializable into JSON (functions, files, undefined) will be omitted from the serialized representation. So if any of these types of values change, the query will **NOT** be automatically invalidated.
 -   The `stores` field should be exported for use throughout your app. That is what provides the shortcut functions for each store.
 -   The provider component already has the Tanstack `QueryClientProvider` included!
 
-
 ## Disclaimer
-This project is still in the **very** early stages. Bugs will occur as I work on this package. Sorry in advance.
+
+This project is still in the **very** early stages. Bugs will occur as I work on this package. Sorry in advance.

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@tanstack/react-query"),t=require("react");class r extends e.QueryClient{constructor(e,t){super(t),this.db=e}createInterface(r){const n={},i=this.db.getStoreNames(),s=this.db.stores;for(const t of i)n[t]={useFind:(r,n=[])=>e.useQuery({...r,queryKey:[t,"find",...n],queryFn:()=>s[t].find(r.query)}),useFindFirst:(r,n=[])=>e.useQuery({...r,queryKey:[t,"findFirst",...n],queryFn:()=>s[t].findFirst(r.query)}),useGet:r=>{e.useQuery({...r,queryKey:[t,"get",r.key],queryFn:()=>s[t].get(r.key)})}};return{...n,useClient:()=>t.useContext(r)}}}exports.createIDBQueryClient=function(n,i){const s=new r(n,i),u=t.createContext({});return{queryClient:s,context:u,Provider:({client:r,children:n})=>{const i=t.useMemo(()=>{function e(e){return{invalidate:()=>r.invalidateQueries({queryKey:e})}}const t=e([]),n=r.db.getStoreNames();for(const r of n)"invalidate"===r&&console.warn("Model name 'invalidate' causes the invalidate() function of useClient() to not work. Please fix by renaming the model."),t[r]={...e([r]),get:e([r,"get"]),find:e([r,"find"]),findFirst:e([r,"findFirst"])};return t},[r]);return React.createElement(e.QueryClientProvider,{client:r},React.createElement(u.Provider,{value:i},n))},stores:s.createInterface(u)}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@tanstack/react-query"),t=require("react");class r extends e.QueryClient{constructor(e,t){super(t),this.db=e}createInterface(r){const n={},i=this.db.getStoreNames(),u=this.db.stores;for(const t of i)n[t]={useFind:(r,n=[])=>e.useQuery({...r,queryKey:[t,"find",r.query,...n],queryFn:()=>u[t].find(r.query)}),useFindFirst:(r,n=[])=>e.useQuery({...r,queryKey:[t,"findFirst",r.query,...n],queryFn:()=>u[t].findFirst(r.query)}),useGet:(r,n=[])=>{e.useQuery({...r,queryKey:[t,"get",r.key,...n],queryFn:()=>u[t].get(r.key)})}};return{...n,useClient:()=>t.useContext(r)}}}exports.createIDBQueryClient=function(n,i){const u=new r(n,i),s=t.createContext({});return{queryClient:u,context:s,Provider:({client:r,children:n})=>{const i=t.useMemo(()=>{function e(e){return{invalidate:()=>r.invalidateQueries({queryKey:e})}}const t=e([]),n=r.db.getStoreNames();for(const r of n)"invalidate"===r&&console.warn("Model name 'invalidate' causes the invalidate() function of useClient() to not work. Please fix by renaming the model."),t[r]={...e([r]),get:e([r,"get"]),find:e([r,"find"]),findFirst:e([r,"findFirst"])};return t},[r]);return t.createElement(e.QueryClientProvider,{client:r},t.createElement(s.Provider,{value:i},n))},stores:u.createInterface(s)}};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { core, Model } from '@idb-orm/core';
 import { QueryClient, DefinedUseQueryResult, UndefinedInitialDataOptions, QueryClientConfig } from '@tanstack/react-query';
-import { DependencyList, PropsWithChildren } from 'react';
+import { default as React } from 'react';
 type QueryOptions<O> = Omit<UndefinedInitialDataOptions<O>, "queryFn" | "queryKey">;
 interface ModelQueryInterface<M extends Model<any, any, any>, Names extends string, Models extends core.CollectionObject<Names>> {
     /**
@@ -8,13 +8,13 @@ interface ModelQueryInterface<M extends Model<any, any, any>, Names extends stri
      */
     useGet: M extends Model<any, infer Fields, any> ? <O = core.Simplify<core.ModelStructure<Fields, Models>>>(primaryKey: {
         key: core.PrimaryKeyType<M>;
-    } & QueryOptions<O>) => DefinedUseQueryResult<O | undefined> : never;
+    } & QueryOptions<O>, deps?: React.DependencyList) => DefinedUseQueryResult<O | undefined> : never;
     useFind: <I extends core.FindInput<Names, M, Models>, O = core.Simplify<NonNullable<core.FindOutput<Names, M, Models, I>>>[]>(options: QueryOptions<O> & {
         query: I;
-    }, deps?: DependencyList) => DefinedUseQueryResult<O | undefined>;
+    }, deps?: React.DependencyList) => DefinedUseQueryResult<O | undefined>;
     useFindFirst: <I extends core.FindInput<Names, M, Models>, O = core.Simplify<core.FindOutput<Names, M, Models, I>>>(options: QueryOptions<O> & {
         query: I;
-    }, deps?: DependencyList) => DefinedUseQueryResult<O | undefined>;
+    }, deps?: React.DependencyList) => DefinedUseQueryResult<O | undefined>;
 }
 interface ModelQueryClient {
     invalidate(): Promise<void>;
@@ -28,16 +28,16 @@ type IDBClientInterface<Names extends string, _Models extends core.CollectionObj
 } & ModelQueryClient>;
 export declare function createIDBQueryClient<Names extends string, Models extends core.CollectionObject<Names>>(client: core.DbClient<string, Names, Models>, config?: QueryClientConfig): {
     queryClient: IDBQueryClient<Names, Models>;
-    context: import('react').Context<{ [K_1 in Names]: {
+    context: React.Context<{ [K_1 in Names]: {
         get: ModelQueryClient;
         findFirst: ModelQueryClient;
         find: ModelQueryClient;
     } & {
         invalidate: () => Promise<void>;
     }; } & ModelQueryClient extends infer T ? { [K in keyof T]: T[K]; } : never>;
-    Provider: ({ client, children, }: PropsWithChildren<{
+    Provider: ({ client, children, }: React.PropsWithChildren<{
         client: IDBQueryClient<Names, Models>;
-    }>) => import("react").JSX.Element;
+    }>) => React.JSX.Element;
     stores: IDBQueryInterface<Names, Models>;
 };
 declare class IDBQueryClient<Names extends string, Models extends core.CollectionObject<Names>> extends QueryClient {

package/dist/index.es.js

@@ -1,2 +1,2 @@
-import{QueryClientProvider as e,QueryClient as t,useQuery as r}from"@tanstack/react-query";import{createContext as n,useMemo as i,useContext as s}from"react";function o(t,r){const s=new a(t,r),o=n({});return{queryClient:s,context:o,Provider:({client:t,children:r})=>{const n=i(()=>{function e(e){return{invalidate:()=>t.invalidateQueries({queryKey:e})}}const r=e([]),n=t.db.getStoreNames();for(const t of n)"invalidate"===t&&console.warn("Model name 'invalidate' causes the invalidate() function of useClient() to not work. Please fix by renaming the model."),r[t]={...e([t]),get:e([t,"get"]),find:e([t,"find"]),findFirst:e([t,"findFirst"])};return r},[t]);/* @__PURE__ */
-return React.createElement(e,{client:t},/* @__PURE__ */React.createElement(o.Provider,{value:n},r))},stores:s.createInterface(o)}}class a extends t{constructor(e,t){super(t),this.db=e}createInterface(e){const t={},n=this.db.getStoreNames(),i=this.db.stores;for(const s of n)t[s]={useFind:(e,t=[])=>r({...e,queryKey:[s,"find",...t],queryFn:()=>i[s].find(e.query)}),useFindFirst:(e,t=[])=>r({...e,queryKey:[s,"findFirst",...t],queryFn:()=>i[s].findFirst(e.query)}),useGet:e=>{r({...e,queryKey:[s,"get",e.key],queryFn:()=>i[s].get(e.key)})}};return{...t,useClient:()=>s(e)}}}export{o as createIDBQueryClient};
+import{QueryClientProvider as e,QueryClient as t,useQuery as r}from"@tanstack/react-query";import n from"react";function i(t,r){const i=new o(t,r),s=n.createContext({});return{queryClient:i,context:s,Provider:({client:t,children:r})=>{const i=n.useMemo(()=>{function e(e){return{invalidate:()=>t.invalidateQueries({queryKey:e})}}const r=e([]),n=t.db.getStoreNames();for(const t of n)"invalidate"===t&&console.warn("Model name 'invalidate' causes the invalidate() function of useClient() to not work. Please fix by renaming the model."),r[t]={...e([t]),get:e([t,"get"]),find:e([t,"find"]),findFirst:e([t,"findFirst"])};return r},[t]);/* @__PURE__ */
+return n.createElement(e,{client:t},/* @__PURE__ */n.createElement(s.Provider,{value:i},r))},stores:i.createInterface(s)}}class o extends t{constructor(e,t){super(t),this.db=e}createInterface(e){const t={},i=this.db.getStoreNames(),o=this.db.stores;for(const n of i)t[n]={useFind:(e,t=[])=>r({...e,queryKey:[n,"find",e.query,...t],queryFn:()=>o[n].find(e.query)}),useFindFirst:(e,t=[])=>r({...e,queryKey:[n,"findFirst",e.query,...t],queryFn:()=>o[n].findFirst(e.query)}),useGet:(e,t=[])=>{r({...e,queryKey:[n,"get",e.key,...t],queryFn:()=>o[n].get(e.key)})}};return{...t,useClient:()=>n.useContext(e)}}}export{i as createIDBQueryClient};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@idb-orm/react-query",
-    "version": "0.0.0",
+    "version": "0.0.2",
     "description": "An adapter for the Tanstack React-Query library for @idb-orm",
     "main": "dist/index.js",
     "scripts": {