useCachedPromise: Fix optimisticUpdate not working when paginating beyond the first page.

docs/utils-reference/getting-started.md

@@ -16,10 +16,19 @@ npm install --save @raycast/utils
 
 ## Changelog
 
-### v1.13.1
+### v1.13.3
+
+- Fixed `optimisticUpdate` not working when paginating beyond the first page when using `useCachedPromise` or other hooks that build on top of it..
+- Fixed `useFetch` type requiring `mapResult` for non-paginated overload.
+
+### v1.13.2
 
 - Added default OAuth URLs for Google, Jira, and Zoom
 
+### v1.13.1
+
+- Fixed `useFetch` type for non-paginated overload.
+
 ### v1.13.0
 
 - Added pagination support to `usePromise`, `useCachedPromise` and `useFetch`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raycast/utils",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "Set of utilities to streamline building Raycast extensions",
   "author": "Raycast Technologies Ltd.",
   "homepage": "https://developers.raycast.com/utils-reference",

src/useCachedPromise.ts

@@ -263,7 +263,7 @@ export function useCachedPromise<
     data: returnedData,
     isLoading: state.isLoading,
     error: state.error,
-    mutate,
+    mutate: paginationArgsRef.current && paginationArgsRef.current.page > 0 ? _mutate : mutate,
     pagination,
     revalidate,
   };

src/useFetch.ts

@@ -131,7 +131,7 @@ export function useFetch<V = unknown, U = undefined, T extends unknown[] = unkno
 export function useFetch<V = unknown, U = undefined, T = V>(
   url: RequestInfo,
   options?: RequestInit & {
-    mapResult: (result: V) => { data: T; hasMore?: boolean };
+    mapResult?: (result: V) => { data: T; hasMore?: boolean };
     parseResponse?: (response: Response) => Promise<V>;
   } & Omit<CachedPromiseOptions<(url: RequestInfo, options?: RequestInit) => Promise<T>, U>, "abortable">,
 ): UseCachedPromiseReturnType<T, U> & { pagination: undefined };

tests/src/cached-promise-paginated.tsx

@@ -6,7 +6,7 @@ import { setTimeout } from "timers/promises";
 export default function Command() {
   const [searchText, setSearchText] = useState<string>("");
 
-  const { isLoading, data, pagination, revalidate } = useCachedPromise(
+  const { isLoading, data, mutate, pagination, revalidate } = useCachedPromise(
     (text: string) => async (options) => {
       await setTimeout(500);
       const data = items(text, options.page);
@@ -20,18 +20,27 @@ export default function Command() {
   );
 
   return (
-    <List
-      isLoading={isLoading}
-      onSearchTextChange={setSearchText}
-      pagination={pagination}
-      actions={
-        <ActionPanel>
-          <Action title="Reload" onAction={() => revalidate()} />
-        </ActionPanel>
-      }
-    >
+    <List isLoading={isLoading} onSearchTextChange={setSearchText} pagination={pagination}>
       {data.map((item) => (
-        <List.Item key={item} title={item} />
+        <List.Item
+          key={item}
+          title={item}
+          actions={
+            <ActionPanel>
+              <Action title="Reload" onAction={() => revalidate()} />
+              <Action
+                title="Delete All Items But This One"
+                onAction={async () => {
+                  mutate(setTimeout(1000), {
+                    optimisticUpdate: () => {
+                      return [item];
+                    },
+                  });
+                }}
+              />
+            </ActionPanel>
+          }
+        />
       ))}
     </List>
   );

tests/src/fetch-paginated.tsx

@@ -1,6 +1,7 @@
 import { ActionPanel, Action, Icon, Image, List, Grid } from "@raycast/api";
 import { useFetch } from "@raycast/utils";
 import { useState } from "react";
+import { setTimeout } from "timers/promises";
 
 type SearchResult = {
   companies: Company[];
@@ -39,7 +40,7 @@ function getSearchParams(searchText: string, page: number) {
 export default function Command() {
   const [searchText, setSearchText] = useState("");
 
-  const { isLoading, pagination, data, revalidate } = useFetch(
+  const { isLoading, pagination, data, mutate, revalidate } = useFetch(
     (pagination) =>
       "https://api.ycombinator.com/v0.1/companies?" + getSearchParams(searchText, pagination.page + 1).toString(),
     {
@@ -64,6 +65,16 @@ export default function Command() {
           actions={
             <ActionPanel title={company.name}>
               <Action title="Reload" onAction={() => revalidate()} />
+              <Action
+                title="Delete All Items But This One"
+                onAction={async () => {
+                  mutate(setTimeout(1000), {
+                    optimisticUpdate: () => {
+                      return [company];
+                    },
+                  });
+                }}
+              />
             </ActionPanel>
           }
         />

tests/src/promise-paginated.tsx

@@ -1,11 +1,12 @@
 import { List, ActionPanel, Action } from "@raycast/api";
 import { usePromise } from "@raycast/utils";
 import { useState } from "react";
+import { setTimeout as setTimeoutAsync } from "timers/promises";
 
 export default function Command() {
   const [searchText, setSearchText] = useState<string>("");
 
-  const { isLoading, data, revalidate, pagination } = usePromise(
+  const { isLoading, data, revalidate, mutate, pagination } = usePromise(
     (text: string) => async (options) => {
       await sleep(500);
       const data = items(text, options.page);
@@ -15,17 +16,28 @@ export default function Command() {
   );
 
   return (
-    <List
-      isLoading={isLoading}
-      onSearchTextChange={setSearchText}
-      pagination={pagination}
-      actions={
-        <ActionPanel>
-          <Action title="Reload" onAction={() => revalidate()} />
-        </ActionPanel>
-      }
-    >
-      {data?.map((item) => <List.Item key={item} title={item} />)}
+    <List isLoading={isLoading} onSearchTextChange={setSearchText} pagination={pagination}>
+      {data?.map((item) => (
+        <List.Item
+          key={item}
+          title={item}
+          actions={
+            <ActionPanel>
+              <Action title="Reload" onAction={() => revalidate()} />
+              <Action
+                title="Delete All Items But This One"
+                onAction={async () => {
+                  mutate(setTimeoutAsync(1000), {
+                    optimisticUpdate: () => {
+                      return [item];
+                    },
+                  });
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
     </List>
   );
 }