Update infinite query example with page param changes (#4827)

Author: markerikson

docs/rtk-query/comparison.md

@@ -82,7 +82,7 @@ This comparison table strives to be as accurate and as unbiased as possible. If
 | **Lagged queries**                     | yes                                     | yes                      | no                                                                                  | ?                                                                                                           |
 | **Auto garbage collection**            | yes                                     | yes                      | no                                                                                  | ?                                                                                                           |
 | **Normalized caching**                 | no                                      | no                       | yes                                                                                 | yes                                                                                                         |
-| **Infinite scrolling**                 | TODO                                    | yes                      | requires manual code                                                                | ?                                                                                                           |
+| **Infinite scrolling**                 | yes                                     | yes                      | requires manual code                                                                | ?                                                                                                           |
 | **Prefetching**                        | yes                                     | yes                      | yes                                                                                 | yes?                                                                                                        |
 | **Retrying**                           | yes                                     | yes                      | requires manual code                                                                | ?                                                                                                           |
 | **Optimistic updates**                 | can update cache by hand                | can update cache by hand | `optimisticResponse`                                                                | ?                                                                                                           |

docs/rtk-query/usage/infinite-queries.mdx

@@ -198,7 +198,7 @@ const pokemonApi = createApi({
   endpoints: (build) => ({
     getPokemon: build.infiniteQuery<Pokemon[], string, number>({
       infiniteQueryOptions: {
-        initialPageParam: 0,
+        initialPageParam: 1,
         getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
           lastPageParam + 1,
       },

examples/query/react/infinite-queries/package.json

@@ -15,7 +15,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/26bae549/@reduxjs/toolkit/_pkg.tgz",
+    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e18b966e/@reduxjs/toolkit/_pkg.tgz",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.13.1",

examples/query/react/infinite-queries/src/features/bidirectional-cursor-infinite-scroll/infiniteScrollApi.ts

@@ -31,7 +31,7 @@ export const apiWithInfiniteScroll = baseApi.injectEndpoints({
       QueryParamLimit,
       ProjectsInitialPageParam
     >({
-      query: ({ before, after, around, limit }) => {
+      query: ({ pageParam: { before, after, around, limit } }) => {
         const params = new URLSearchParams()
         params.append("limit", String(limit))
         if (after != null) {

examples/query/react/infinite-queries/src/features/infinite-scroll/infiniteScrollApi.ts

@@ -14,7 +14,8 @@ type ProjectsPageCursor = {
 export const apiWithInfiniteScroll = baseApi.injectEndpoints({
   endpoints: build => ({
     getProjectsCursor: build.infiniteQuery<ProjectsPageCursor, string, number>({
-      query: page => `https://example.com/api/projectsCursor?cursor=${page}`,
+      query: ({ pageParam }) =>
+        `https://example.com/api/projectsCursor?cursor=${pageParam}`,
       infiniteQueryOptions: {
         initialPageParam: 0,
         getPreviousPageParam: firstPage => firstPage.previousId,

examples/query/react/infinite-queries/src/features/limit-offset/infiniteScrollApi.ts

@@ -61,7 +61,7 @@ export const apiWithInfiniteScroll = baseApi.injectEndpoints({
           }
         },
       },
-      query: ({ offset, limit }) => {
+      query: ({ pageParam: { offset, limit } }) => {
         return {
           url: `https://example.com/api/projectsLimitOffset?offset=${offset}&limit=${limit}`,
           method: "GET",

examples/query/react/infinite-queries/src/features/max-pages/infiniteScrollApi.ts

@@ -18,7 +18,8 @@ export const apiWithInfiniteScrollMax = baseApi.injectEndpoints({
       string,
       number
     >({
-      query: page => `https://example.com/api/projectsCursor?cursor=${page}`,
+      query: ({ pageParam }) =>
+        `https://example.com/api/projectsCursor?cursor=${pageParam}`,
       infiniteQueryOptions: {
         initialPageParam: 0,
         maxPages: 3,

examples/query/react/infinite-queries/src/features/pagination-infinite-scroll/infiniteScrollApi.ts

@@ -61,7 +61,7 @@ export const apiWithInfiniteScroll = baseApi.injectEndpoints({
           }
         },
       },
-      query: ({ page, size }) => {
+      query: ({ pageParam: { page, size } }) => {
         return {
           url: `https://example.com/api/projectsPaginated?page=${page}&size=${size}`,
           method: "GET",

examples/query/react/infinite-queries/src/features/pagination/paginationApi.ts

@@ -13,7 +13,8 @@ type ProjectsPage = {
 export const apiWithPagination = baseApi.injectEndpoints({
   endpoints: build => ({
     getProjects: build.infiniteQuery<ProjectsPage, string, number>({
-      query: page => `https://example.com/api/projects?page=${page}`,
+      query: ({ pageParam }) =>
+        `https://example.com/api/projects?page=${pageParam}`,
       infiniteQueryOptions: {
         initialPageParam: 0,
         getNextPageParam: (lastPage, pages, lastPageParam, allPageParams) => {

examples/query/react/infinite-queries/yarn.lock

@@ -1743,9 +1743,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/26bae549/@reduxjs/toolkit/_pkg.tgz":
+"@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e18b966e/@reduxjs/toolkit/_pkg.tgz":
   version: 2.5.0
-  resolution: "@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/26bae549/@reduxjs/toolkit/_pkg.tgz"
+  resolution: "@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e18b966e/@reduxjs/toolkit/_pkg.tgz"
   dependencies:
     immer: "npm:^10.0.3"
     redux: "npm:^5.0.1"
@@ -1759,7 +1759,7 @@ __metadata:
       optional: true
     react-redux:
       optional: true
-  checksum: 10/c71e738c892ec549c0d242524b3789d306d7b6e320fa6219a2dd4a71adca68fbfccf3ce46a43631fe5076245c465259771e348f23b5ed3fb2e04e2d4e0aabb6b
+  checksum: 10/9bf78a12a14a745cfb2eef7e8509149652dba734b66012ac42449722c72bf3709b37e8dba1814635ab7baef04c286be003b4df7f7098f17e059ad3e449576f2f
   languageName: node
   linkType: hard
 
@@ -7433,7 +7433,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "vite-template-redux@workspace:."
   dependencies:
-    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/26bae549/@reduxjs/toolkit/_pkg.tgz"
+    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e18b966e/@reduxjs/toolkit/_pkg.tgz"
     "@testing-library/dom": "npm:^9.3.4"
     "@testing-library/jest-dom": "npm:^6.2.0"
     "@testing-library/react": "npm:^14.1.2"