@teamkeel/client-react-query 0.357.1

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@teamkeel/client-react-query",
+  "version": "0.357.1",
+  "description": "Typed React-Query Hooks for Keel clients",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "npm run build"
+  },
+  "keywords": [],
+  "author": "Keel (www.keel.so)",
+  "license": "ASL (Apache 2.0)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "react": "18.2.0",
+    "typescript": "5.1.6"
+  }
+}

package/pnpm-lock.yaml

@@ -0,0 +1,102 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  '@tanstack/react-query':
+    specifier: ^4.0.0
+    version: 4.29.25(react@18.2.0)
+
+devDependencies:
+  '@types/react':
+    specifier: 18.2.0
+    version: 18.2.0
+  '@types/react-dom':
+    specifier: 18.2.0
+    version: 18.2.0
+  react:
+    specifier: 18.2.0
+    version: 18.2.0
+  typescript:
+    specifier: 5.1.6
+    version: 5.1.6
+
+packages:
+
+  /@tanstack/query-core@4.29.25:
+    resolution: {integrity: sha512-DI4y4VC6Uw4wlTpOocEXDky69xeOScME1ezLKsj+hOk7DguC9fkqXtp6Hn39BVb9y0b5IBrY67q6kIX623Zj4Q==}
+    dev: false
+
+  /@tanstack/react-query@4.29.25(react@18.2.0):
+    resolution: {integrity: sha512-c1+Ezu+XboYrdAMdusK2fTdRqXPMgPAnyoTrzHOZQqr8Hqz6PNvV9DSKl8agUo6nXX4np7fdWabIprt+838dLg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@tanstack/query-core': 4.29.25
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
+  /@types/prop-types@15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/react-dom@18.2.0:
+    resolution: {integrity: sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==}
+    dependencies:
+      '@types/react': 18.2.0
+    dev: true
+
+  /@types/react@18.2.0:
+    resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: true
+
+  /@types/scheduler@0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
+
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+
+  /typescript@5.1.6:
+    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false

package/readme.md

@@ -0,0 +1,34 @@
+# @teamkeel/client-react-query
+
+Typed React-Query Hook from a generated Keel client
+
+## Install
+
+N.B. Requires `@teamtkeel/client-react` to be installed and setup first.
+
+```
+npm i @teamkeel/client-react-query
+```
+
+## Usage
+
+Export `useKeelQuery` and `useKeelMutation` by passing in a `useKeel` hook based on your api client.
+
+```ts
+// Follow @teamtkeel/client-react setup instructions
+import { APIClient } from "../keelClient";
+export const { KeelProvider, useKeel } = keel(APIClient);
+
+export const { useKeelQuery, useKeelMutation } = keelQuery(useKeel);
+
+```
+
+You can then use these hooks in your components. Inputs are fully typed based on the action name.
+
+```tsx
+
+const query = useKeelQuery("actionName", actionInputs, queryOptions);
+
+const mutation = useKeelMutation("actionName", mutationOptions);
+
+```

package/src/index.ts

@@ -0,0 +1,108 @@
+import {
+  QueryKey,
+  UseInfiniteQueryOptions,
+  UseMutationOptions,
+  UseQueryOptions,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+
+type FunctionTypes = "queries" | "mutations";
+
+export const keelQuery = <T extends (...args: any) => any>(useKeel: T) => {
+  type KeelType = ReturnType<typeof useKeel>;
+
+  type QueryKeys<F extends FunctionTypes> = keyof KeelType[F];
+  type QueryArgs<F extends FunctionTypes, K extends QueryKeys<F>> = Parameters<
+    KeelType[F][K]
+  >[0];
+  type QueryResult<
+    F extends FunctionTypes,
+    K extends QueryKeys<F>
+  > = ReturnType<KeelType[F][K]>;
+
+  type Result<F extends FunctionTypes, K extends QueryKeys<F>> = Exclude<
+    Awaited<QueryResult<F, K>>["data"],
+    undefined
+  >;
+  type Error<F extends FunctionTypes, K extends QueryKeys<F>> = Exclude<
+    Awaited<QueryResult<F, K>>["error"],
+    undefined
+  >;
+
+  return {
+    useKeelQuery: <F extends "queries", K extends QueryKeys<"queries">>(
+      key: K,
+      args: QueryArgs<F, K>,
+      options?: Omit<UseQueryOptions<Result<F, K>, Error<F, K>>, "queryFn">
+    ) => {
+      const keel = useKeel();
+      return useQuery<Result<F, K>, Error<F, K>>(
+        queryKeys(key, args),
+        async () => {
+          const res = await keel[key](args);
+          if (res.error) {
+            return Promise.reject(res.error);
+          }
+          return res.data;
+        },
+        options
+      );
+    },
+    useInfiniteKeelQuery: <F extends "queries", K extends QueryKeys<"queries">>(
+      key: K,
+      args: QueryArgs<F, K>,
+      options?: Omit<
+        UseInfiniteQueryOptions<Result<F, K>, Error<F, K>>,
+        "queryFn"
+      >
+    ) => {
+      const keel = useKeel();
+      return useInfiniteQuery<Result<F, K>, Error<F, K>>(
+        queryKeys(key, args),
+        async () => {
+          const res = await keel[key](args);
+          if (res.error) {
+            return Promise.reject(res.error);
+          }
+          return res.data;
+        },
+        options
+      );
+    },
+    useKeelMutation: <F extends "mutations", K extends QueryKeys<"mutations">>(
+      key: K,
+      options?: Omit<
+        UseMutationOptions<Result<F, K>, Error<F, K>, QueryArgs<F, K>>,
+        "queryFn"
+      >
+    ) => {
+      const keel = useKeel();
+      return useMutation<Result<F, K>, Error<F, K>, QueryArgs<F, K>>(
+        [key],
+        async (args) => {
+          const res = await keel[key](args);
+          if (res.error) {
+            return Promise.reject(res.error);
+          }
+          return res.data;
+        },
+        options
+      );
+    },
+  };
+};
+
+const queryKeys = (key: any, args?: any): QueryKey => {
+  // Query key is either ["action name", {args}] or ["action name", "id", {args}]
+  const queryKey = [key];
+  if (args && args.id) {
+    queryKey.push(args.id);
+  }
+  if (args) {
+    queryKey.push(args);
+  }
+
+  return queryKey;
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "jsx": "react",
+    "lib": ["ESNext", "dom"],
+    "esModuleInterop": true,
+    "sourceMap": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}