feat: return $fetch and $fetchState from useFetch

These are also accessible from `useContext`.

Author: danielroe

docs/helpers/useFetch.md

@@ -15,10 +15,16 @@ export default defineComponent({
   setup() {
     const name = ref('')
 
-    useFetch(async () => {
+    const { $fetch, $fetchState } = useFetch(async () => {
       name.value = await axios.get('https://myapi.com/name')
     })
 
+    // Manually trigger a refetch
+    $fetch()
+
+    // Access fetch error, pending and timestamp
+    $fetchState
+
     return { name }
   },
 })

src/fetch.ts

@@ -144,7 +144,11 @@ export const useFetch = (callback: Fetch) => {
     }
   })
 
-  if (process.server || !isSsrHydration(vm)) return
+  if (process.server || !isSsrHydration(vm))
+    return {
+      $fetch: vm.$fetch,
+      $fetchState: vm.$fetchState,
+    }
 
   // Hydrate component
   vm._hydrated = true
@@ -154,7 +158,11 @@ export const useFetch = (callback: Fetch) => {
   // If fetch error
   if (data && data._error) {
     vm.$fetchState.error = data._error
-    return
+
+    return {
+      $fetch: vm.$fetch,
+      $fetchState: vm.$fetchState,
+    }
   }
 
   onBeforeMount(() => {
@@ -169,4 +177,9 @@ export const useFetch = (callback: Fetch) => {
       }
     }
   })
+
+  return {
+    $fetch: vm.$fetch,
+    $fetchState: vm.$fetchState,
+  }
 }