Shelf

Author: riqts

packages/toolkit/src/query/core/buildInitiate.ts

@@ -102,13 +102,15 @@ export type InfiniteQueryActionCreatorResult<
   arg: QueryArgFrom<D>
   requestId: string
   subscriptionOptions: SubscriptionOptions | undefined
+  infiniteQueryOptions: InfiniteQueryConfigOptions | undefined
   abort(): void
   unwrap(): Promise<ResultTypeFrom<D>>
   unsubscribe(): void
   refetch(): QueryActionCreatorResult<D>
   fetchNextPage(): QueryActionCreatorResult<D>
   fetchPreviousPage(): QueryActionCreatorResult<D>
   updateSubscriptionOptions(options: SubscriptionOptions): void
+  updateInfiniteQueryOptions(options: InfiniteQueryConfigOptions): void
   queryCacheKey: string
 }
 

packages/toolkit/src/query/core/buildMiddleware/infiniteQuery.ts

@@ -0,0 +1,18 @@
+import type { InternalHandlerBuilder, QueryStateMeta, TimeoutId } from '@internal/query/core/buildMiddleware/types'
+
+export const buildInfiniteQueryHandler: InternalHandlerBuilder = ({
+ reducerPath,
+ queryThunk,
+ api,
+fetchNextPage,
+internalState,
+}) => {
+  const currentData: QueryStateMeta<{
+    nextPollTimestamp: number
+    timeout?: TimeoutId
+    pollingInterval: number
+  }> = {}
+
+
+
+}

packages/toolkit/src/query/core/buildMiddleware/types.ts

@@ -56,6 +56,17 @@ export type SubMiddlewareApi = MiddlewareAPI<
   RootState<EndpointDefinitions, string, string>
 >
 
+export interface BuildInfMiddlewareInput
+  extends BuildMiddlewareInput<EndpointDefinitions, string, string> {
+  internalState: InternalMiddlewareState
+  fetchNextPage(
+    querySubState: QuerySubState<any>,
+    queryCacheKey: string,
+    arg: unknown,
+  ): AsyncThunkAction<ThunkResult, QueryThunkArg, {}>
+  isThisApiSliceAction: (action: Action) => boolean
+  }
+
 export interface BuildSubMiddlewareInput
   extends BuildMiddlewareInput<EndpointDefinitions, string, string> {
   internalState: InternalMiddlewareState
@@ -70,6 +81,14 @@ export interface BuildSubMiddlewareInput
   isThisApiSliceAction: (action: Action) => boolean
 }
 
+export type InfMiddlewareBuilder = (
+  input: BuildInfMiddlewareInput,
+) => Middleware<
+  {},
+  RootState<EndpointDefinitions, string, string>,
+  ThunkDispatch<any, any, UnknownAction>
+>
+
 export type SubMiddlewareBuilder = (
   input: BuildSubMiddlewareInput,
 ) => Middleware<
@@ -87,7 +106,7 @@ export type ApiMiddlewareInternalHandler<Return = void> = (
 ) => Return
 
 export type InternalHandlerBuilder<ReturnType = void> = (
-  input: BuildSubMiddlewareInput,
+  input: BuildSubMiddlewareInput | BuildInfMiddlewareInput,
 ) => ApiMiddlewareInternalHandler<ReturnType>
 
 export interface PromiseConstructorWithKnownReason {

packages/toolkit/src/query/core/buildSlice.ts

@@ -28,8 +28,8 @@ import { calculateProvidedByThunk } from './buildThunks'
 import type {
   AssertTagTypes,
   EndpointDefinitions,
-  FullTagDescription,
-  QueryDefinition,
+  FullTagDescription, InfiniteQueryDefinition,
+  QueryDefinition
 } from '../endpointDefinitions'
 import type { Patch } from 'immer'
 import { isDraft } from 'immer'
@@ -426,32 +426,71 @@ export function buildSlice({
     name: `${reducerPath}/infinitequeries`,
     initialState: initialState as QueryState<any>,
     reducers: {
-      changeDirection: {
-        reducer(
-          draft,
-          { payload: { queryCacheKey } }: PayloadAction<QuerySubstateIdentifier>
-        ) {
-        },
-        prepare: prepareAutoBatched<QuerySubstateIdentifier>(),
-      },
-      combineArgsFromSelection: {
-        reducer(
-          draft,
+      fetchNextPage(
+        d,
+        a: PayloadAction<
           {
-            payload: { queryCacheKey, patches },
-          }: PayloadAction<
-            QuerySubstateIdentifier & { patches: readonly Patch[] }
-          >
-        ) {
-          updateQuerySubstateIfExists(draft, queryCacheKey, (substate) => {
-            substate.originalArgs = substate
-          })
-        },
-        prepare: prepareAutoBatched<
-          QuerySubstateIdentifier & { patches: readonly Patch[] }
-        >(),
+            endpointName: string
+            requestId: string
+            options: Subscribers[number]
+          } & QuerySubstateIdentifier
+        >,
+      ) {
+        // Dummy
       },
+      unsubscribeQueryResult(
+        d,
+        a: PayloadAction<{ requestId: string } & QuerySubstateIdentifier>,
+      ) {
+        // Dummy
+      },
+      internal_getRTKQSubscriptions() {},
     },
+    // extraReducers(builder) {
+    //   builder
+    //     .addCase(queryThunk.fulfilled, (draft, { meta, payload }) => {
+    //       updateQuerySubstateIfExists(
+    //         draft,
+    //         meta.arg.queryCacheKey,
+    //         (substate) => {
+    //           const { infiniteQueryOptions } = definitions[
+    //             meta.arg.endpointName
+    //             ] as InfiniteQueryDefinition<any, any, any, any>
+    //           substate.status = QueryStatus.fulfilled
+    //           if(!infiniteQueryOptions) return
+    //
+    //             if (substate.data !== undefined) {
+    //               const { fulfilledTimeStamp, arg, baseQueryMeta, requestId } =
+    //                 meta
+    //               // There's existing cache data. Let the user merge it in themselves.
+    //               // We're already inside an Immer-powered reducer, and the user could just mutate `substate.data`
+    //               // themselves inside of `merge()`. But, they might also want to return a new value.
+    //               // Try to let Immer figure that part out, save the result, and assign it to `substate.data`.
+    //               substate.data = payload
+    //             } else {
+    //               // Presumably a fresh request. Just cache the response data.
+    //               substate.data = payload
+    //             }
+    //           } else {
+    //             // Assign or safely update the cache data.
+    //             substate.data =
+    //               definitions[meta.arg.endpointName].structuralSharing ?? true
+    //                 ? copyWithStructuralSharing(
+    //                   isDraft(substate.data)
+    //                     ? original(substate.data)
+    //                     : substate.data,
+    //                   payload,
+    //                 )
+    //                 : payload
+    //           }
+    //
+    //           delete substate.error
+    //           substate.fulfilledTimeStamp = meta.fulfilledTimeStamp
+    //         },
+    //       )
+    //     })
+
+    // },
   })
 
 

packages/toolkit/src/query/core/buildThunks.ts

@@ -444,6 +444,8 @@ export function buildThunks<
           previous?: boolean,
         ): Promise<QueryReturnValue> => {
 
+          console.log('fetchPage', data, param, previous)
+
           if (param == null && data.pages.length) {
             return Promise.resolve({data})
           }
@@ -455,24 +457,24 @@ export function buildThunks<
             endpointDefinition.extraOptions as any
           )
 
-          const { maxPages } = endpointDefinition.extraOptions as any
+          const maxPages = 20
           const addTo = previous ? addToStart : addToEnd
 
           return {
             data: {
-              pages: addTo(data.pages, page, maxPages),
+              pages: addTo(data.pages, page.data, maxPages),
               pageParams: addTo(data.pageParams, param, maxPages),
             },
           }
         }
 
-        if ('direction' in arg && arg.infiniteQueryOptions) {
+        if ('infiniteQueryOptions' in endpointDefinition) {
           if (arg.direction && arg.data.pages.length) {
 
             const previous = arg.direction === 'backwards'
             const pageParamFn = previous ? getPreviousPageParam : getNextPageParam
             const oldData = arg.data
-            const param = pageParamFn(arg.infiniteQueryOptions, oldData)
+            const param = pageParamFn(endpointDefinition.infiniteQueryOptions, oldData)
 
             result = await fetchPage(oldData, param, previous)
           } else {

packages/toolkit/src/query/endpointDefinitions.ts

@@ -1,5 +1,11 @@
 import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
-import type { QuerySubState, RootState } from './core/apiState'
+import type {
+  GetNextPageParamFunction,
+  GetPreviousPageParamFunction,
+  InfiniteQueryConfigOptions,
+  QuerySubState,
+  RootState
+} from './core/apiState'
 import type {
   BaseQueryExtraOptions,
   BaseQueryFn,
@@ -553,7 +559,7 @@ export interface InfiniteQueryExtraOptions<
    */
   invalidatesTags?: never
 
-  selection: ({ from, to }: any, { read }: any) => any
+  infiniteQueryOptions: InfiniteQueryConfigOptions
 
   /**
    * All of these are `undefined` at runtime, purely to be used in TypeScript declarations!

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -724,6 +724,91 @@ describe('hooks tests', () => {
       expect(res.data!.amount).toBeGreaterThan(originalAmount)
     })
 
+
+    test('Infinite Query Hook', async () => {
+      function delay(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms))
+      }
+
+      function paginate<T>(array: T[], page_size: number, page_number: number) {
+        // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
+        return array.slice((page_number - 1) * page_size, page_number * page_size)
+      }
+
+      server.use(
+        http.get('https://example.com/listItems', ({ request }) => {
+          const url = new URL(request.url)
+          const pageString = url.searchParams.get('page')
+          const pageNum = parseInt(pageString || '0')
+
+          const results = {title: `page ${pageNum}`, info: "more name"}
+          return HttpResponse.json(results)
+        }),
+      )
+
+
+      const pokemonApi = createApi({
+        baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+        endpoints: (builder) => ({
+          getInfinitePokemon: builder.infiniteQuery<any, number>({
+            infiniteQueryOptions: {
+              getNextPageParam: (lastPage) => lastPage + 1,
+            },
+            query(pageParam = 0) {
+              return `https://example.com/listItems?page=${pageParam}`
+            }
+          }),
+        }),
+      })
+
+
+      const storeRef = setupApiStore(pokemonApi, undefined, {
+        withoutTestLifecycles: true,
+      })
+
+      const checkNumQueries = (count: number) => {
+        const cacheEntries = Object.keys((storeRef.store.getState()).api.queries)
+        const queries = cacheEntries.length
+        console.log('queries', queries)
+        console.log(storeRef.store.getState().api.queries)
+
+        expect(queries).toBe(count)
+      }
+
+      let i = 0;
+
+      function User() {
+        const { data, isFetching, isUninitialized } =
+          pokemonApi.useGetInfinitePokemonQuery(0)
+
+        return (
+          <div>
+            <div data-testid="isUninitialized">{String(isUninitialized)}</div>
+            <div data-testid="isFetching">{String(isFetching)}</div>
+            <div data-testid="data">
+              {String(data)}
+            </div>
+            <button data-testid="nextPage" onClick={() => console.log(pokemonApi.endpoints?.getInfinitePokemon)}>
+              nextPage
+            </button>
+          </div>
+        )
+      }
+
+      render(<User />, { wrapper: storeRef.wrapper })
+      expect(screen.getByTestId('data').textContent).toBe('undefined')
+      checkNumQueries(1)
+
+      await waitFor(() =>
+        expect(screen.getByTestId('isUninitialized').textContent).toBe('false'),
+      )
+      await waitFor(() =>
+        expect(screen.getByTestId('isFetching').textContent).toBe('false'),
+      )
+      fireEvent.click(screen.getByTestId('nextPage'))
+      checkNumQueries(2)
+    })
+
     // See https://github.com/reduxjs/redux-toolkit/issues/4267 - Memory leak in useQuery rapid query arg changes
     test('Hook subscriptions are properly cleaned up when query is fulfilled/rejected', async () => {
       // This is imported already, but it seems to be causing issues with the test on certain matrixes