| ... | @@ -1,403 +1,535 @@ | ... | @@ -1,403 +1,535 @@ |
| 1 | import { | 1 | import type { |
| 2 | QueryClient, | 2 | QueryClient, |
| 3 | QueryFunction, | 3 | QueryFunction, |
| 4 | QueryFunctionContext, | | |
| 5 | QueryKey, | 4 | QueryKey, |
| 6 | QueryOptions, | | |
| 7 | SkipToken, | | |
| 8 | Updater, | 5 | Updater, |
| 9 | UseQueryOptions, | | |
| 10 | } from "@tanstack/react-query"; | 6 | } from "@tanstack/react-query"; |
| 11 | import { | 7 | import { |
| 12 | type AllObjectPaths, | 8 | type AllObjectPaths, |
| 13 | type GetObjectPath, | 9 | type GetObjectPath, |
| 14 | getPath as getPath, | 10 | getPath, |
| 15 | setPath as setPath, | 11 | setPath, |
| 16 | } from "./object-path.ts"; | 12 | } from "./object-path.ts"; |
| 17 | import { OptimisticEvents } from "./client.ts"; | 13 | import type { OptimisticEvents } from "./client.ts"; |
| 18 | | 14 | |
| 19 | export type QueryKeyAndFn<T = unknown> = { | 15 | export type QueryKeyAndFn<T = unknown, Key extends QueryKey = QueryKey> = { |
| 20 | queryKey: QueryKey; | 16 | queryKey: Key; |
| 21 | queryFn?: QueryFunction<T, any, never> | undefined; | 17 | queryFn?: QueryFunction<T, any, never> | undefined; |
| 22 | }; | 18 | }; |
| 23 | | 19 | |
| 24 | export function queryClientOptimisticHelpers(client: QueryClient) { | 20 | export function boundQueryClientGet( |
| 25 | return ({ onRefetch, onRestore }: OptimisticEvents) => { | 21 | queryClient: QueryClient, |
| 26 | const refetchHashes: string[] = []; | 22 | ): <T>({ queryKey }: QueryKeyAndFn<T>) => T | undefined { |
| | 23 | return function get<T>({ queryKey }: QueryKeyAndFn<T>) { |
| | 24 | return queryClient.getQueryData<T>(queryKey); |
| | 25 | }; |
| | 26 | } |
| | 27 | |
| | 28 | class TanstackQueryOptimisticHelpers { |
| | 29 | #client: QueryClient; |
| | 30 | #onRefetch: OptimisticEvents["onRefetch"]; |
| | 31 | #onRestore: OptimisticEvents["onRestore"]; |
| | 32 | #refetchHashes: string[] = []; |
| | 33 | |
| | 34 | constructor(client: QueryClient, { onRefetch, onRestore }: OptimisticEvents) { |
| | 35 | this.#client = client; |
| | 36 | this.#onRefetch = onRefetch; |
| | 37 | this.#onRestore = onRestore; |
| | 38 | } |
| 27 | | 39 | |
| 28 | function get<T>({ queryKey }: QueryKeyAndFn<T>) { | 40 | #get<T>({ queryKey }: QueryKeyAndFn<T>) { |
| 29 | return client.getQueryData<T>(queryKey); | 41 | return this.#client.getQueryData<T>(queryKey); |
| | 42 | } |
| | 43 | |
| | 44 | #set<T>( |
| | 45 | query: QueryKeyAndFn<T>, |
| | 46 | updater: Updater<NoInfer<T> | undefined, NoInfer<T> | undefined>, |
| | 47 | ) { |
| | 48 | const result = this.#client.setQueryData<T>(query.queryKey, updater); |
| | 49 | if (result) { |
| | 50 | this.#client.cancelQueries({ queryKey: query.queryKey, exact: true }) |
| | 51 | .catch(() => {}); |
| | 52 | const state = this.#client.getQueryCache().find({ |
| | 53 | queryKey: query.queryKey, |
| | 54 | exact: true, |
| | 55 | }); |
| | 56 | if (!state || this.#refetchHashes.includes(state.queryHash)) return; |
| | 57 | this.#refetchHashes.push(state.queryHash); |
| | 58 | try { |
| | 59 | this.#onRefetch(async () => { |
| | 60 | await this.#client.refetchQueries(query); |
| | 61 | }); |
| | 62 | } catch { /* Ignore expiry */ } |
| 30 | } | 63 | } |
| 31 | function set<T>( | 64 | } |
| 32 | query: QueryKeyAndFn<T>, | 65 | |
| 33 | updater: Updater<NoInfer<T> | undefined, NoInfer<T> | undefined>, | 66 | /** |
| 34 | ) { | 67 | * Set the entire query data. |
| 35 | const result = client.setQueryData<T>(query.queryKey, updater); | 68 | * If the query doesn't exist, the new query is created. |
| 36 | if (result) { | 69 | */ |
| 37 | client.cancelQueries({ queryKey: query.queryKey, exact: true }) | 70 | set<Data>( |
| 38 | .catch(() => {}); | 71 | queryKey: QueryKeyAndFn<Data>, |
| 39 | const state = client.getQueryCache().find({ | 72 | value: Data | ((prev: Data | undefined) => Data | undefined), |
| 40 | queryKey: query.queryKey, | 73 | ) { |
| | 74 | const prev = this.#get(queryKey); |
| | 75 | |
| | 76 | const newValue = typeof value === "function" |
| | 77 | ? (value as (prev: Data | undefined) => Data | undefined)(prev) |
| | 78 | : value; |
| | 79 | |
| | 80 | this.#set(queryKey, newValue); |
| | 81 | this.#onRestore(() => { |
| | 82 | if (prev === undefined) { |
| | 83 | this.#client.removeQueries({ |
| | 84 | queryKey: queryKey.queryKey, |
| 41 | exact: true, | 85 | exact: true, |
| 42 | }); | 86 | }); |
| 43 | if (!state || refetchHashes.includes(state.queryHash)) return; | 87 | } else { |
| 44 | refetchHashes.push(state.queryHash); | 88 | this.#set(queryKey, prev); |
| 45 | onRefetch(async () => { | | |
| 46 | await client.refetchQueries(query); | | |
| 47 | }); | | |
| 48 | } | 89 | } |
| | 90 | }); |
| | 91 | } |
| | 92 | |
| | 93 | /** |
| | 94 | * Update the entire query data. |
| | 95 | * If the query doesn't exist, it cancels |
| | 96 | */ |
| | 97 | updateExisting<Data>( |
| | 98 | queryKey: QueryKeyAndFn<Data>, |
| | 99 | value: Data | ((prev: Data) => Data), |
| | 100 | ) { |
| | 101 | const prev = this.#get(queryKey); |
| | 102 | if (!prev) return; |
| | 103 | |
| | 104 | const newValue = typeof value === "function" |
| | 105 | ? (value as (prev: Data | undefined) => Data | undefined)(prev) |
| | 106 | : value; |
| | 107 | |
| | 108 | this.#set(queryKey, newValue); |
| | 109 | this.#onRestore(() => { |
| | 110 | this.#set(queryKey, prev); |
| | 111 | }); |
| | 112 | } |
| | 113 | |
| | 114 | /** |
| | 115 | * Set a property at an object path. |
| | 116 | * If the query or path doesn't exist, the updater is skipped. |
| | 117 | */ |
| | 118 | objSet<Data extends object, const Path extends AllObjectPaths<Data>>( |
| | 119 | queryKey: QueryKeyAndFn<Data>, |
| | 120 | path: Path, |
| | 121 | value: |
| | 122 | | Exclude<GetObjectPath<Data, Path>, Function> |
| | 123 | | ((prev: GetObjectPath<Data, Path>) => GetObjectPath<Data, Path>), |
| | 124 | ) { |
| | 125 | const prev = this.#get(queryKey); |
| | 126 | if (!prev) return; |
| | 127 | const { value: original, exists } = getPath(prev, path); |
| | 128 | if (!exists) return; |
| | 129 | |
| | 130 | this.#set( |
| | 131 | queryKey, |
| | 132 | (obj) => |
| | 133 | obj |
| | 134 | ? setPath( |
| | 135 | obj, |
| | 136 | path, |
| | 137 | typeof value === "function" |
| | 138 | ? (value as (( |
| | 139 | prev: GetObjectPath<Data, Path>, |
| | 140 | ) => GetObjectPath<Data, Path>))(original) |
| | 141 | : value, |
| | 142 | ) |
| | 143 | : obj, |
| | 144 | ); |
| | 145 | this.#onRestore(() => { |
| | 146 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 147 | }); |
| | 148 | } |
| | 149 | |
| | 150 | /** |
| | 151 | * Increment a numeric property at an object path. |
| | 152 | * If the query or path doesn't exist, the updater is skipped. |
| | 153 | */ |
| | 154 | objIncrement< |
| | 155 | Data extends object, |
| | 156 | const Path extends AllObjectPaths<Data>, |
| | 157 | >( |
| | 158 | queryKey: QueryKeyAndFn<Data>, |
| | 159 | path: Path, |
| | 160 | amount: number = 1, |
| | 161 | ) { |
| | 162 | const prev = this.#get(queryKey); |
| | 163 | if (!prev) return; |
| | 164 | const { value: original, exists } = getPath(prev, path); |
| | 165 | if (!exists || typeof original !== "number") return; |
| | 166 | |
| | 167 | this.#set( |
| | 168 | queryKey, |
| | 169 | (obj) => obj ? setPath(obj, path, (original + amount) as any) : obj, |
| | 170 | ); |
| | 171 | this.#onRestore(() => { |
| | 172 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 173 | }); |
| | 174 | } |
| | 175 | |
| | 176 | /** |
| | 177 | * Decrement a numeric property at an object path. |
| | 178 | * If the query or path doesn't exist, the updater is skipped. |
| | 179 | */ |
| | 180 | objDecrement< |
| | 181 | Data extends object, |
| | 182 | const Path extends AllObjectPaths<Data>, |
| | 183 | >( |
| | 184 | queryKey: QueryKeyAndFn<Data>, |
| | 185 | path: Path, |
| | 186 | amount: number = 1, |
| | 187 | ) { |
| | 188 | const prev = this.#get(queryKey); |
| | 189 | if (!prev) return; |
| | 190 | const { value: original, exists } = getPath(prev, path); |
| | 191 | if (!exists || typeof original !== "number") return; |
| | 192 | |
| | 193 | this.#set( |
| | 194 | queryKey, |
| | 195 | (obj) => obj ? setPath(obj, path, (original - amount) as any) : obj, |
| | 196 | ); |
| | 197 | this.#onRestore(() => { |
| | 198 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 199 | }); |
| | 200 | } |
| | 201 | |
| | 202 | /** |
| | 203 | * Toggle a boolean property at an object path. |
| | 204 | * If the query or path doesn't exist, the updater is skipped. |
| | 205 | */ |
| | 206 | objToggle<Data extends object, const Path extends AllObjectPaths<Data>>( |
| | 207 | queryKey: QueryKeyAndFn<Data>, |
| | 208 | path: Path, |
| | 209 | ) { |
| | 210 | const prev = this.#get(queryKey); |
| | 211 | if (!prev) return; |
| | 212 | const { value: original, exists } = getPath(prev, path); |
| | 213 | if (!exists || typeof original !== "boolean") return; |
| | 214 | |
| | 215 | this.#set( |
| | 216 | queryKey, |
| | 217 | (obj) => obj ? setPath(obj, path, (!original) as any) : obj, |
| | 218 | ); |
| | 219 | this.#onRestore(() => { |
| | 220 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 221 | }); |
| | 222 | } |
| | 223 | |
| | 224 | /** |
| | 225 | * Shallow merge multiple properties at an object path. |
| | 226 | * If the query or path doesn't exist, the updater is skipped. |
| | 227 | */ |
| | 228 | objSetMany<Data extends object, const Path extends AllObjectPaths<Data>>( |
| | 229 | queryKey: QueryKeyAndFn<Data>, |
| | 230 | path: Path, |
| | 231 | updates: Partial<GetObjectPath<Data, Path>>, |
| | 232 | ) { |
| | 233 | const prev = this.#get(queryKey); |
| | 234 | if (!prev) return; |
| | 235 | const { value: original, exists } = getPath(prev, path); |
| | 236 | if (!exists || typeof original !== "object" || original === null) { |
| | 237 | return; |
| 49 | } | 238 | } |
| 50 | | 239 | |
| 51 | return ({ | 240 | const merged = { ...original as object, ...updates } as GetObjectPath< |
| 52 | /** | 241 | Data, |
| 53 | * Set the entire query data. | 242 | Path |
| 54 | * If the query doesn't exist, the new query is created. | 243 | >; |
| 55 | */ | 244 | this.#set( |
| 56 | set<Data>( | 245 | queryKey, |
| 57 | queryKey: QueryKeyAndFn<Data>, | 246 | (obj) => obj ? setPath(obj, path, merged) : obj, |
| 58 | value: Data | ((prev: Data | undefined) => Data | undefined), | 247 | ); |
| 59 | ) { | 248 | this.#onRestore(() => { |
| 60 | const prev = get(queryKey); | 249 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| 61 | | | |
| 62 | const newValue = typeof value === "function" | | |
| 63 | ? (value as (prev: Data | undefined) => Data | undefined)(prev) | | |
| 64 | : value; | | |
| 65 | | | |
| 66 | set(queryKey, newValue); | | |
| 67 | onRestore(() => { | | |
| 68 | if (prev === undefined) { | | |
| 69 | client.removeQueries({ queryKey: queryKey.queryKey, exact: true }); | | |
| 70 | } else { | | |
| 71 | set(queryKey, prev); | | |
| 72 | } | | |
| 73 | }); | | |
| 74 | }, | | |
| 75 | | | |
| 76 | /** | | |
| 77 | * Update the entire query data. | | |
| 78 | * If the query doesn't exist, it cancels | | |
| 79 | */ | | |
| 80 | updateExisting<Data>( | | |
| 81 | queryKey: QueryKeyAndFn<Data>, | | |
| 82 | value: Data | ((prev: Data) => Data), | | |
| 83 | ) { | | |
| 84 | const prev = get(queryKey); | | |
| 85 | if (!prev) return false; | | |
| 86 | | | |
| 87 | const newValue = typeof value === "function" | | |
| 88 | ? (value as (prev: Data | undefined) => Data | undefined)(prev) | | |
| 89 | : value; | | |
| 90 | | | |
| 91 | set(queryKey, newValue); | | |
| 92 | onRestore(() => { | | |
| 93 | set(queryKey, prev); | | |
| 94 | }); | | |
| 95 | }, | | |
| 96 | | | |
| 97 | /** | | |
| 98 | * Set a property at an object path. | | |
| 99 | * If the query or path doesn't exist, the updater is skipped. | | |
| 100 | */ | | |
| 101 | objSet<Data extends object, const Path extends AllObjectPaths<Data>>( | | |
| 102 | queryKey: QueryKeyAndFn<Data>, | | |
| 103 | path: Path, | | |
| 104 | value: | | |
| 105 | | Exclude<GetObjectPath<Data, Path>, Function> | | |
| 106 | | ((prev: GetObjectPath<Data, Path>) => GetObjectPath<Data, Path>), | | |
| 107 | ) { | | |
| 108 | const prev = get(queryKey); | | |
| 109 | if (!prev) return; | | |
| 110 | const { value: original, exists } = getPath(prev, path); | | |
| 111 | if (!exists) return; | | |
| 112 | | | |
| 113 | set( | | |
| 114 | queryKey, | | |
| 115 | (obj) => | | |
| 116 | obj | | |
| 117 | ? setPath( | | |
| 118 | obj, | | |
| 119 | path, | | |
| 120 | typeof value === "function" | | |
| 121 | ? (value as (( | | |
| 122 | prev: GetObjectPath<Data, Path>, | | |
| 123 | ) => GetObjectPath<Data, Path>))(original) | | |
| 124 | : value, | | |
| 125 | ) | | |
| 126 | : obj, | | |
| 127 | ); | | |
| 128 | onRestore(() => { | | |
| 129 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 130 | }); | | |
| 131 | }, | | |
| 132 | | | |
| 133 | /** | | |
| 134 | * Increment a numeric property at an object path. | | |
| 135 | * If the query or path doesn't exist, the updater is skipped. | | |
| 136 | */ | | |
| 137 | objIncrement< | | |
| 138 | Data extends object, | | |
| 139 | const Path extends AllObjectPaths<Data>, | | |
| 140 | >( | | |
| 141 | queryKey: QueryKeyAndFn<Data>, | | |
| 142 | path: Path, | | |
| 143 | amount: number = 1, | | |
| 144 | ) { | | |
| 145 | const prev = get(queryKey); | | |
| 146 | if (!prev) return; | | |
| 147 | const { value: original, exists } = getPath(prev, path); | | |
| 148 | if (!exists || typeof original !== "number") return; | | |
| 149 | | | |
| 150 | set( | | |
| 151 | queryKey, | | |
| 152 | (obj) => obj ? setPath(obj, path, (original + amount) as any) : obj, | | |
| 153 | ); | | |
| 154 | onRestore(() => { | | |
| 155 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 156 | }); | | |
| 157 | }, | | |
| 158 | | | |
| 159 | /** | | |
| 160 | * Decrement a numeric property at an object path. | | |
| 161 | * If the query or path doesn't exist, the updater is skipped. | | |
| 162 | */ | | |
| 163 | objDecrement< | | |
| 164 | Data extends object, | | |
| 165 | const Path extends AllObjectPaths<Data>, | | |
| 166 | >( | | |
| 167 | queryKey: QueryKeyAndFn<Data>, | | |
| 168 | path: Path, | | |
| 169 | amount: number = 1, | | |
| 170 | ) { | | |
| 171 | const prev = get(queryKey); | | |
| 172 | if (!prev) return; | | |
| 173 | const { value: original, exists } = getPath(prev, path); | | |
| 174 | if (!exists || typeof original !== "number") return; | | |
| 175 | | | |
| 176 | set( | | |
| 177 | queryKey, | | |
| 178 | (obj) => obj ? setPath(obj, path, (original - amount) as any) : obj, | | |
| 179 | ); | | |
| 180 | onRestore(() => { | | |
| 181 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 182 | }); | | |
| 183 | }, | | |
| 184 | | | |
| 185 | /** | | |
| 186 | * Toggle a boolean property at an object path. | | |
| 187 | * If the query or path doesn't exist, the updater is skipped. | | |
| 188 | */ | | |
| 189 | objToggle<Data extends object, const Path extends AllObjectPaths<Data>>( | | |
| 190 | queryKey: QueryKeyAndFn<Data>, | | |
| 191 | path: Path, | | |
| 192 | ) { | | |
| 193 | const prev = get(queryKey); | | |
| 194 | if (!prev) return; | | |
| 195 | const { value: original, exists } = getPath(prev, path); | | |
| 196 | if (!exists || typeof original !== "boolean") return; | | |
| 197 | | | |
| 198 | set( | | |
| 199 | queryKey, | | |
| 200 | (obj) => obj ? setPath(obj, path, (!original) as any) : obj, | | |
| 201 | ); | | |
| 202 | onRestore(() => { | | |
| 203 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 204 | }); | | |
| 205 | }, | | |
| 206 | | | |
| 207 | /** | | |
| 208 | * Shallow merge multiple properties at an object path. | | |
| 209 | * If the query or path doesn't exist, the updater is skipped. | | |
| 210 | */ | | |
| 211 | objSetMany<Data extends object, const Path extends AllObjectPaths<Data>>( | | |
| 212 | queryKey: QueryKeyAndFn<Data>, | | |
| 213 | path: Path, | | |
| 214 | updates: Partial<GetObjectPath<Data, Path>>, | | |
| 215 | ) { | | |
| 216 | const prev = get(queryKey); | | |
| 217 | if (!prev) return; | | |
| 218 | const { value: original, exists } = getPath(prev, path); | | |
| 219 | if (!exists || typeof original !== "object" || original === null) { | | |
| 220 | return; | | |
| 221 | } | | |
| 222 | | | |
| 223 | const merged = { ...original as object, ...updates } as GetObjectPath< | | |
| 224 | Data, | | |
| 225 | Path | | |
| 226 | >; | | |
| 227 | set( | | |
| 228 | queryKey, | | |
| 229 | (obj) => obj ? setPath(obj, path, merged) : obj, | | |
| 230 | ); | | |
| 231 | onRestore(() => { | | |
| 232 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 233 | }); | | |
| 234 | }, | | |
| 235 | | | |
| 236 | /** | | |
| 237 | * Push item(s) to the end of an array at an object path. | | |
| 238 | * If the query or path doesn't exist, the updater is skipped. | | |
| 239 | */ | | |
| 240 | arrayPush<Data extends object, const Path extends AllObjectPaths<Data>>( | | |
| 241 | queryKey: QueryKeyAndFn<Data>, | | |
| 242 | path: Path, | | |
| 243 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] | | |
| 244 | : never | | |
| 245 | ) { | | |
| 246 | const prev = get(queryKey); | | |
| 247 | if (!prev) return; | | |
| 248 | const { value: original, exists } = getPath(prev, path); | | |
| 249 | if (!exists || !Array.isArray(original)) return; | | |
| 250 | | | |
| 251 | const newArray = [...original, ...items]; | | |
| 252 | set( | | |
| 253 | queryKey, | | |
| 254 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, | | |
| 255 | ); | | |
| 256 | onRestore(() => { | | |
| 257 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 258 | }); | | |
| 259 | }, | | |
| 260 | | | |
| 261 | /** | | |
| 262 | * Add item(s) to the beginning of an array at an object path. | | |
| 263 | * If the query or path doesn't exist, the updater is skipped. | | |
| 264 | */ | | |
| 265 | arrayUnshift< | | |
| 266 | Data extends object, | | |
| 267 | const Path extends AllObjectPaths<Data>, | | |
| 268 | >( | | |
| 269 | queryKey: QueryKeyAndFn<Data>, | | |
| 270 | path: Path, | | |
| 271 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] | | |
| 272 | : never | | |
| 273 | ) { | | |
| 274 | const prev = get(queryKey); | | |
| 275 | if (!prev) return; | | |
| 276 | const { value: original, exists } = getPath(prev, path); | | |
| 277 | if (!exists || !Array.isArray(original)) return; | | |
| 278 | | | |
| 279 | const newArray = [...items, ...original]; | | |
| 280 | set( | | |
| 281 | queryKey, | | |
| 282 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, | | |
| 283 | ); | | |
| 284 | onRestore(() => { | | |
| 285 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 286 | }); | | |
| 287 | }, | | |
| 288 | | | |
| 289 | /** | | |
| 290 | * Remove items from an array that match a predicate. | | |
| 291 | * If the query or path doesn't exist, the updater is skipped. | | |
| 292 | */ | | |
| 293 | arrayRemoveItem< | | |
| 294 | Data extends object, | | |
| 295 | const Path extends AllObjectPaths<Data>, | | |
| 296 | >( | | |
| 297 | queryKey: QueryKeyAndFn<Data>, | | |
| 298 | path: Path, | | |
| 299 | predicate: ( | | |
| 300 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, | | |
| 301 | index: number, | | |
| 302 | ) => boolean, | | |
| 303 | ) { | | |
| 304 | const prev = get(queryKey); | | |
| 305 | if (!prev) return; | | |
| 306 | const { value: original, exists } = getPath(prev, path); | | |
| 307 | if (!exists || !Array.isArray(original)) return; | | |
| 308 | | | |
| 309 | const newArray = original.filter((item, index) => | | |
| 310 | !predicate(item, index) | | |
| 311 | ); | | |
| 312 | set( | | |
| 313 | queryKey, | | |
| 314 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, | | |
| 315 | ); | | |
| 316 | onRestore(() => { | | |
| 317 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 318 | }); | | |
| 319 | }, | | |
| 320 | | | |
| 321 | /** | | |
| 322 | * Update items in an array that match a predicate. | | |
| 323 | * If the query or path doesn't exist, the updater is skipped. | | |
| 324 | */ | | |
| 325 | arrayUpdateItem< | | |
| 326 | Data extends object, | | |
| 327 | const Path extends AllObjectPaths<Data>, | | |
| 328 | >( | | |
| 329 | queryKey: QueryKeyAndFn<Data>, | | |
| 330 | path: Path, | | |
| 331 | predicate: ( | | |
| 332 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, | | |
| 333 | index: number, | | |
| 334 | ) => boolean, | | |
| 335 | updater: ( | | |
| 336 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, | | |
| 337 | ) => GetObjectPath<Data, Path> extends Array<infer T> ? T : never, | | |
| 338 | ) { | | |
| 339 | const prev = get(queryKey); | | |
| 340 | if (!prev) return; | | |
| 341 | const { value: original, exists } = getPath(prev, path); | | |
| 342 | if (!exists || !Array.isArray(original)) return; | | |
| 343 | | | |
| 344 | const newArray = original.map((item, index) => | | |
| 345 | predicate(item, index) ? updater(item) : item | | |
| 346 | ); | | |
| 347 | set( | | |
| 348 | queryKey, | | |
| 349 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, | | |
| 350 | ); | | |
| 351 | onRestore(() => { | | |
| 352 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 353 | }); | | |
| 354 | }, | | |
| 355 | | | |
| 356 | /** | | |
| 357 | * Insert item(s) at a specific index in an array. | | |
| 358 | * If the query or path doesn't exist, the updater is skipped. | | |
| 359 | */ | | |
| 360 | arrayInsertIndex< | | |
| 361 | Data extends object, | | |
| 362 | const Path extends AllObjectPaths<Data>, | | |
| 363 | >( | | |
| 364 | queryKey: QueryKeyAndFn<Data>, | | |
| 365 | path: Path, | | |
| 366 | index: number, | | |
| 367 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] | | |
| 368 | : never | | |
| 369 | ) { | | |
| 370 | const prev = get(queryKey); | | |
| 371 | if (!prev) return; | | |
| 372 | const { value: original, exists } = getPath(prev, path); | | |
| 373 | if (!exists || !Array.isArray(original)) return; | | |
| 374 | | | |
| 375 | const newArray = [ | | |
| 376 | ...original.slice(0, index), | | |
| 377 | ...items, | | |
| 378 | ...original.slice(index), | | |
| 379 | ]; | | |
| 380 | set( | | |
| 381 | queryKey, | | |
| 382 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, | | |
| 383 | ); | | |
| 384 | onRestore(() => { | | |
| 385 | set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); | | |
| 386 | }); | | |
| 387 | }, | | |
| 388 | | | |
| 389 | /** | | |
| 390 | * Remove a query from the cache entirely. | | |
| 391 | */ | | |
| 392 | removeQuery(queryKey: QueryKeyAndFn) { | | |
| 393 | const prev = get(queryKey); | | |
| 394 | if (!prev) return; | | |
| 395 | | | |
| 396 | client.removeQueries({ queryKey: queryKey.queryKey, exact: true }); | | |
| 397 | onRestore(() => { | | |
| 398 | set(queryKey, prev); | | |
| 399 | }); | | |
| 400 | }, | | |
| 401 | }); | 250 | }); |
| 402 | }; | 251 | } |
| | 252 | |
| | 253 | /** |
| | 254 | * Push item(s) to the end of an array at an object path. |
| | 255 | * If the query or path doesn't exist, the updater is skipped. |
| | 256 | */ |
| | 257 | objArrayPush< |
| | 258 | Data extends object, |
| | 259 | const Path extends AllObjectPaths<Data>, |
| | 260 | >( |
| | 261 | queryKey: QueryKeyAndFn<Data>, |
| | 262 | path: Path, |
| | 263 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] |
| | 264 | : never |
| | 265 | ) { |
| | 266 | const prev = this.#get(queryKey); |
| | 267 | if (!prev) return; |
| | 268 | const { value: original, exists } = getPath(prev, path); |
| | 269 | if (!exists || !Array.isArray(original)) return; |
| | 270 | |
| | 271 | const newArray = [...original, ...items]; |
| | 272 | this.#set( |
| | 273 | queryKey, |
| | 274 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, |
| | 275 | ); |
| | 276 | this.#onRestore(() => { |
| | 277 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 278 | }); |
| | 279 | } |
| | 280 | |
| | 281 | /** |
| | 282 | * Add item(s) to the beginning of an array at an object path. |
| | 283 | * If the query or path doesn't exist, the updater is skipped. |
| | 284 | */ |
| | 285 | objArrayUnshift< |
| | 286 | Data extends object, |
| | 287 | const Path extends AllObjectPaths<Data>, |
| | 288 | >( |
| | 289 | queryKey: QueryKeyAndFn<Data>, |
| | 290 | path: Path, |
| | 291 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] |
| | 292 | : never |
| | 293 | ) { |
| | 294 | const prev = this.#get(queryKey); |
| | 295 | if (!prev) return; |
| | 296 | const { value: original, exists } = getPath(prev, path); |
| | 297 | if (!exists || !Array.isArray(original)) return; |
| | 298 | |
| | 299 | const newArray = [...items, ...original]; |
| | 300 | this.#set( |
| | 301 | queryKey, |
| | 302 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, |
| | 303 | ); |
| | 304 | this.#onRestore(() => { |
| | 305 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 306 | }); |
| | 307 | } |
| | 308 | |
| | 309 | /** |
| | 310 | * Remove items from an array that match a predicate. |
| | 311 | * If the query or path doesn't exist, the updater is skipped. |
| | 312 | */ |
| | 313 | objArrayRemove< |
| | 314 | Data extends object, |
| | 315 | const Path extends AllObjectPaths<Data>, |
| | 316 | >( |
| | 317 | queryKey: QueryKeyAndFn<Data>, |
| | 318 | path: Path, |
| | 319 | predicate: ( |
| | 320 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, |
| | 321 | index: number, |
| | 322 | ) => boolean, |
| | 323 | ) { |
| | 324 | const prev = this.#get(queryKey); |
| | 325 | if (!prev) return; |
| | 326 | const { value: original, exists } = getPath(prev, path); |
| | 327 | if (!exists || !Array.isArray(original)) return; |
| | 328 | |
| | 329 | const newArray = original.filter((item, index) => !predicate(item, index)); |
| | 330 | this.#set( |
| | 331 | queryKey, |
| | 332 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, |
| | 333 | ); |
| | 334 | this.#onRestore(() => { |
| | 335 | // TODO: splice items back in case original changed |
| | 336 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 337 | }); |
| | 338 | } |
| | 339 | |
| | 340 | /** |
| | 341 | * Update items in an array that match a predicate. |
| | 342 | * If the query or path doesn't exist, the updater is skipped. |
| | 343 | */ |
| | 344 | objArrayUpdate< |
| | 345 | Data extends object, |
| | 346 | const Path extends AllObjectPaths<Data>, |
| | 347 | >( |
| | 348 | queryKey: QueryKeyAndFn<Data>, |
| | 349 | path: Path, |
| | 350 | predicate: ( |
| | 351 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, |
| | 352 | index: number, |
| | 353 | ) => boolean, |
| | 354 | updater: ( |
| | 355 | item: GetObjectPath<Data, Path> extends Array<infer T> ? T : never, |
| | 356 | ) => GetObjectPath<Data, Path> extends Array<infer T> ? T : never, |
| | 357 | ) { |
| | 358 | const prev = this.#get(queryKey); |
| | 359 | if (!prev) return; |
| | 360 | const { value: original, exists } = getPath(prev, path); |
| | 361 | if (!exists || !Array.isArray(original)) return; |
| | 362 | |
| | 363 | const newArray = original.map((item, index) => |
| | 364 | predicate(item, index) ? updater(item) : item |
| | 365 | ); |
| | 366 | this.#set( |
| | 367 | queryKey, |
| | 368 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, |
| | 369 | ); |
| | 370 | this.#onRestore(() => { |
| | 371 | // TODO: splice items back in case original changed |
| | 372 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 373 | }); |
| | 374 | } |
| | 375 | |
| | 376 | /** |
| | 377 | * Insert item(s) at a specific index in an array. |
| | 378 | * If the query or path doesn't exist, the updater is skipped. |
| | 379 | */ |
| | 380 | objArrayInsertIndex< |
| | 381 | Data extends object, |
| | 382 | const Path extends AllObjectPaths<Data>, |
| | 383 | >( |
| | 384 | queryKey: QueryKeyAndFn<Data>, |
| | 385 | path: Path, |
| | 386 | index: number, |
| | 387 | ...items: GetObjectPath<Data, Path> extends Array<infer T> ? T[] |
| | 388 | : never |
| | 389 | ) { |
| | 390 | const prev = this.#get(queryKey); |
| | 391 | if (!prev) return; |
| | 392 | const { value: original, exists } = getPath(prev, path); |
| | 393 | if (!exists || !Array.isArray(original)) return; |
| | 394 | |
| | 395 | const newArray = [ |
| | 396 | ...original.slice(0, index), |
| | 397 | ...items, |
| | 398 | ...original.slice(index), |
| | 399 | ]; |
| | 400 | this.#set( |
| | 401 | queryKey, |
| | 402 | (obj) => obj ? setPath(obj, path, newArray as any) : obj, |
| | 403 | ); |
| | 404 | this.#onRestore(() => { |
| | 405 | // TODO: splice items back in case original changed |
| | 406 | this.#set(queryKey, (obj) => obj ? setPath(obj, path, original) : obj); |
| | 407 | }); |
| | 408 | } |
| | 409 | |
| | 410 | /** |
| | 411 | * Push item(s) to the end of an array at an object path. |
| | 412 | * If the query or path doesn't exist, the updater is skipped. |
| | 413 | */ |
| | 414 | arrayPush<Data>(queryKey: QueryKeyAndFn<Data[]>, ...items: Data[]) { |
| | 415 | const prev = this.#get(queryKey); |
| | 416 | if (!prev || !Array.isArray(prev)) return; |
| | 417 | |
| | 418 | const newArray = [...prev, ...items]; |
| | 419 | this.#set(queryKey, newArray); |
| | 420 | this.#onRestore(() => { |
| | 421 | this.#set( |
| | 422 | queryKey, |
| | 423 | (old) => old ? old.filter((x) => !items.includes(x)) : old, |
| | 424 | ); |
| | 425 | }); |
| | 426 | } |
| | 427 | |
| | 428 | /** |
| | 429 | * Add item(s) to the beginning of an array at an object path. |
| | 430 | * If the query or path doesn't exist, the updater is skipped. |
| | 431 | */ |
| | 432 | arrayUnshift<Data>(queryKey: QueryKeyAndFn<Data[]>, ...items: Data[]) { |
| | 433 | const prev = this.#get(queryKey); |
| | 434 | if (!prev || !Array.isArray(prev)) return; |
| | 435 | |
| | 436 | const newArray = [...items, ...prev]; |
| | 437 | this.#set(queryKey, newArray); |
| | 438 | this.#onRestore(() => { |
| | 439 | this.#set( |
| | 440 | queryKey, |
| | 441 | (old) => old ? old.filter((x) => !items.includes(x)) : old, |
| | 442 | ); |
| | 443 | }); |
| | 444 | } |
| | 445 | |
| | 446 | /** |
| | 447 | * Remove items from an array that match a predicate. |
| | 448 | * If the query or path doesn't exist, the updater is skipped. |
| | 449 | */ |
| | 450 | arrayRemove<Data>( |
| | 451 | queryKey: QueryKeyAndFn<Data[]>, |
| | 452 | predicate: ( |
| | 453 | item: Data, |
| | 454 | index: number, |
| | 455 | ) => boolean, |
| | 456 | ) { |
| | 457 | const prev = this.#get(queryKey); |
| | 458 | if (!prev || !Array.isArray(prev)) return; |
| | 459 | |
| | 460 | const newArray = prev.filter((item, index) => !predicate(item, index)); |
| | 461 | this.#set(queryKey, newArray); |
| | 462 | this.#onRestore(() => { |
| | 463 | // TODO: splice items back in case original changed |
| | 464 | this.#set(queryKey, prev); |
| | 465 | }); |
| | 466 | } |
| | 467 | |
| | 468 | /** |
| | 469 | * Update items in an array that match a predicate. |
| | 470 | * If the query or path doesn't exist, the updater is skipped. |
| | 471 | */ |
| | 472 | arrayUpdate<Data>( |
| | 473 | queryKey: QueryKeyAndFn<Data[]>, |
| | 474 | predicate: ( |
| | 475 | item: Data, |
| | 476 | index: number, |
| | 477 | ) => boolean, |
| | 478 | updater: (item: Data) => Data, |
| | 479 | ) { |
| | 480 | const prev = this.#get(queryKey); |
| | 481 | if (!prev || !Array.isArray(prev)) return; |
| | 482 | |
| | 483 | const newArray = prev.map((item, index) => |
| | 484 | predicate(item, index) ? updater(item) : item |
| | 485 | ); |
| | 486 | this.#set(queryKey, newArray); |
| | 487 | this.#onRestore(() => { |
| | 488 | // TODO: splice items back in case original changed |
| | 489 | this.#set(queryKey, prev); |
| | 490 | }); |
| | 491 | } |
| | 492 | |
| | 493 | /** |
| | 494 | * Insert item(s) at a specific index in an array. |
| | 495 | * If the query or path doesn't exist, the updater is skipped. |
| | 496 | */ |
| | 497 | arrayInsertIndex<Data>( |
| | 498 | queryKey: QueryKeyAndFn<Data[]>, |
| | 499 | index: number, |
| | 500 | ...items: Data[] |
| | 501 | ) { |
| | 502 | const prev = this.#get(queryKey); |
| | 503 | if (!prev || !Array.isArray(prev)) return; |
| | 504 | |
| | 505 | const newArray = [ |
| | 506 | ...prev.slice(0, index), |
| | 507 | ...items, |
| | 508 | ...prev.slice(index), |
| | 509 | ]; |
| | 510 | this.#set(queryKey, newArray); |
| | 511 | this.#onRestore(() => { |
| | 512 | // TODO: splice items back in case original changed |
| | 513 | this.#set(queryKey, prev); |
| | 514 | }); |
| | 515 | } |
| | 516 | |
| | 517 | /** |
| | 518 | * Remove a query from the cache entirely. |
| | 519 | */ |
| | 520 | removeQuery(queryKey: QueryKeyAndFn) { |
| | 521 | const prev = this.#get(queryKey); |
| | 522 | if (!prev) return; |
| | 523 | |
| | 524 | this.#client.removeQueries({ queryKey: queryKey.queryKey, exact: true }); |
| | 525 | this.#onRestore(() => { |
| | 526 | this.#set(queryKey, prev); |
| | 527 | }); |
| | 528 | } |
| | 529 | } |
| | 530 | |
| | 531 | export function queryClientOptimisticHelpers( |
| | 532 | client: QueryClient, |
| | 533 | ): (e: OptimisticEvents) => TanstackQueryOptimisticHelpers { |
| | 534 | return (events) => new TanstackQueryOptimisticHelpers(client, events); |
| 403 | } | 535 | } |
clover caruso <git@paperclover.net> 2026-01-27 18:21:53-08:00
Commit is signed but in an unrecognized format.