floppy-disk 2.9.0-beta.2 → 2.10.0-beta.1

package/esm/index.d.ts

@@ -1,3 +1,4 @@
 export { hashStoreKey } from './utils';
+export * from './utils/fetcher';
 export * from './vanilla';
 export * from './react';

package/esm/index.js

@@ -1,3 +1,4 @@
 export { hashStoreKey } from './utils';
+export * from './utils/fetcher';
 export * from './vanilla';
 export * from './react';

package/esm/react/create-query.js

@@ -31,7 +31,7 @@ const useQueryDefaultDeps = (state) => [
     state.isWaitingNextPage,
     state.hasNextPage,
 ];
-const defaultElement = () => null;
+const fallbackComponent = () => null;
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createquery
  */
@@ -408,7 +408,7 @@ export const createQuery = (queryFn, options = {}) => {
         return state;
     };
     useQuery.Render = (props) => {
-        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        const { queryKey, loading = fallbackComponent, success = fallbackComponent, error = fallbackComponent, } = props;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const state = useQuery(queryKey);
         if (state.data)

package/esm/utils/fetcher.d.ts

@@ -0,0 +1,16 @@
+type FetcherOptions<TResponse = any> = {
+    url: string;
+    query?: string;
+    params?: Record<string, string | number | boolean> | null;
+    payload?: any;
+    validate?: (response: TResponse) => void | Promise<void>;
+} & RequestInit;
+/**
+ * Experimental fetcher - a query/mutation function creator.
+ *
+ * Can be used for REST or GraphQL.
+ *
+ * @returns A function to fetch data
+ */
+export declare const fetcher: <TResponse = any, TInput extends any[] = any[]>(options: FetcherOptions<TResponse> | ((...args: TInput) => FetcherOptions<TResponse>)) => (...args: TInput) => Promise<TResponse>;
+export {};

package/esm/utils/fetcher.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-throw-literal */
+import { getValueOrComputedValue } from '.';
+const encodeParams = (params) => Object.entries(params)
+    .map((kv) => kv.map(encodeURIComponent).join('='))
+    .join('&');
+/**
+ * Experimental fetcher - a query/mutation function creator.
+ *
+ * Can be used for REST or GraphQL.
+ *
+ * @returns A function to fetch data
+ */
+export const fetcher = (options) => async (...args) => {
+    const { url, query, params, payload, headers, validate, ...rest } = getValueOrComputedValue(options, ...args);
+    let autoOptions = {};
+    let searchParams = params;
+    if (query) {
+        // GraphQL
+        autoOptions = {
+            method: 'POST',
+            body: JSON.stringify({ query, variables: payload || args[0] }),
+        };
+    }
+    else if (rest.method && rest.method.toLowerCase() !== 'get') {
+        // REST - Mutation
+        autoOptions = {
+            body: JSON.stringify(payload === undefined ? args[0] : payload),
+        };
+    }
+    else {
+        // REST - Query
+        if (typeof options === 'object' && params === undefined)
+            searchParams = args[0];
+    }
+    const fetchUrl = searchParams ? [url, encodeParams(searchParams)].join('?') : url;
+    const res = await fetch(fetchUrl, {
+        headers: { 'Content-Type': 'application/json', ...headers },
+        ...autoOptions,
+        ...rest,
+    });
+    const contentType = res.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+        const resJson = await res.json().catch(() => undefined);
+        if (resJson !== undefined) {
+            if (query && resJson.errors) {
+                throw { status: res.status, statusText: res.statusText, response: resJson };
+            }
+            if (res.ok) {
+                if (validate) {
+                    try {
+                        await validate(resJson);
+                    }
+                    catch (err) {
+                        throw {
+                            status: res.status,
+                            statusText: res.statusText,
+                            response: resJson,
+                            validationError: err,
+                        };
+                    }
+                }
+                return resJson;
+            }
+            throw { status: res.status, statusText: res.statusText, response: resJson };
+        }
+    }
+    const resText = await res.text().catch(() => undefined);
+    throw { status: res.status, statusText: res.statusText, response: resText };
+};

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export { hashStoreKey } from './utils';
+export * from './utils/fetcher';
 export * from './vanilla';
 export * from './react';

package/lib/index.js

@@ -4,5 +4,6 @@ exports.hashStoreKey = void 0;
 const tslib_1 = require("tslib");
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "hashStoreKey", { enumerable: true, get: function () { return utils_1.hashStoreKey; } });
+tslib_1.__exportStar(require("./utils/fetcher"), exports);
 tslib_1.__exportStar(require("./vanilla"), exports);
 tslib_1.__exportStar(require("./react"), exports);

package/lib/react/create-query.js

@@ -34,7 +34,7 @@ const useQueryDefaultDeps = (state) => [
     state.isWaitingNextPage,
     state.hasNextPage,
 ];
-const defaultElement = () => null;
+const fallbackComponent = () => null;
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createquery
  */
@@ -411,7 +411,7 @@ const createQuery = (queryFn, options = {}) => {
         return state;
     };
     useQuery.Render = (props) => {
-        const { queryKey, loading = defaultElement, success = defaultElement, error = defaultElement, } = props;
+        const { queryKey, loading = fallbackComponent, success = fallbackComponent, error = fallbackComponent, } = props;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const state = useQuery(queryKey);
         if (state.data)

package/lib/utils/fetcher.d.ts

@@ -0,0 +1,16 @@
+type FetcherOptions<TResponse = any> = {
+    url: string;
+    query?: string;
+    params?: Record<string, string | number | boolean> | null;
+    payload?: any;
+    validate?: (response: TResponse) => void | Promise<void>;
+} & RequestInit;
+/**
+ * Experimental fetcher - a query/mutation function creator.
+ *
+ * Can be used for REST or GraphQL.
+ *
+ * @returns A function to fetch data
+ */
+export declare const fetcher: <TResponse = any, TInput extends any[] = any[]>(options: FetcherOptions<TResponse> | ((...args: TInput) => FetcherOptions<TResponse>)) => (...args: TInput) => Promise<TResponse>;
+export {};

package/lib/utils/fetcher.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetcher = void 0;
+/* eslint-disable no-throw-literal */
+const _1 = require(".");
+const encodeParams = (params) => Object.entries(params)
+    .map((kv) => kv.map(encodeURIComponent).join('='))
+    .join('&');
+/**
+ * Experimental fetcher - a query/mutation function creator.
+ *
+ * Can be used for REST or GraphQL.
+ *
+ * @returns A function to fetch data
+ */
+const fetcher = (options) => async (...args) => {
+    const { url, query, params, payload, headers, validate, ...rest } = (0, _1.getValueOrComputedValue)(options, ...args);
+    let autoOptions = {};
+    let searchParams = params;
+    if (query) {
+        // GraphQL
+        autoOptions = {
+            method: 'POST',
+            body: JSON.stringify({ query, variables: payload || args[0] }),
+        };
+    }
+    else if (rest.method && rest.method.toLowerCase() !== 'get') {
+        // REST - Mutation
+        autoOptions = {
+            body: JSON.stringify(payload === undefined ? args[0] : payload),
+        };
+    }
+    else {
+        // REST - Query
+        if (typeof options === 'object' && params === undefined)
+            searchParams = args[0];
+    }
+    const fetchUrl = searchParams ? [url, encodeParams(searchParams)].join('?') : url;
+    const res = await fetch(fetchUrl, {
+        headers: { 'Content-Type': 'application/json', ...headers },
+        ...autoOptions,
+        ...rest,
+    });
+    const contentType = res.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+        const resJson = await res.json().catch(() => undefined);
+        if (resJson !== undefined) {
+            if (query && resJson.errors) {
+                throw { status: res.status, statusText: res.statusText, response: resJson };
+            }
+            if (res.ok) {
+                if (validate) {
+                    try {
+                        await validate(resJson);
+                    }
+                    catch (err) {
+                        throw {
+                            status: res.status,
+                            statusText: res.statusText,
+                            response: resJson,
+                            validationError: err,
+                        };
+                    }
+                }
+                return resJson;
+            }
+            throw { status: res.status, statusText: res.statusText, response: resJson };
+        }
+    }
+    const resText = await res.text().catch(() => undefined);
+    throw { status: res.status, statusText: res.statusText, response: resText };
+};
+exports.fetcher = fetcher;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "2.9.0-beta.2",
+  "version": "2.10.0-beta.1",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",