fix: refresh force fetch

Author: Akryum

packages/playground/app/pages/todo/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const store = useStore()
 
-const { data: todos } = await store.Todo.queryMany()
+const { data: todos, refresh } = await store.Todo.queryMany()
 
 const createTodo = store.Todo.createForm()
 const createInput = useTemplateRef('input')
@@ -40,6 +40,12 @@ createTodo.$onSuccess(() => {
           :loading="createTodo.$loading"
           :disabled="!createTodo.$valid"
         />
+
+        <UButton
+          icon="lucide:refresh-cw"
+          class="px-3"
+          @click="refresh()"
+        />
       </UButtonGroup>
     </UForm>
 

packages/vue/src/query.ts

@@ -83,7 +83,7 @@ export function createQuery<
     _result: result,
   }
 
-  async function load() {
+  async function load(force: boolean = false) {
     if (!isDisabled()) {
       loading.value = true
       error.value = null
@@ -93,13 +93,17 @@ export function createQuery<
         fetchPolicy = store.$getFetchPolicy(getOptions()?.fetchPolicy)
 
         // If fetchPolicy is `cache-and-fetch`, fetch in parallel
-        if (fetchPolicy === 'cache-and-fetch') {
+        if (!force && fetchPolicy === 'cache-and-fetch') {
           fetchMethod({
             ...finalOptions,
             fetchPolicy: 'fetch-only',
           } as FindOptions<TModel, TModelDefaults, TModelList> as any, meta.value)
         }
 
+        if (force) {
+          finalOptions.fetchPolicy = 'fetch-only'
+        }
+
         result.value = await fetchMethod(finalOptions, meta.value)
       }
       catch (e: any) {
@@ -126,7 +130,7 @@ export function createQuery<
 
   function refresh() {
     if (!loading.value) {
-      promise = load() as HybridPromise<VueQueryReturn<TModel, TModelDefaults, TModelList, TResult>>
+      promise = load(true) as HybridPromise<VueQueryReturn<TModel, TModelDefaults, TModelList, TResult>>
       Object.assign(promise, returnObject)
     }
     return promise