Expose refresh from infinite query hooks, and add RN FlatList example

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

@@ -15,10 +15,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/c9cc8ca0/@reduxjs/toolkit/_pkg.tgz",
+    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/26bae549/@reduxjs/toolkit/_pkg.tgz",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.13.1",
+    "react-native-web": "^0.19.13",
     "react-redux": "^9.1.0",
     "react-router": "^7.0.1"
   },
@@ -27,8 +28,9 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/react-native-web": "^0.19",
     "@vitejs/plugin-react": "^4.2.1",
     "jsdom": "^23.2.0",
     "msw": "^2.6.6",
@@ -37,6 +39,10 @@
     "vite": "^5.0.0",
     "vitest": "^1.2.0"
   },
+  "resolutions": {
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1"
+  },
   "msw": {
     "workerDirectory": [
       "public"

examples/query/react/infinite-queries/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.6'
-const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const PACKAGE_VERSION = '2.7.0'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -199,7 +199,19 @@ async function getResponse(event, client, requestId) {
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
     // user-defined CORS policies.
-    headers.delete('accept', 'msw/passthrough')
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

examples/query/react/infinite-queries/src/App.tsx

@@ -11,6 +11,7 @@ import LimitOffsetExample from "./features/limit-offset/LimitOffsetExample"
 import { InfiniteScrollMaxPagesExample } from "./features/max-pages/InfiniteScrollMaxExample"
 import PaginationInfScrollExample from "./features/pagination-infinite-scroll/PaginationInfScrollExample"
 import { PaginationExample } from "./features/pagination/PaginationExample"
+import { FlatlistExample } from "./features/rn-flatlist/FlatlistExample"
 
 const Menu = () => {
   return (
@@ -43,6 +44,9 @@ const Menu = () => {
             Pagination Infinite Scroll
           </Link>
         </li>
+        <li>
+          <Link to="/examples/rn-flatlist">RN FlatList</Link>
+        </li>
       </ul>
     </div>
   )
@@ -84,6 +88,7 @@ const App = () => {
               path="pagination-infinite-scroll"
               element={<PaginationInfScrollExample />}
             />
+            <Route path="rn-flatlist" element={<FlatlistExample />} />
           </Route>
         </Routes>
       </div>

examples/query/react/infinite-queries/src/features/infinite-scroll/InfiniteScrollExample.tsx

@@ -3,6 +3,7 @@ import { useInView } from "react-intersection-observer"
 import { Link } from "react-router"
 
 import { apiWithInfiniteScroll } from "./infiniteScrollApi"
+import type { Project } from "./infiniteScrollApi"
 
 export const InfiniteScrollAbout = () => {
   return (
@@ -18,6 +19,22 @@ export const InfiniteScrollAbout = () => {
   )
 }
 
+export const ProjectRow = ({ project }: { project: Project }) => {
+  return (
+    <p
+      style={{
+        border: "1px solid gray",
+        borderRadius: "5px",
+        padding: "5rem 1rem",
+        background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
+      }}
+      key={project.id}
+    >
+      {project.name}
+    </p>
+  )
+}
+
 export const InfiniteScrollExample = () => {
   const {
     data,
@@ -67,17 +84,7 @@ export const InfiniteScrollExample = () => {
           {data?.pages.map(page => (
             <React.Fragment key={page.nextId}>
               {page.projects.map(project => (
-                <p
-                  style={{
-                    border: "1px solid gray",
-                    borderRadius: "5px",
-                    padding: "5rem 1rem",
-                    background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
-                  }}
-                  key={project.id}
-                >
-                  {project.name}
-                </p>
+                <ProjectRow key={project.id} project={project} />
               ))}
             </React.Fragment>
           ))}

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

@@ -1,6 +1,6 @@
 import { baseApi } from "../baseApi"
 
-type Project = {
+export type Project = {
   id: number
   name: string
 }

examples/query/react/infinite-queries/src/features/rn-flatlist/FlatlistExample.tsx

@@ -0,0 +1,50 @@
+import { ActivityIndicator, FlatList, View, Text } from "react-native-web"
+import { useMemo } from "react"
+
+import { apiWithInfiniteScroll } from "../infinite-scroll/infiniteScrollApi"
+import { ProjectRow } from "../infinite-scroll/InfiniteScrollExample"
+
+export const FlatlistExample = () => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isFetching,
+    isError,
+    // refetch,
+  } =
+    apiWithInfiniteScroll.endpoints.getProjectsCursor.useInfiniteQuery(
+      "projects",
+    )
+
+  const allProjects = useMemo(() => {
+    return data?.pages.flatMap(page => page.projects) ?? []
+  }, [data])
+
+  return (
+    <>
+      <h2>React Native FlatList Example</h2>
+      <View style={{ width: "100%", maxHeight: "600px" }}>
+        {isLoading ? (
+          <ActivityIndicator />
+        ) : isError ? (
+          <Text>{error?.message}</Text>
+        ) : (
+          <FlatList
+            data={allProjects}
+            keyExtractor={item => item.id.toString()}
+            renderItem={({ item }) => <ProjectRow project={item} />}
+            // onRefresh={refetch}
+            refreshing={isLoading}
+            progressViewOffset={100}
+            onEndReached={() => fetchNextPage()}
+          />
+        )}
+      </View>
+    </>
+  )
+}

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

@@ -14,7 +14,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals", "react-native-web"]
   },
   "references": [{ "path": "./tsconfig.node.json" }]
 }