feat: all good

Author: DorianMaliszewski

packages/use-dataloader/src/DataLoaderProvider.tsx

@@ -5,6 +5,7 @@ import {
   KEY_IS_NOT_STRING_ERROR,
 } from './constants'
 import DataLoader from './dataloader'
+import { marshalQueryKey } from './helpers'
 import type { OnErrorFn, PromiseType } from './types'
 
 type CachedData = Record<string, unknown>
@@ -39,6 +40,7 @@ export type IDataLoaderContext = {
     key: string,
     args: UseDataLoaderInitializerArgs<ResultType>,
   ) => DataLoader<ResultType, ErrorType>
+  computeKey: (key: string) => string
   cacheKeyPrefix?: string
   onError?: (error: Error) => void | Promise<void>
   clearAllCachedData: () => void
@@ -65,14 +67,14 @@ type DataLoaderProviderProps = {
 
 const DataLoaderProvider = ({
   children,
-  cacheKeyPrefix = '',
+  cacheKeyPrefix,
   onError,
   maxConcurrentRequests = DEFAULT_MAX_CONCURRENT_REQUESTS,
 }: DataLoaderProviderProps): ReactElement => {
   const requestsRef = useRef<Requests>({})
 
   const computeKey = useCallback(
-    (key: string) => `${cacheKeyPrefix ? `${cacheKeyPrefix}-` : ''}${key}`,
+    (key: string) => marshalQueryKey([cacheKeyPrefix, key]),
     [cacheKeyPrefix],
   )
 
@@ -201,6 +203,7 @@ const DataLoaderProvider = ({
       reload,
       reloadAll,
       reloadGroup,
+      computeKey,
     }),
     [
       addRequest,
@@ -215,6 +218,7 @@ const DataLoaderProvider = ({
       reload,
       reloadAll,
       reloadGroup,
+      computeKey,
     ],
   )
 

packages/use-dataloader/src/__tests__/useInfiniteDataLoader.test.tsx

@@ -12,10 +12,6 @@ const config: UseInfiniteDataLoaderConfig<
   'page'
 > = {
   getNextPage: result => result.nextPage,
-  pageKey: 'page',
-  params: {
-    page: 1,
-  },
   enabled: true,
 }
 
@@ -41,6 +37,9 @@ const getPrerequisite = (key: string) => {
 
   return {
     initialProps: {
+      baseParams: {
+        page: 1,
+      },
       config: {
         enabled: true,
       },
@@ -65,7 +64,14 @@ describe('useInfinitDataLoader', () => {
   it('should get the first page on mount while enabled', async () => {
     const { setCanResolve, initialProps } = getPrerequisite('test1')
     const { result } = renderHook(
-      props => useInfiniteDataLoader(props.key, props.method, config),
+      props =>
+        useInfiniteDataLoader(
+          props.key,
+          props.method,
+          props.baseParams,
+          'page',
+          config,
+        ),
       {
         initialProps,
         wrapper,
@@ -86,7 +92,14 @@ describe('useInfinitDataLoader', () => {
   it('should get the first and loadMore one page on mount while enabled', async () => {
     const { setCanResolve, initialProps } = getPrerequisite('test2')
     const { result } = renderHook(
-      props => useInfiniteDataLoader(props.key, props.method, config),
+      props =>
+        useInfiniteDataLoader(
+          props.key,
+          props.method,
+          props.baseParams,
+          'page',
+          config,
+        ),
       {
         initialProps,
         wrapper,
@@ -129,7 +142,14 @@ describe('useInfinitDataLoader', () => {
     const { setCanResolve, initialProps, resetCounter } =
       getPrerequisite('test3')
     const { result } = renderHook(
-      props => useInfiniteDataLoader(props.key, props.method, config),
+      props =>
+        useInfiniteDataLoader(
+          props.key,
+          props.method,
+          props.baseParams,
+          'page',
+          config,
+        ),
       {
         initialProps,
         wrapper,
@@ -191,7 +211,14 @@ describe('useInfinitDataLoader', () => {
       },
     }
     const { result, rerender } = renderHook(
-      props => useInfiniteDataLoader(props.key, props.method, props.config),
+      props =>
+        useInfiniteDataLoader(
+          props.key,
+          props.method,
+          props.baseParams,
+          'page',
+          props.config,
+        ),
       {
         initialProps: localInitialProps,
         wrapper,

packages/use-dataloader/src/index.ts

@@ -3,5 +3,6 @@ export {
   useDataLoaderContext,
 } from './DataLoaderProvider'
 export { useDataLoader } from './useDataLoader'
-export type { UseDataLoaderConfig } from './types'
+export type { UseDataLoaderConfig, UseInfiniteDataLoaderConfig } from './types'
 export { DATALIFE_TIME, POLLING_INTERVAL } from './constants'
+export { useInfiniteDataLoader } from './useInfiniteDataLoader'

packages/use-dataloader/src/types.ts

@@ -97,21 +97,16 @@ export type UseDataLoaderResult<ResultType, ErrorType> = {
 export type UseInfiniteDataLoaderConfig<
   ResultType,
   ErrorType extends Error,
-  ParamsType,
+  ParamsType extends Record<string, unknown>,
   ParamsKey extends keyof ParamsType,
 > = Omit<UseDataLoaderConfig<ResultType, ErrorType>, 'initialData'> & {
-  /**
-   * Params will be forwarded to method
-   */
-  params: ParamsType
-  /**
-   * The key to change in params
-   */
-  pageKey: ParamsKey
   /**
    * If return undefined it consider that there are no remaining page to load
    */
-  getNextPage: (result: ResultType) => ParamsType[ParamsKey]
+  getNextPage: (
+    lastRes: ResultType,
+    lastParams: ParamsType,
+  ) => ParamsType[ParamsKey]
   /**
    * The initial data if no one is present in the cache before the request
    */

packages/use-dataloader/src/useInfiniteDataLoader.ts

@@ -16,43 +16,49 @@ import type {
 export const useInfiniteDataLoader = <
   ResultType = unknown,
   ErrorType extends Error = Error,
-  ParamsType = unknown,
+  ParamsType extends Record<string, unknown> = Record<string, unknown>,
   ParamsPageKey extends keyof ParamsType = keyof ParamsType,
 >(
   baseKey: KeyType,
-  method: (params?: ParamsType) => PromiseType<ResultType>,
+  method: (params: ParamsType) => PromiseType<ResultType>,
+  baseParams: ParamsType,
+  pageParamKey: ParamsPageKey,
   config?: UseInfiniteDataLoaderConfig<
     ResultType,
     ErrorType,
     ParamsType,
     ParamsPageKey
   >,
 ): UseInfiniteDataLoaderResult<ResultType, ErrorType> => {
-  const { getOrAddRequest, onError: onGlobalError } = useDataLoaderContext()
+  const {
+    getOrAddRequest,
+    computeKey,
+    onError: onGlobalError,
+  } = useDataLoaderContext()
   const {
     enabled = true,
     onError,
     onSuccess,
     keepPreviousData = false,
     initialData,
     dataLifetime,
-    pageKey,
-    params,
     getNextPage,
   } = config ?? {}
   const requestRefs = useRef<DataLoader<ResultType, ErrorType>[]>([])
-  const [page, setPage] = useState(
-    params && pageKey ? params[pageKey] : undefined,
-  )
+  const [page, setPage] = useState(baseParams[pageParamKey])
   const nextPageRef = useRef(page)
   const getNextPageRef = useRef(getNextPage)
   const methodRef = useRef(() =>
     method(
-      pageKey && page ? ({ ...params, [pageKey]: page } as ParamsType) : params,
+      pageParamKey && page
+        ? ({ ...baseParams, [pageParamKey]: page } as ParamsType)
+        : baseParams,
     ),
   )
   const paramsRef = useRef(
-    pageKey && page ? ({ ...params, [pageKey]: page } as ParamsType) : params,
+    pageParamKey && page
+      ? ({ ...baseParams, [pageParamKey]: page } as ParamsType)
+      : baseParams,
   )
   const onSuccessRef = useRef(onSuccess)
   const onErrorRef = useRef(onError ?? onGlobalError)
@@ -62,30 +68,36 @@ export const useInfiniteDataLoader = <
     setCounter(current => current + 1)
   }, [])
 
-  const baseQueryKey = useMemo(
-    () => marshalQueryKey([marshalQueryKey(baseKey), page as string | number]),
-    [baseKey, page],
-  )
-
-  useEffect(() => {
-    requestRefs.current.forEach(request => request.removeObserver(() => null))
-    requestRefs.current = []
-    forceRerender()
-  }, [baseKey, forceRerender])
+  const baseQueryKey = useMemo(() => marshalQueryKey(baseKey), [baseKey])
 
   useEffect(
     () => () => {
-      requestRefs.current.forEach(request => request.removeObserver(() => null))
+      requestRefs.current.forEach(request =>
+        request.removeObserver(forceRerender),
+      )
     },
-    [],
+    [forceRerender],
   )
 
-  const getCurrentRequest = useCallback(() => {
-    const requestInRef = requestRefs.current.find(
-      request => request.key === baseQueryKey,
+  const getCurrentRequest = () => {
+    const currentQueryKey = marshalQueryKey([
+      baseQueryKey,
+      'infinite',
+      page as string | number,
+    ])
+    requestRefs.current.forEach(request =>
+      !request.key.startsWith(computeKey(baseQueryKey))
+        ? request.removeObserver(forceRerender)
+        : undefined,
+    )
+    requestRefs.current = requestRefs.current.filter(({ key }) =>
+      key.startsWith(computeKey(baseQueryKey)),
+    )
+    const requestInRef = requestRefs.current.find(request =>
+      request.key.endsWith(currentQueryKey),
     )
     if (!requestInRef) {
-      const request = getOrAddRequest<ResultType, ErrorType>(baseQueryKey, {
+      const request = getOrAddRequest<ResultType, ErrorType>(currentQueryKey, {
         enabled,
         method: methodRef.current,
       })
@@ -96,7 +108,7 @@ export const useInfiniteDataLoader = <
     }
 
     return requestInRef
-  }, [baseQueryKey, forceRerender, enabled, getOrAddRequest])
+  }
 
   const request = getCurrentRequest()
 
@@ -166,8 +178,10 @@ export const useInfiniteDataLoader = <
 
   useEffect(() => {
     paramsRef.current =
-      pageKey && page ? ({ ...params, [pageKey]: page } as ParamsType) : params
-  }, [params, pageKey, page])
+      pageParamKey && page
+        ? ({ ...baseParams, [pageParamKey]: page } as ParamsType)
+        : baseParams
+  }, [baseParams, pageParamKey, page])
 
   useEffect(() => {
     if (needLoad) {
@@ -180,6 +194,7 @@ export const useInfiniteDataLoader = <
           if (getNextPageRef.current) {
             nextPageRef.current = getNextPageRef.current(
               result,
+              paramsRef.current,
             ) as typeof nextPageRef.current
           }
           await onSuccessLoad(result)
@@ -203,16 +218,18 @@ export const useInfiniteDataLoader = <
       isLoadingFirstPage,
       data:
         isLoadingFirstPage ||
-        requestRefs.current.filter(dataloader => !!dataloader.data).length === 0
+        [...requestRefs.current].filter(dataloader => !!dataloader.data)
+          .length === 0
           ? initialData
-          : (requestRefs.current
+          : ([...requestRefs.current]
               .filter(dataloader => !!dataloader.data)
               .map(dataloader => dataloader.data) as ResultType[]),
       error: request.error,
       reload,
       loadMore,
     }),
     [
+      initialData,
       isIdle,
       isLoading,
       isSuccess,
@@ -221,7 +238,6 @@ export const useInfiniteDataLoader = <
       isLoadingFirstPage,
       reload,
       loadMore,
-      initialData,
     ],
   )