feat: tree shake infinite query and support manual updates

Author: boschni

docs/src/pages/guides/infinite-queries.md

@@ -7,7 +7,9 @@ Rendering lists that can additively "load more" data onto an existing set of dat
 
 When using `useInfiniteQuery`, you'll notice a few things are different:
 
-- `data` is now an array of arrays that contain query group results, instead of the query results themselves
+- `data` is now an object containing infinite query data:
+- `data.pages` array containing the fetched pages
+- `data.pageParams` array containing the page params used to fetch the pages
 - The `fetchNextPage` and `fetchPreviousPage` functions are now available
 - The `getNextPageParam` and `getPreviousPageParam` options are available for both determining if there is more data to load and the information to fetch it. This information is supplied as an additional parameter in the query function (which can optionally be overridden when calling the `fetchNextPage` or `fetchPreviousPage` functions)
 - A `hasNextPage` boolean is now available and is `true` if `getNextPageParam` returns a value other than `undefined`.
@@ -61,7 +63,7 @@ function Projects() {
     <p>Error: {error.message}</p>
   ) : (
     <>
-      {data.map((group, i) => (
+      {data.pages.map((group, i) => (
         <React.Fragment key={i}>
           {group.projects.map(project => (
             <p key={project.id}>{project.name}</p>
@@ -132,6 +134,20 @@ Sometimes you may want to show the pages in reversed order. If this is case, you
 
 ```js
 useInfiniteQuery('projects', fetchProjects, {
-  select: pages => [...pages].reverse(),
+  select: data => ({
+    pages: [...data.pages].reverse(),
+    pageParams: [...data.pageParams].reverse(),
+  }),
 })
 ```
+
+## What if I want to manually update the infinite query?
+
+Manually removing first page:
+
+```js
+queryClient.setQueryData('projects', data => ({
+  pages: data.pages.slice(1),
+  pageParams: data.pageParams.slice(1),
+}))
+```

docs/src/pages/guides/migrating-to-react-query-3.md

@@ -89,7 +89,9 @@ function Page({ page }) {
 
 ### useInfiniteQuery()
 
-The `useInfiniteQuery()` interface has changed to fully support bi-directional infinite lists.
+The `useInfiniteQuery()` interface has changed to fully support bi-directional infinite lists and manual updates.
+
+The `data` of an infinite query is now an object containing the `pages` and the `pageParams` used to fetch the pages.
 
 One direction:
 
@@ -130,11 +132,23 @@ const {
   hasNextPage,
   isFetchingNextPage,
 } = useInfiniteQuery('projects', fetchProjects, {
-  select: pages => [...pages].reverse(),
+  select: data => ({
+    pages: [...data.pages].reverse(),
+    pageParams: [...data.pageParams].reverse(),
+  }),
   getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
 })
 ```
 
+Manually removing the first page:
+
+```js
+queryClient.setQueryData('projects', data => ({
+  pages: data.pages.slice(1),
+  pageParams: data.pageParams.slice(1),
+}))
+```
+
 ### useMutation()
 
 The `useMutation()` hook now returns an object instead of an array:

docs/src/pages/reference/useInfiniteQuery.md

@@ -39,6 +39,10 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](#usequ
 
 The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](#usequery), with the addition of the following:
 
+- `data.pages: TData[]`
+  - Array containing all pages.
+- `data.pageParams: unknown[]`
+  - Array containing all page params.
 - `isFetchingNextPage: boolean`
   - Will be `true` while fetching the next page with `fetchNextPage`.
 - `isFetchingPreviousPage: boolean`

examples/load-more-infinite-scroll/pages/index.js

@@ -62,7 +62,7 @@ function Example() {
         <span>Error: {error.message}</span>
       ) : (
         <>
-          {data.map((page, i) => (
+          {data.pages.map((page, i) => (
             <React.Fragment key={i}>
               {page.data.map(project => (
                 <p

src/core/index.ts

@@ -2,6 +2,7 @@ export { QueryCache } from './queryCache'
 export { QueryClient } from './queryClient'
 export { QueryObserver } from './queryObserver'
 export { QueriesObserver } from './queriesObserver'
+export { InfiniteQueryObserver } from './infiniteQueryObserver'
 export { MutationCache } from './mutationCache'
 export { MutationObserver } from './mutationObserver'
 export { setLogger } from './logger'

src/core/infiniteQueryBehavior.ts

@@ -0,0 +1,134 @@
+import type { QueryBehavior } from './query'
+import type { InfiniteData, QueryOptions } from './types'
+
+export function infiniteQueryBehavior<
+  TData,
+  TError,
+  TQueryFnData
+>(): QueryBehavior<InfiniteData<TData>, TError, TQueryFnData> {
+  return {
+    onFetch: context => {
+      context.queryFn = () => {
+        const fetchMore = context.fetchOptions?.meta.fetchMore
+        const pageParam = fetchMore?.pageParam
+        const isFetchingNextPage = fetchMore?.direction === 'forward'
+        const isFetchingPreviousPage = fetchMore?.direction === 'backward'
+        const oldPages = context.state.data?.pages || []
+        const oldPageParams = context.state.data?.pageParams || []
+        let newPageParams = oldPageParams
+
+        // Get query function
+        const queryFn =
+          context.options.queryFn || (() => Promise.reject('Missing queryFn'))
+
+        // Create function to fetch a page
+        const fetchPage = (
+          pages: unknown[],
+          manual?: boolean,
+          param?: unknown,
+          previous?: boolean
+        ): Promise<unknown[]> => {
+          if (typeof param === 'undefined' && !manual && pages.length) {
+            return Promise.resolve(pages)
+          }
+
+          return Promise.resolve()
+            .then(() => queryFn(...context.params, param))
+            .then(page => {
+              newPageParams = previous
+                ? [param, ...newPageParams]
+                : [...newPageParams, param]
+              return previous ? [page, ...pages] : [...pages, page]
+            })
+        }
+
+        let promise
+
+        // Fetch first page?
+        if (!oldPages.length) {
+          promise = fetchPage([])
+        }
+
+        // Fetch next page?
+        else if (isFetchingNextPage) {
+          const manual = typeof pageParam !== 'undefined'
+          const param = manual
+            ? pageParam
+            : getNextPageParam(context.options, oldPages)
+          promise = fetchPage(oldPages, manual, param)
+        }
+
+        // Fetch previous page?
+        else if (isFetchingPreviousPage) {
+          const manual = typeof pageParam !== 'undefined'
+          const param = manual
+            ? pageParam
+            : getPreviousPageParam(context.options, oldPages)
+          promise = fetchPage(oldPages, manual, param, true)
+        }
+
+        // Refetch pages
+        else {
+          newPageParams = []
+
+          const manual = typeof context.options.getNextPageParam === 'undefined'
+
+          // Fetch first page
+          promise = fetchPage([], manual, oldPageParams[0])
+
+          // Fetch remaining pages
+          for (let i = 1; i < oldPages.length; i++) {
+            promise = promise.then(pages => {
+              const param = manual
+                ? oldPageParams[i]
+                : getNextPageParam(context.options, pages)
+              return fetchPage(pages, manual, param)
+            })
+          }
+        }
+
+        return promise.then(pages => ({ pages, pageParams: newPageParams }))
+      }
+    },
+  }
+}
+
+export function getNextPageParam(
+  options: QueryOptions<any, any>,
+  pages: unknown[]
+): unknown | undefined {
+  return options.getNextPageParam?.(pages[pages.length - 1], pages)
+}
+
+export function getPreviousPageParam(
+  options: QueryOptions<any, any>,
+  pages: unknown[]
+): unknown | undefined {
+  return options.getPreviousPageParam?.(pages[0], pages)
+}
+
+/**
+ * Checks if there is a next page.
+ * Returns `undefined` if it cannot be determined.
+ */
+export function hasNextPage(
+  options: QueryOptions<any, any>,
+  pages?: unknown
+): boolean | undefined {
+  return options.getNextPageParam && Array.isArray(pages)
+    ? typeof getNextPageParam(options, pages) !== 'undefined'
+    : undefined
+}
+
+/**
+ * Checks if there is a previous page.
+ * Returns `undefined` if it cannot be determined.
+ */
+export function hasPreviousPage(
+  options: QueryOptions<any, any>,
+  pages?: unknown
+): boolean | undefined {
+  return options.getPreviousPageParam && Array.isArray(pages)
+    ? typeof getPreviousPageParam(options, pages) !== 'undefined'
+    : undefined
+}

src/core/infiniteQueryObserver.ts

@@ -0,0 +1,126 @@
+import type {
+  FetchNextPageOptions,
+  FetchPreviousPageOptions,
+  InfiniteData,
+  InfiniteQueryObserverOptions,
+  InfiniteQueryObserverResult,
+} from './types'
+import type { QueryClient } from './queryClient'
+import { ObserverFetchOptions, QueryObserver } from './queryObserver'
+import {
+  hasNextPage,
+  hasPreviousPage,
+  infiniteQueryBehavior,
+} from './infiniteQueryBehavior'
+
+type InfiniteQueryObserverListener<TData, TError> = (
+  result: InfiniteQueryObserverResult<TData, TError>
+) => void
+
+export class InfiniteQueryObserver<
+  TData = unknown,
+  TError = unknown,
+  TQueryFnData = TData,
+  TQueryData = TQueryFnData
+> extends QueryObserver<
+  InfiniteData<TData>,
+  TError,
+  TQueryFnData,
+  InfiniteData<TQueryData>
+> {
+  // Type override
+  subscribe!: (
+    listener?: InfiniteQueryObserverListener<TData, TError>
+  ) => () => void
+
+  // Type override
+  getCurrentResult!: () => InfiniteQueryObserverResult<TData, TError>
+
+  // Type override
+  protected fetch!: (
+    fetchOptions?: ObserverFetchOptions
+  ) => Promise<InfiniteQueryObserverResult<TData, TError>>
+
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor(
+    client: QueryClient,
+    options: InfiniteQueryObserverOptions<
+      TData,
+      TError,
+      TQueryFnData,
+      TQueryData
+    >
+  ) {
+    super(client, options)
+  }
+
+  protected init(
+    options: InfiniteQueryObserverOptions<
+      TData,
+      TError,
+      TQueryFnData,
+      TQueryData
+    >
+  ) {
+    this.fetchNextPage = this.fetchNextPage.bind(this)
+    this.fetchPreviousPage = this.fetchPreviousPage.bind(this)
+    super.init(options)
+  }
+
+  setOptions(
+    options?: InfiniteQueryObserverOptions<
+      TData,
+      TError,
+      TQueryFnData,
+      TQueryData
+    >
+  ): void {
+    super.setOptions({
+      ...options,
+      behavior: infiniteQueryBehavior<TData, TError, TQueryFnData>(),
+    })
+  }
+
+  fetchNextPage(
+    options?: FetchNextPageOptions
+  ): Promise<InfiniteQueryObserverResult<TData, TError>> {
+    return this.fetch({
+      cancelRefetch: true,
+      throwOnError: options?.throwOnError,
+      meta: {
+        fetchMore: { direction: 'forward', pageParam: options?.pageParam },
+      },
+    })
+  }
+
+  fetchPreviousPage(
+    options?: FetchPreviousPageOptions
+  ): Promise<InfiniteQueryObserverResult<TData, TError>> {
+    return this.fetch({
+      cancelRefetch: true,
+      throwOnError: options?.throwOnError,
+      meta: {
+        fetchMore: { direction: 'backward', pageParam: options?.pageParam },
+      },
+    })
+  }
+
+  protected getNewResult(
+    willFetch?: boolean
+  ): InfiniteQueryObserverResult<TData, TError> {
+    const { state } = this.getCurrentQuery()
+    const result = super.getNewResult(willFetch)
+    return {
+      ...result,
+      fetchNextPage: this.fetchNextPage,
+      fetchPreviousPage: this.fetchPreviousPage,
+      hasNextPage: hasNextPage(this.options, result.data?.pages),
+      hasPreviousPage: hasPreviousPage(this.options, result.data?.pages),
+      isFetchingNextPage:
+        state.isFetching && state.fetchMeta?.fetchMore?.direction === 'forward',
+      isFetchingPreviousPage:
+        state.isFetching &&
+        state.fetchMeta?.fetchMore?.direction === 'backward',
+    }
+  }
+}

src/core/mutationObserver.ts

@@ -80,6 +80,10 @@ export class MutationObserver<
     }
   }
 
+  hasListeners(): boolean {
+    return this.listeners.length > 0
+  }
+
   onMutationUpdate(): void {
     this.updateResult()
     this.notify()

src/core/onlineManager.ts

@@ -22,7 +22,7 @@ class OnlineManager {
     }
   }
 
-  setOnlineHandler(init: (onOnline: () => void) => () => void): void {
+  setHandler(init: (onOnline: () => void) => () => void): void {
     if (this.removeHandler) {
       this.removeHandler()
     }
@@ -43,7 +43,7 @@ class OnlineManager {
 
   private setDefaultHandler() {
     if (!isServer && window?.addEventListener) {
-      this.setOnlineHandler(onOnline => {
+      this.setHandler(onOnline => {
         // Listen to online
         window.addEventListener('online', onOnline, false)