feat: add normalize (#40)

Author: NasgulNexus

package-lock.json

@@ -43,6 +43,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@normy/core": "^0.14.0",
     "utility-types": "^3.11.0"
   },
   "devDependencies": {

package.json

@@ -18,6 +18,7 @@ export type {
 export type {DataManager} from './types/DataManager';
 export type {DataLoaderStatus} from './types/DataLoaderStatus';
 export type {InvalidateRepeatOptions, InvalidateOptions} from './types/DataManagerOptions';
+export type {Normalizer, NormalizerConfig, OptimisticConfig} from './types/Normalizer';
 
 export {idle} from './constants';
 

src/core/index.ts

@@ -1,7 +1,16 @@
+import type {Data} from '@normy/core';
+
 import type {InvalidateOptions} from './DataManagerOptions';
 import type {AnyDataSource, DataSourceParams, DataSourceTag} from './DataSource';
+import type {Normalizer} from './Normalizer';
 
 export interface DataManager {
+    normalizer?: Normalizer;
+
+    optimisticUpdate(mutationData: Data): void;
+
+    invalidateData(data: Data): void;
+
     invalidateTag(tag: DataSourceTag, invalidateOptions?: InvalidateOptions): Promise<void>;
 
     invalidateTags(tags: DataSourceTag[], invalidateOptions?: InvalidateOptions): Promise<void>;

src/core/types/DataManager.ts

@@ -0,0 +1,32 @@
+import type {NormalizerConfig as NormalizeConfigBase} from '@normy/core';
+import type {Data, NormalizedData} from '@normy/core/types/types';
+
+export interface OptimisticConfig {
+    /** Automatically calculate rollback data, defaults to true */
+    autoCalculateRollback?: boolean;
+    /** Whether debug logging is enabled */
+    devLogging?: boolean;
+}
+
+export interface NormalizerConfig extends NormalizeConfigBase {
+    initialData?: NormalizedData;
+    optimistic?: boolean | OptimisticConfig;
+    invalidate?: boolean;
+}
+
+export interface Normalizer {
+    getNormalizedData: () => NormalizedData;
+    clearNormalizedData: () => void;
+    setQuery: (queryKey: string, queryData: Data) => void;
+    removeQuery: (queryKey: string) => void;
+    getQueriesToUpdate: (mutationData: Data) => {
+        queryKey: string;
+        data: Data;
+    }[];
+    getObjectById: <T extends Data>(id: string, exampleObject?: T) => T | undefined;
+    getQueryFragment: <T extends Data>(fragment: Data, exampleObject?: T) => T | undefined;
+    getDependentQueries: (mutationData: Data) => readonly string[];
+    getDependentQueriesByIds: (ids: ReadonlyArray<string>) => readonly string[];
+    getCurrentData: <T extends Data>(newData: T) => T | undefined;
+    log: (...messages: unknown[]) => void;
+}

src/core/types/Normalizer.ts

@@ -1,20 +1,31 @@
-import type {InvalidateQueryFilters, QueryClientConfig} from '@tanstack/react-query';
+import type {Data} from '@normy/core';
+import {createNormalizer} from '@normy/core';
+import type {InvalidateQueryFilters, QueryClientConfig, QueryKey} from '@tanstack/react-query';
 import {QueryClient} from '@tanstack/react-query';
 
 import {
     type AnyDataSource,
     type DataManager,
     type DataSourceParams,
     type DataSourceTag,
+    type Normalizer,
+    type NormalizerConfig,
     composeFullKey,
     hasTag,
 } from '../core';
 import type {InvalidateOptions, InvalidateRepeatOptions} from '../core/types/DataManagerOptions';
 
-export type ClientDataManagerConfig = QueryClientConfig;
+import type {QueryNormalizer} from './types/normalizer';
+import {createQueryNormalizer} from './utils/normalize';
+
+export interface ClientDataManagerConfig extends QueryClientConfig {
+    normalizerConfig?: NormalizerConfig | boolean;
+}
 
 export class ClientDataManager implements DataManager {
     readonly queryClient: QueryClient;
+    readonly normalizer?: Normalizer | undefined;
+    readonly queryNormalizer?: QueryNormalizer | undefined;
 
     constructor(config: ClientDataManagerConfig = {}) {
         this.queryClient = new QueryClient({
@@ -31,6 +42,53 @@ export class ClientDataManager implements DataManager {
                 },
             },
         });
+
+        this.normalizer = this.createNormalize(config.normalizerConfig);
+        this.queryNormalizer = createQueryNormalizer(
+            this.normalizer,
+            this.queryClient,
+            config.normalizerConfig,
+            (data) => this.optimisticUpdate(data),
+            (data) => this.invalidateData(data),
+        );
+    }
+
+    optimisticUpdate(mutationData: Data) {
+        if (!this.normalizer) {
+            return;
+        }
+
+        const queriesToUpdate = this.normalizer.getQueriesToUpdate(mutationData);
+
+        queriesToUpdate.forEach((query) => {
+            const queryKey = JSON.parse(query.queryKey) as QueryKey;
+
+            const cachedQuery = this.queryClient.getQueryCache().find({queryKey});
+
+            const dataUpdatedAt = cachedQuery?.state.dataUpdatedAt;
+            const isInvalidated = cachedQuery?.state.isInvalidated;
+            const error = cachedQuery?.state.error;
+            const status = cachedQuery?.state.status;
+
+            this.queryClient.setQueryData(queryKey, () => query.data, {
+                updatedAt: dataUpdatedAt,
+            });
+
+            cachedQuery?.setState({isInvalidated, error, status});
+        });
+    }
+
+    invalidateData(data: Data): void {
+        if (!this.normalizer) {
+            return;
+        }
+
+        const queriesToUpdate = this.normalizer.getQueriesToUpdate(data);
+
+        queriesToUpdate.forEach((query) => {
+            const queryKey = JSON.parse(query.queryKey) as QueryKey;
+            this.queryClient.invalidateQueries({queryKey});
+        });
     }
 
     invalidateTag(tag: DataSourceTag, invalidateOptions?: InvalidateOptions) {
@@ -129,4 +187,18 @@ export class ClientDataManager implements DataManager {
             setTimeout(invalidate, repeat.interval * i);
         }
     }
+
+    private createNormalize(
+        config: boolean | NormalizerConfig | undefined,
+    ): Normalizer | undefined {
+        if (!config) {
+            return undefined;
+        }
+
+        if (config === true) {
+            return createNormalizer({});
+        }
+
+        return createNormalizer(config);
+    }
 }

src/react-query/ClientDataManager.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {QueryClientProvider} from '@tanstack/react-query';
+
+import {DataManagerProvider} from '../react/DataManagerProvider';
+
+import type {ClientDataManager} from './ClientDataManager';
+
+export interface DataSourceProviderProps {
+    dataManager: ClientDataManager;
+    children: React.ReactNode;
+}
+
+export const DataSourceProvider: React.FC<DataSourceProviderProps> = ({children, dataManager}) => {
+    React.useEffect(() => {
+        if (!dataManager.queryNormalizer) {
+            return undefined;
+        }
+
+        dataManager.queryNormalizer.subscribe();
+
+        return () => {
+            dataManager.queryNormalizer?.unsubscribe();
+            dataManager.queryNormalizer?.clear();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <QueryClientProvider client={dataManager.queryClient}>
+            <DataManagerProvider dataManager={dataManager}>{children}</DataManagerProvider>
+        </QueryClientProvider>
+    );
+};