useFetch, useCachedPromise: Fix crash when passing an argument of…

… type `URLSearchParams` as an option (#38)

docs/utils-reference/getting-started.md

@@ -16,6 +16,10 @@ npm install --save @raycast/utils
 
 ## Changelog
 
+### v1.16.3
+
+- Fix an issue where `URLSearchParams` couldn't be passed as an option to `useFetch` or `useCachedPromise`, causing extensions to crash.
+
 ### v1.16.2
 
 - Fixed the refresh token flow to log out the user instead of throwing an error.

package.json

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

src/helpers.ts

@@ -1,3 +1,5 @@
+import objectHash from "object-hash";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function replacer(this: any, key: string, _value: unknown) {
   const value = this[key];
@@ -19,3 +21,15 @@ export function reviver(_key: string, value: unknown) {
   }
   return value;
 }
+
+export function hash(object: objectHash.NotUndefined, options?: objectHash.NormalOption): string {
+  return objectHash(object, {
+    replacer: (value): string => {
+      if (value instanceof URLSearchParams) {
+        return value.toString();
+      }
+      return value;
+    },
+    ...options,
+  });
+}

src/useCachedPromise.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useCallback } from "react";
-import hash from "object-hash";
 import {
   FunctionReturningPromise,
   UseCachedPromiseReturnType,
@@ -10,8 +9,8 @@ import {
 } from "./types";
 import { useCachedState } from "./useCachedState";
 import { usePromise, PromiseOptions } from "./usePromise";
-
 import { useLatest } from "./useLatest";
+import { hash } from "./helpers";
 
 // Symbol to differentiate an empty cache from `undefined`
 const emptyCache = Symbol();

src/useFetch.ts

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useRef } from "react";
-import hash from "object-hash";
 import { useCachedPromise, CachedPromiseOptions } from "./useCachedPromise";
 import { useLatest } from "./useLatest";
 import { FunctionReturningPaginatedPromise, FunctionReturningPromise, UseCachedPromiseReturnType } from "./types";
 import { fetch } from "cross-fetch";
 import { isJSON } from "./fetch-utils";
+import { hash } from "./helpers";
 
 async function defaultParsing(response: Response) {
   if (!response.ok) {

src/useSQL.tsx

@@ -4,12 +4,12 @@ import { copyFile, mkdir, writeFile } from "node:fs/promises";
 import os from "node:os";
 import childProcess from "node:child_process";
 import path from "node:path";
-import hash from "object-hash";
 import { useRef, useState, useCallback, useMemo } from "react";
 import { usePromise, PromiseOptions } from "./usePromise";
 import { useLatest } from "./useLatest";
 import { getSpawnedPromise, getSpawnedResult } from "./exec-utils";
 import { showFailureToast } from "./showFailureToast";
+import { hash } from "./helpers";
 
 /**
  * Executes a query on a local SQL database and returns the {@link AsyncState} corresponding to the query of the command. The last value will be kept between command runs.

src/useStreamJSON.ts

@@ -12,7 +12,7 @@ import StreamArray from "stream-json/streamers/StreamArray";
 import { isJSON } from "./fetch-utils";
 import { Flatten, FunctionReturningPaginatedPromise, UseCachedPromiseReturnType } from "./types";
 import { CachedPromiseOptions, useCachedPromise } from "./useCachedPromise";
-import objectHash from "object-hash";
+import { hash } from "./helpers";
 
 async function cache(url: RequestInfo, destination: string, fetchOptions?: RequestInit) {
   if (typeof url === "object" || url.startsWith("http://") || url.startsWith("https://")) {
@@ -164,7 +164,7 @@ type Options<T> = {
   /**
    * The hook expects to iterate through an array of data, so by default, it assumes the JSON it receives itself represents an array. However, sometimes the array of data is wrapped in an object,
    * i.e. `{ "success": true, "data": […] }`, or even `{ "success": true, "results": { "data": […] } }`. In those cases, you can use `dataPath` to specify where the data array can be found.
-   * 
+   *
    * @remark If your JSON object has multiple arrays that you want to stream data from, you can pass a regular expression to stream through all of them.
    *
    * @example For `{ "success": true, "data": […] }`, dataPath would be `data`
@@ -423,7 +423,7 @@ export function useStreamJSON<T, U extends any[] = any[]>(
       transform: ((item: unknown) => T) | undefined,
     ) =>
       async ({ page }) => {
-        const fileName = objectHash(url) + ".json";
+        const fileName = hash(url) + ".json";
         const folder = environment.supportPath;
         if (page === 0) {
           controllerRef.current?.abort();

tests/src/fetch-paginated.tsx

@@ -1,4 +1,4 @@
-import { ActionPanel, Action, Icon, Image, List, Grid } from "@raycast/api";
+import { ActionPanel, Action, Icon, Image, List } from "@raycast/api";
 import { useFetch } from "@raycast/utils";
 import { useState } from "react";
 import { setTimeout } from "timers/promises";