Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update infinite query example with page param changes #4827

Merged
merged 3 commits into from
Jan 23, 2025
+20 −17
Merged

Update infinite query example with page param changes #4827

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcbcf2d
Bump infinite query example RTK build
markerikson Jan 23, 2025
76cdfad
Fix example page params
markerikson Jan 23, 2025
ae668a3
Tweak RTKQ comparison
markerikson Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/rtk-query/comparison.md
View file
Original file line number Diff line number Diff line change
@@ -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` | ? |
2 changes: 1 addition & 1 deletion docs/rtk-query/usage/infinite-queries.mdx
View file
Original file line number Diff line number Diff line change
@@ -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,
},
2 changes: 1 addition & 1 deletion examples/query/react/infinite-queries/package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
2 changes: 1 addition & 1 deletion ...t/infinite-queries/src/features/bidirectional-cursor-infinite-scroll/infiniteScrollApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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) {
3 changes: 2 additions & 1 deletion examples/query/react/infinite-queries/src/features/infinite-scroll/infiniteScrollApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 1 addition & 1 deletion examples/query/react/infinite-queries/src/features/limit-offset/infiniteScrollApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion examples/query/react/infinite-queries/src/features/max-pages/infiniteScrollApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 1 addition & 1 deletion ...query/react/infinite-queries/src/features/pagination-infinite-scroll/infiniteScrollApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion examples/query/react/infinite-queries/src/features/pagination/paginationApi.ts
View file
Original file line number Diff line number Diff line change
@@ -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) => {
8 changes: 4 additions & 4 deletions examples/query/react/infinite-queries/yarn.lock
View file
Original file line number Diff line number Diff line change
@@ -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"
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
@@ -8042,9 +8042,9 @@ __metadata:
languageName: unknown
linkType: soft

"@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"
@@ -8058,7 +8058,7 @@ __metadata:
optional: true
react-redux:
optional: true
checksum: 10/c71e738c892ec549c0d242524b3789d306d7b6e320fa6219a2dd4a71adca68fbfccf3ce46a43631fe5076245c465259771e348f23b5ed3fb2e04e2d4e0aabb6b
checksum: 10/9bf78a12a14a745cfb2eef7e8509149652dba734b66012ac42449722c72bf3709b37e8dba1814635ab7baef04c286be003b4df7f7098f17e059ad3e449576f2f
languageName: node
linkType: hard

@@ -34081,7 +34081,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "vite-template-redux@workspace:examples/query/react/infinite-queries"
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"