@idb-orm/react-query 0.0.1 → 0.0.2

package/README.md

@@ -9,14 +9,19 @@ 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 traditional react hooks like `useMemo` and `useEffect`.
@@ -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 t.createElement(e.QueryClientProvider,{client:r},t.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

@@ -8,7 +8,7 @@ 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?: React.DependencyList) => DefinedUseQueryResult<O | undefined>;

package/dist/index.es.js

@@ -1,2 +1,2 @@
-import{QueryClientProvider as e,QueryClient as t,useQuery as n}from"@tanstack/react-query";import r from"react";function i(t,n){const i=new o(t,n),s=r.createContext({});return{queryClient:i,context:s,Provider:({client:t,children:n})=>{const i=r.useMemo(()=>{function e(e){return{invalidate:()=>t.invalidateQueries({queryKey:e})}}const n=e([]),r=t.db.getStoreNames();for(const t of r)"invalidate"===t&&console.warn("Model name 'invalidate' causes the invalidate() function of useClient() to not work. Please fix by renaming the model."),n[t]={...e([t]),get:e([t,"get"]),find:e([t,"find"]),findFirst:e([t,"findFirst"])};return n},[t]);/* @__PURE__ */
-return r.createElement(e,{client:t},/* @__PURE__ */r.createElement(s.Provider,{value:i},n))},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 r of i)t[r]={useFind:(e,t=[])=>n({...e,queryKey:[r,"find",...t],queryFn:()=>o[r].find(e.query)}),useFindFirst:(e,t=[])=>n({...e,queryKey:[r,"findFirst",...t],queryFn:()=>o[r].findFirst(e.query)}),useGet:e=>{n({...e,queryKey:[r,"get",e.key],queryFn:()=>o[r].get(e.key)})}};return{...t,useClient:()=>r.useContext(e)}}}export{i 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.1",
+    "version": "0.0.2",
     "description": "An adapter for the Tanstack React-Query library for @idb-orm",
     "main": "dist/index.js",
     "scripts": {