fix missing hooks in useApi

Author: dung28-td

docs/docs/getting-started.md

@@ -43,7 +43,7 @@ interface ApiConfig {
 }
 
 interface Variables {
-  path?: Record<string, string | number>
+  path?: Record<string | number, string>
   search?: any
   body?: any
 }
@@ -55,13 +55,13 @@ export async function fetcher (apiConfig: ApiConfig, variables: Variables) {
   const url = new URL(path, baseUrl)
 
   if ('path' in variables) {
-    for (const [key, value] of Object.entries(variables.body)) {
+    for (const [key, value] of Object.entries(variables.path)) {
       url.pathname = url.pathname.replace(`:${key}`, value)
     }
   }
 
   if ('search' in variables) {
-    url.searchParams = new URLSearchParams(variables.search)
+    url.search = new URLSearchParams(variables.search).toString()
   }
 
   const res = await fetch(url.toString(), {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-api-fetching",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Make fetching API easier with React's hooks + context",
   "source": "src/index.tsx",
   "main": "dist/main.js",

src/index.tsx

@@ -171,7 +171,7 @@ export interface UseLazyApiOptions<
   cached?: boolean
   refetchOnFocus?: boolean
   variables?: TVariables
-  onFetch?: () => Promise<any>
+  onFetch?: () => any
   onCompleted?: (params: OnCompletedParams<T, TData, TError, TVariables, K>) => any
 }
 
@@ -334,6 +334,7 @@ function createUseApi<
     TApiVariables extends TVariables[K]
   >(key: K, opts: UseApiOptions<T, TData, TError, TVariables, K> = {}) {
     const { cache } = useContext(ctx)
+    const optsRef = useValueRef(opts)
     const {
       skip = false,
       force = false,
@@ -350,9 +351,11 @@ function createUseApi<
     const onFetch = useCallback(async () => {
       calledRef.current = true
       loadingRef.current = true
+      if (optsRef.current.onFetch) await optsRef.current.onFetch()
     }, [])
-    const onCompleted = useCallback(async () => {
+    const onCompleted = useCallback(async (params: OnCompletedParams<T, TData, TError, TVariables, K>) => {
       loadingRef.current = false
+      if (optsRef.current.onCompleted) await optsRef.current.onCompleted(params)
     }, [])
     const [fetch, result] =  useLazyApi<K, TApiData, TApiError, TApiVariables>(key, {
       ...lazyOpts,