auto refetch if variables changed

Author: dungtd-pmc

package.json

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

src/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react'
 
 const isObj = (obj: unknown): obj is object => (
   typeof obj === 'object' &&
@@ -24,6 +24,17 @@ function useValueRef<T>(value: T) {
   return ref
 }
 
+function useMemoValue<T>(value: T) {
+  const ref = useRef(value)
+
+  return useMemo(() => {
+    if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
+      ref.current = value
+    }
+    return ref.current
+  }, [value])
+}
+
 export type ApiVariables<T extends Partial<Record<'body' | 'query' | 'body', any>> = {}> = T
 
 interface ApiConfig<APIs> {
@@ -136,8 +147,9 @@ function createUseApi<
     TApiVariables extends TVariables[K]
   >(key: K, opts: UseLazyApiOptions<TApiVariables> = {}) {
     const [fetch, result] =  useLazyApi<K, TApiData, TApiError, TApiVariables>(key, opts)
+    const latestVariables = useMemoValue(opts.variables)
 
-    useEffect(() => { fetch() }, [fetch])
+    useEffect(() => { fetch() }, [fetch, latestVariables])
 
     return result
   }