feat: add clear request store

src/lazy_request_hook.ts

@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant';
 import isEqual from 'lodash.isequal';
 import { useClient } from './client_hook';
 import { AnyEndpoint, ExtractEndpointParams, ExtractEndpointResponse, ExtractEndpointVariables, methodWithoutEffects } from './endpoint';
-import { PublicRequestState, RequestReducer, requestReducer } from './reducer';
+import { INITIAL_REQUEST_STATE, PublicRequestState, RequestReducer, requestReducer } from './reducer';
 import { useRequestContext } from './request_context';
 import { ClientResponse } from './client';
 import { isFunction } from './misc';
@@ -38,6 +38,7 @@ extends
 {
     readonly refetch: () => void,
     readonly cancel: () => void,
+    readonly clearStore: () => void,
 };
 
 export function useLazyRequest<E extends AnyEndpoint>(
@@ -48,11 +49,7 @@ export function useLazyRequest<E extends AnyEndpoint>(
     const { defaultHeaders } = useRequestContext();
     const [state, dispatch] = React.useReducer<RequestReducer<ExtractEndpointResponse<E>>>(
         requestReducer,
-        {
-            data: null,
-            loading: false,
-            isCalled: false,
-        }
+        INITIAL_REQUEST_STATE,
     );
     const [prevHandlerConfig, setPrevHandlerConfig] = React.useState<LazyRequestHandlerConfig<E> | null>(null);
 
@@ -165,6 +162,10 @@ export function useLazyRequest<E extends AnyEndpoint>(
         abortControllerRef.current = new AbortController();
     }, []);
 
+    const clearRequestStore = React.useCallback(() => {
+        dispatch({ type: 'clearStore' });
+    }, []);
+
     React.useEffect(
         () => cancelRequest,
         [cancelRequest]
@@ -180,6 +181,7 @@ export function useLazyRequest<E extends AnyEndpoint>(
             fetchError: state.fetchError,
             refetch: refetchRequest,
             cancel: cancelRequest,
+            clearStore: clearRequestStore
         },
     ];
 }

src/reducer.ts

@@ -33,9 +33,24 @@ export type RequestAction<R> =
     | {
         type: 'cancel'
     }
+    | {
+        type: 'clearStore'
+    }
 
 export type RequestReducer<R> = React.Reducer<RequestState<R>, RequestAction<R>>
 
+export const INITIAL_REQUEST_STATE: RequestState<any> = {
+    data: null,
+    response: undefined,
+    fetchError: undefined,
+    isCanceled: false,
+    loading: false,
+    isCalled: false,
+    prevHeaders: undefined,
+    prevVariables: undefined,
+    prevParams: undefined,
+};
+
 export function requestReducer<R>(state: RequestState<R>, action: RequestAction<R>): RequestState<R> {
     switch (action.type) {
         case 'call': {
@@ -76,5 +91,9 @@ export function requestReducer<R>(state: RequestState<R>, action: RequestAction<
                 fetchError: undefined,
             };
         }
+        case 'clearStore': {
+            return INITIAL_REQUEST_STATE;
+        }
     }
 }
+

target/client.d.ts

@@ -12,13 +12,13 @@ export interface RequestProps<R> extends PrepareRequestProps {
     readonly transformResponseData?: (data: unknown) => R;
     readonly abortSignal: AbortSignal;
 }
-export declare type ResponseWithError = Pick<Response, 'ok' | 'redirected' | 'status' | 'statusText' | 'type' | 'headers' | 'url'> & Readonly<{
-    error?: Error;
-    canceled?: boolean;
-}>;
-export declare type ClientResponse<Data extends Record<string, any>> = ResponseWithError & Readonly<{
-    data: Data;
-}>;
+export interface ResponseWithError extends Pick<Response, 'ok' | 'redirected' | 'status' | 'statusText' | 'type' | 'headers' | 'url'> {
+    readonly error?: Error;
+    readonly canceled?: boolean;
+}
+export interface ClientResponse<Data extends Record<string, any>> extends ResponseWithError {
+    readonly data: Data;
+}
 export declare class Client {
     private readonly config;
     constructor(config: ClientConfig);

target/client.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import invariant from 'tiny-invariant';
-import { Method } from './endpoint';
+import { methodCanContainBody } from './endpoint';
 import { formDataFromObject, isFunction, urlSearchParamsFromObject } from './misc';
 export class Client {
     constructor(config) {
@@ -18,7 +18,7 @@ export class Client {
     }
     prepareRequest(props) {
         var _a;
-        const requestCanContainBody = [Method.POST, Method.PATCH, Method.PUT].includes(props.method);
+        const requestCanContainBody = methodCanContainBody(props.method);
         const defaultBaseUrl = (_a = window) === null || _a === void 0 ? void 0 : _a.location.href;
         const sourceUrl = /https?:\/\//.test(props.url) ?
             props.url

target/endpoint.d.ts

@@ -6,6 +6,8 @@ export declare enum Method {
     PATCH = "PATCH",
     DELETE = "DELETE"
 }
+export declare function methodCanContainBody(method: Method): boolean;
+export declare function methodWithoutEffects(method: Method): boolean;
 export declare type Endpoint<R, V, P = unknown> = Readonly<{
     _?: V;
     method: Method;

target/endpoint.js

@@ -7,3 +7,9 @@ export var Method;
     Method["PATCH"] = "PATCH";
     Method["DELETE"] = "DELETE";
 })(Method || (Method = {}));
+export function methodCanContainBody(method) {
+    return [Method.POST, Method.PATCH, Method.PUT].includes(method);
+}
+export function methodWithoutEffects(method) {
+    return [Method.HEAD, Method.GET].includes(method);
+}

target/lazy_request_hook.d.ts

@@ -1,20 +1,21 @@
 import { AnyEndpoint, ExtractEndpointParams, ExtractEndpointResponse, ExtractEndpointVariables } from './endpoint';
 import { PublicRequestState } from './reducer';
 import { ClientResponse } from './client';
-export declare type LazyRequestConfig<R, V, P> = Readonly<{
-    variables?: V;
-    params?: P;
-    headers?: Record<string, string>;
-    onComplete?: (data: R) => unknown;
-    onFailure?: (res: ClientResponse<R>) => unknown;
-}>;
+export interface LazyRequestConfig<R, V, P> {
+    readonly variables?: V;
+    readonly params?: P;
+    readonly headers?: Record<string, string>;
+    readonly onComplete?: (data: R) => unknown;
+    readonly onFailure?: (res: ClientResponse<R>) => unknown;
+}
 export declare type LazyRequestConfigFromEndpoint<E extends AnyEndpoint> = LazyRequestConfig<ExtractEndpointResponse<E>, ExtractEndpointVariables<E>, ExtractEndpointParams<E>>;
-export declare type LazyRequestHandlerConfig<E extends AnyEndpoint> = Readonly<LazyRequestConfigFromEndpoint<E> & {
-    force?: boolean;
-}>;
+export interface LazyRequestHandlerConfig<E extends AnyEndpoint> extends LazyRequestConfigFromEndpoint<E> {
+    readonly force?: boolean;
+}
 export declare type RequestHandler<E extends AnyEndpoint> = (config?: LazyRequestHandlerConfig<E>) => Promise<ExtractEndpointResponse<E> | null>;
-export declare type PublicRequestStateWithActions<E extends AnyEndpoint> = PublicRequestState<ExtractEndpointResponse<E>> & {
-    refetch: () => void;
-    cancel: () => void;
-};
+export interface PublicRequestStateWithActions<E extends AnyEndpoint> extends PublicRequestState<ExtractEndpointResponse<E>> {
+    readonly refetch: () => void;
+    readonly cancel: () => void;
+    readonly clearStore: () => void;
+}
 export declare function useLazyRequest<E extends AnyEndpoint>(endpoint: E, config?: LazyRequestConfigFromEndpoint<E>): [RequestHandler<E>, PublicRequestStateWithActions<E>];

target/lazy_request_hook.js

@@ -2,17 +2,15 @@ import React from 'react';
 import invariant from 'tiny-invariant';
 import isEqual from 'lodash.isequal';
 import { useClient } from './client_hook';
-import { requestReducer } from './reducer';
+import { methodWithoutEffects } from './endpoint';
+import { INITIAL_REQUEST_STATE, requestReducer } from './reducer';
 import { useRequestContext } from './request_context';
 import { isFunction } from './misc';
+;
 export function useLazyRequest(endpoint, config) {
     const [client] = useClient();
     const { defaultHeaders } = useRequestContext();
-    const [state, dispatch] = React.useReducer(requestReducer, {
-        data: null,
-        loading: false,
-        isCalled: false,
-    });
+    const [state, dispatch] = React.useReducer(requestReducer, INITIAL_REQUEST_STATE);
     const [prevHandlerConfig, setPrevHandlerConfig] = React.useState(null);
     const abortControllerRef = React.useRef(new AbortController());
     const transformResponseData = React.useCallback((data) => {
@@ -39,11 +37,13 @@ export function useLazyRequest(endpoint, config) {
         }
         const variables = Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.variables), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.variables);
         const headers = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultHeaders), endpoint.headers), config === null || config === void 0 ? void 0 : config.headers), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.headers);
-        if (state.isCalled
+        const shouldReturnCachedValue = (methodWithoutEffects(endpoint.method)
+            && state.isCalled
             && isSameRequest
             && (state === null || state === void 0 ? void 0 : state.prevVariables) && isEqual(state.prevVariables, variables)
             && (state === null || state === void 0 ? void 0 : state.prevHeaders) && isEqual(state.prevHeaders, headers)
-            && (handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.force) === false) {
+            && !(handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.force));
+        if (shouldReturnCachedValue) {
             return Promise.resolve(state.data);
         }
         const onCompletes = [config === null || config === void 0 ? void 0 : config.onComplete, handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.onComplete].filter(isFunction);
@@ -68,7 +68,7 @@ export function useLazyRequest(endpoint, config) {
     }, [state, config, client, endpoint, defaultHeaders, transformResponseData]);
     const refetchRequest = React.useCallback(() => {
         if (prevHandlerConfig != null) {
-            handler(Object.assign(Object.assign({}, prevHandlerConfig), { force: true }));
+            handler(Object.assign({}, prevHandlerConfig));
         }
     }, [handler, prevHandlerConfig]);
     const cancelRequest = React.useCallback(() => {
@@ -76,6 +76,9 @@ export function useLazyRequest(endpoint, config) {
         abortControllerRef.current.abort();
         abortControllerRef.current = new AbortController();
     }, []);
+    const clearRequestStore = React.useCallback(() => {
+        dispatch({ type: 'clearStore' });
+    }, []);
     React.useEffect(() => cancelRequest, [cancelRequest]);
     return [
         handler,
@@ -87,6 +90,7 @@ export function useLazyRequest(endpoint, config) {
             fetchError: state.fetchError,
             refetch: refetchRequest,
             cancel: cancelRequest,
+            clearStore: clearRequestStore
         },
     ];
 }

target/reducer.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 import { ClientResponse } from './client';
-export declare type PublicRequestState<R> = Readonly<{
-    data: R | null;
-    loading: boolean;
-    isCalled: boolean;
-    isCanceled?: boolean;
-    response?: ClientResponse<R>;
-    fetchError?: Error;
-}>;
-export declare type RequestState<R> = PublicRequestState<R> & Readonly<{
-    prevHeaders?: Record<string, string>;
-    prevVariables?: Record<string, any>;
-    prevParams?: Record<string, any>;
-}>;
+export interface PublicRequestState<R> {
+    readonly data: R | null;
+    readonly loading: boolean;
+    readonly isCalled: boolean;
+    readonly isCanceled?: boolean;
+    readonly response?: ClientResponse<R>;
+    readonly fetchError?: Error;
+}
+export interface RequestState<R> extends PublicRequestState<R> {
+    readonly prevHeaders?: Record<string, string>;
+    readonly prevVariables?: Record<string, any>;
+    readonly prevParams?: Record<string, any>;
+}
 export declare type RequestAction<R> = {
     type: 'call';
     headers: Record<string, string>;
@@ -26,6 +26,9 @@ export declare type RequestAction<R> = {
     response: ClientResponse<R>;
 } | {
     type: 'cancel';
+} | {
+    type: 'clearStore';
 };
 export declare type RequestReducer<R> = React.Reducer<RequestState<R>, RequestAction<R>>;
+export declare const INITIAL_REQUEST_STATE: RequestState<any>;
 export declare function requestReducer<R>(state: RequestState<R>, action: RequestAction<R>): RequestState<R>;

target/reducer.js

@@ -1,3 +1,14 @@
+export const INITIAL_REQUEST_STATE = {
+    data: null,
+    response: undefined,
+    fetchError: undefined,
+    isCanceled: false,
+    loading: false,
+    isCalled: false,
+    prevHeaders: undefined,
+    prevVariables: undefined,
+    prevParams: undefined,
+};
 export function requestReducer(state, action) {
     switch (action.type) {
         case 'call': {
@@ -10,7 +21,10 @@ export function requestReducer(state, action) {
             return Object.assign(Object.assign({}, state), { loading: false, response: action.response, data: null, fetchError: action.response.error, isCanceled: action.response.canceled });
         }
         case 'cancel': {
-            return Object.assign(Object.assign({}, state), { isCanceled: false, fetchError: undefined });
+            return Object.assign(Object.assign({}, state), { isCanceled: true, fetchError: undefined });
+        }
+        case 'clearStore': {
+            return INITIAL_REQUEST_STATE;
         }
     }
 }

target/request_context.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
 import { Client } from './client';
-export declare type RequestContextData = Readonly<{
-    client: Client;
-    defaultHeaders?: Record<string, string>;
-}>;
+export interface RequestContextData {
+    readonly client: Client;
+    readonly defaultHeaders?: Record<string, string>;
+}
 export declare type RequestProviderProps = Readonly<React.PropsWithChildren<RequestContextData>>;
 export declare function RequestProvider({ client, defaultHeaders, children }: RequestProviderProps): JSX.Element;
-export declare function useRequestContext(): Readonly<{
-    client: Client;
-    defaultHeaders?: Record<string, string> | undefined;
-}>;
+export declare function useRequestContext(): RequestContextData;

target/request_hook.d.ts

@@ -1,6 +1,6 @@
 import { AnyEndpoint } from './endpoint';
 import { LazyRequestConfigFromEndpoint } from './lazy_request_hook';
-export declare type RequestConfigFromEndpoint<E extends AnyEndpoint> = Readonly<LazyRequestConfigFromEndpoint<E> & {
-    skip?: boolean;
-}>;
+export interface RequestConfigFromEndpoint<E extends AnyEndpoint> extends LazyRequestConfigFromEndpoint<E> {
+    readonly skip?: boolean;
+}
 export declare function useRequest<E extends AnyEndpoint>(endpoint: E, config?: RequestConfigFromEndpoint<E>): import("./lazy_request_hook").PublicRequestStateWithActions<E>;

target/request_hook.js

@@ -1,16 +1,14 @@
 import React from 'react';
 import invariant from 'tiny-invariant';
-import { Method } from './endpoint';
+import { methodWithoutEffects } from './endpoint';
 import { useLazyRequest } from './lazy_request_hook';
 export function useRequest(endpoint, config) {
-    invariant(endpoint.method !== Method.DELETE, `You cannot use useRequest with ${endpoint.method} method`);
+    invariant(methodWithoutEffects(endpoint.method), `You cannot use useRequest with ${endpoint.method} method`);
     const [handler, state] = useLazyRequest(endpoint, config);
     const skip = React.useMemo(() => { var _a; return (_a = config === null || config === void 0 ? void 0 : config.skip) !== null && _a !== void 0 ? _a : false; }, [config]);
     React.useEffect(() => {
         if (!skip) {
-            handler({
-                force: false,
-            });
+            handler();
         }
     }, [skip, handler]);
     return state;