diff --git a/docs/utils-reference/getting-started.md b/docs/utils-reference/getting-started.md index 3b66b8d..1a9ab66 100644 --- a/docs/utils-reference/getting-started.md +++ b/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`. diff --git a/package.json b/package.json index aafc076..c85b28f 100644 --- a/package.json +++ b/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", diff --git a/src/useCachedPromise.ts b/src/useCachedPromise.ts index 24a3ed7..6ea37ac 100644 --- a/src/useCachedPromise.ts +++ b/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, }; diff --git a/src/useFetch.ts b/src/useFetch.ts index cab29d0..fe26fcb 100644 --- a/src/useFetch.ts +++ b/src/useFetch.ts @@ -131,7 +131,7 @@ export function useFetch( url: RequestInfo, options?: RequestInit & { - mapResult: (result: V) => { data: T; hasMore?: boolean }; + mapResult?: (result: V) => { data: T; hasMore?: boolean }; parseResponse?: (response: Response) => Promise; } & Omit Promise, U>, "abortable">, ): UseCachedPromiseReturnType & { pagination: undefined }; diff --git a/tests/src/cached-promise-paginated.tsx b/tests/src/cached-promise-paginated.tsx index b94f3e8..4760851 100644 --- a/tests/src/cached-promise-paginated.tsx +++ b/tests/src/cached-promise-paginated.tsx @@ -6,7 +6,7 @@ import { setTimeout } from "timers/promises"; export default function Command() { const [searchText, setSearchText] = useState(""); - 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 ( - - revalidate()} /> - - } - > + {data.map((item) => ( - + + revalidate()} /> + { + mutate(setTimeout(1000), { + optimisticUpdate: () => { + return [item]; + }, + }); + }} + /> + + } + /> ))} ); diff --git a/tests/src/fetch-paginated.tsx b/tests/src/fetch-paginated.tsx index 7f1d8d2..dcad2cf 100644 --- a/tests/src/fetch-paginated.tsx +++ b/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={ revalidate()} /> + { + mutate(setTimeout(1000), { + optimisticUpdate: () => { + return [company]; + }, + }); + }} + /> } /> diff --git a/tests/src/promise-paginated.tsx b/tests/src/promise-paginated.tsx index acf38d3..797fd87 100644 --- a/tests/src/promise-paginated.tsx +++ b/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(""); - 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 ( - - revalidate()} /> - - } - > - {data?.map((item) => )} + + {data?.map((item) => ( + + revalidate()} /> + { + mutate(setTimeoutAsync(1000), { + optimisticUpdate: () => { + return [item]; + }, + }); + }} + /> + + } + /> + ))} ); }