Last active
March 17, 2024 13:30
-
-
Save isocroft/2ee61c2b197afb25a93f7f18ecbb9f4d to your computer and use it in GitHub Desktop.
This is a custom hook that allows you to utilize a simple strategy pattern to select <@tanstack/react-query> `useQuery` custom hooks within a single component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useContext, useMemo } from "react"; | |
import type { UseQueryResult } from "react-query"; | |
type ReactQueryFetchStatus = "idle" | "loading" | "error" | "success"; | |
export type UseQueryPackedUnion = "status" | "data"; | |
/* | |
type ReactQueryFetchHook<F extends Array<unknown>, Q = any, P = any> = (...hookArguments: [...F, P?]) => UseQueryResult<Q> | Pick<UseQueryResult<Q>, UseQueryPackedUnion> | |
const queriesMap: Record<"getTodos", ReactQueryFetchHook<[string]>> = { | |
"getTodos": () => ({}) | |
} | |
*/ | |
const queriesMapContext = React.createContext({ | |
}) | |
export function QueriesMapProvider({ children, map }: { children: React.ReactNode, map: Record<string, Function> }) { | |
const mapped = useMemo(() => map, [...Oject.keys(map)]); | |
return <QueriesMapContext.Provider value={mapped}> | |
{children} | |
</QueriesMapContext.Provider> | |
} | |
export function useQueryFromMap<T, V extends Record<string, Function>, A extends Array<unknown>, E = unknown>(key: keyof typeof queriesMap, useQueryArgs?: A) { | |
const queriesMap = useContext(QueriesMapContext) as V; | |
const fetchHook: Function = key in queriesMap ? queriesMap[key] : (() => ({ })); | |
const result: Pick<UseQueryResult<T, E>, UseQueryPackedUnion> = fetchHook(...(useQueryArgs || [])); | |
return result; | |
} |
Author
isocroft
commented
Mar 17, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment