-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add bidirectional cursor infinite scroll example * Add example using limit and offset - Add example using page and size - add an intersection observer callback ref hook * Bump infinite query RTK version --------- Co-authored-by: Mark Erikson <[email protected]>
- Loading branch information
1 parent
c9cc8ca
commit 78ff764
Showing
11 changed files
with
847 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
examples/query/react/infinite-queries/src/app/useIntersectionCallback.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useCallback, useRef } from "react" | ||
|
|
||
| export function useIntersectionCallback(onIntersectCallback: () => void) { | ||
| const intersectionObserverRef = useRef<IntersectionObserver | null>(null) | ||
|
|
||
| return useCallback( | ||
| (node: HTMLDivElement | null) => { | ||
| if (intersectionObserverRef.current) { | ||
| intersectionObserverRef.current.disconnect() | ||
| } | ||
|
|
||
| intersectionObserverRef.current = new IntersectionObserver(entries => { | ||
| if (entries[0].isIntersecting) { | ||
| onIntersectCallback() | ||
| } | ||
| }) | ||
|
|
||
| if (node) intersectionObserverRef.current.observe(node) | ||
| }, | ||
| [onIntersectCallback], | ||
| ) | ||
| } |
136 changes: 136 additions & 0 deletions
136
...ueries/src/features/bidirectional-cursor-infinite-scroll/BidirectionalCursorInfScroll.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import React, { useCallback, useEffect, useRef, useState } from "react" | ||
| import { Link, useLocation } from "react-router" | ||
| import { useIntersectionCallback } from "../../app/useIntersectionCallback" | ||
| import { apiWithInfiniteScroll } from "./infiniteScrollApi" | ||
|
|
||
| const limit = 10 | ||
|
|
||
| function BidirectionalCursorInfScroll({ startingProject = { id: 25 } }) { | ||
| const { | ||
| hasPreviousPage, | ||
| hasNextPage, | ||
| data, | ||
| error, | ||
| isFetching, | ||
| isLoading, | ||
| isError, | ||
| fetchNextPage, | ||
| fetchPreviousPage, | ||
| isFetchingNextPage, | ||
| isFetchingPreviousPage, | ||
| } = | ||
| apiWithInfiniteScroll.endpoints.getProjectsBidirectionalCursor.useInfiniteQuery( | ||
| limit, | ||
| { | ||
| initialPageParam: { | ||
| around: startingProject.id, | ||
| limit, | ||
| }, | ||
| }, | ||
| ) | ||
|
|
||
| const beforeRef = useIntersectionCallback(fetchPreviousPage) | ||
| const afterRef = useIntersectionCallback(fetchNextPage) | ||
|
|
||
| const location = useLocation() | ||
|
|
||
| const startingProjectRef = useRef<HTMLDivElement>(null) | ||
| const [hasCentered, setHasCentered] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| if (hasCentered) return | ||
| const startingElement = startingProjectRef.current | ||
| if (startingElement) { | ||
| startingElement.scrollIntoView({ | ||
| behavior: "auto", | ||
| block: "center", | ||
| }) | ||
| setHasCentered(true) | ||
| } | ||
| }, [data?.pages, hasCentered]) | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>Bidirectional Cursor-Based Infinite Scroll</h2> | ||
| {isLoading ? ( | ||
| <p>Loading...</p> | ||
| ) : isError ? ( | ||
| <span>Error: {error.message}</span> | ||
| ) : null} | ||
| <> | ||
| <div> | ||
| <button | ||
| onClick={() => fetchPreviousPage()} | ||
| disabled={!hasPreviousPage || isFetchingPreviousPage} | ||
| > | ||
| {isFetchingPreviousPage | ||
| ? "Loading more..." | ||
| : hasPreviousPage | ||
| ? "Load Older" | ||
| : "Nothing more to load"} | ||
| </button> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| overflow: "auto", | ||
| margin: "1rem 0px", | ||
| height: "400px", | ||
| }} | ||
| > | ||
| <div ref={beforeRef} /> | ||
| {data?.pages.map(page => ( | ||
| <React.Fragment key={page.pageInfo?.endCursor}> | ||
| {page.projects.map((project, index, arr) => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| margin: "1em 0px", | ||
| border: "1px solid gray", | ||
| borderRadius: "5px", | ||
| padding: "2rem 1rem", | ||
| background: `hsla(${project.id * 30}, 60%, 80%, 1)`, | ||
| }} | ||
| key={project.id} | ||
| ref={ | ||
| project.id === startingProject.id | ||
| ? startingProjectRef | ||
| : null | ||
| } | ||
| > | ||
| <div>{`Project ${project.id} (created at: ${project.createdAt})`}</div> | ||
| <div>{`Server Time: ${page.serverTime}`}</div> | ||
| </div> | ||
| ) | ||
| })} | ||
| </React.Fragment> | ||
| ))} | ||
| <div ref={afterRef} /> | ||
| </div> | ||
| <div> | ||
| <button | ||
| onClick={() => fetchNextPage()} | ||
| disabled={!hasNextPage || isFetchingNextPage} | ||
| > | ||
| {isFetchingNextPage | ||
| ? "Loading more..." | ||
| : hasNextPage | ||
| ? "Load Newer" | ||
| : "Nothing more to load"} | ||
| </button> | ||
| </div> | ||
| <div> | ||
| {isFetching && !isFetchingPreviousPage && !isFetchingNextPage | ||
| ? "Background Updating..." | ||
| : null} | ||
| </div> | ||
| </> | ||
|
|
||
| <hr /> | ||
| <Link to="/infinite-scroll/about" state={{ from: location.pathname }}> | ||
| Go to another page | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default BidirectionalCursorInfScroll |
82 changes: 82 additions & 0 deletions
82
...t/infinite-queries/src/features/bidirectional-cursor-infinite-scroll/infiniteScrollApi.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { baseApi } from "../baseApi" | ||
|
|
||
| type Project = { | ||
| id: number | ||
| createdAt: string | ||
| } | ||
|
|
||
| type ProjectsCursorPaginated = { | ||
| projects: Project[] | ||
| serverTime: string | ||
| pageInfo: { | ||
| startCursor: number | ||
| endCursor: number | ||
| hasNextPage: boolean | ||
| hasPreviousPage: boolean | ||
| } | ||
| } | ||
|
|
||
| interface ProjectsInitialPageParam { | ||
| before?: number | ||
| around?: number | ||
| after?: number | ||
| limit: number | ||
| } | ||
| type QueryParamLimit = number | ||
|
|
||
| export const apiWithInfiniteScroll = baseApi.injectEndpoints({ | ||
| endpoints: builder => ({ | ||
| getProjectsBidirectionalCursor: builder.infiniteQuery< | ||
| ProjectsCursorPaginated, | ||
| QueryParamLimit, | ||
| ProjectsInitialPageParam | ||
| >({ | ||
| query: ({ before, after, around, limit }) => { | ||
| const params = new URLSearchParams() | ||
| params.append("limit", String(limit)) | ||
| if (after != null) { | ||
| params.append("after", String(after)) | ||
| } else if (before != null) { | ||
| params.append("before", String(before)) | ||
| } else if (around != null) { | ||
| params.append("around", String(around)) | ||
| } | ||
|
|
||
| return { | ||
| url: `https://example.com/api/projectsBidirectionalCursor?${params.toString()}`, | ||
| } | ||
| }, | ||
| infiniteQueryOptions: { | ||
| initialPageParam: { limit: 10 }, | ||
| getPreviousPageParam: ( | ||
| firstPage, | ||
| allPages, | ||
| firstPageParam, | ||
| allPageParams, | ||
| ) => { | ||
| if (!firstPage.pageInfo.hasPreviousPage) { | ||
| return undefined | ||
| } | ||
| return { | ||
| before: firstPage.pageInfo.startCursor, | ||
| limit: firstPageParam.limit, | ||
| } | ||
| }, | ||
| getNextPageParam: ( | ||
| lastPage, | ||
| allPages, | ||
| lastPageParam, | ||
| allPageParams, | ||
| ) => { | ||
| if (!lastPage.pageInfo.hasNextPage) { | ||
| return undefined | ||
| } | ||
| return { | ||
| after: lastPage.pageInfo.endCursor, | ||
| limit: lastPageParam.limit, | ||
| } | ||
| }, | ||
| }, | ||
| }), | ||
| }), | ||
| }) |
Oops, something went wrong.