queriesにリアクティブな値が設定できない不具合を修正 (#10)

Author: dc7290

README.md

@@ -128,6 +128,37 @@ const { data: blogs } = await useMicroCMSGetList<Blog>({
 </script>
 ```
 
+#### Use reactive values for query parameters
+
+```vue
+<template>
+  <input type="text" v-model="queries.q" />
+</template>
+
+<script setup lang="ts">
+import type { MicroCMSImage } from 'microcms-js-sdk';
+
+type Blog = {
+  title: string;
+  eyecatch: MicroCMSImage;
+};
+
+const queries = reactive({
+  q: '',
+  fields: ['id', 'title', 'eyecatch'],
+});
+
+const { data: blogs, refresh } = await useMicroCMSGetList<Blog>({
+  endpoint: 'blogs',
+  queries,
+});
+
+watch(queries, () => {
+  refresh();
+});
+</script>
+```
+
 # LICENSE
 
 Apache-2.0

src/runtime/composables/useMicroCMSGet.ts

@@ -6,6 +6,7 @@ import {
 } from 'microcms-js-sdk';
 import { useFetch, useRuntimeConfig } from 'nuxt/app';
 import type { FetchOptions as _FetchOptions } from 'ofetch';
+import { computed } from 'vue';
 
 import { useMicroCMSUrl } from './useMicroCMSUrl';
 
@@ -41,13 +42,15 @@ const useMicroCMSGet = <T>(
   const baseURL = useMicroCMSUrl();
   const config = useRuntimeConfig();
 
-  const query: MicroCMSQueries | undefined = queries
-    ? {
-        ...queries,
-        fields: queries.fields?.toString(),
-        ids: queries.ids?.toString(),
-      }
-    : undefined;
+  const query = computed<MicroCMSQueries | undefined>(() =>
+    queries
+      ? {
+          ...queries,
+          fields: queries.fields?.toString(),
+          ids: queries.ids?.toString(),
+        }
+      : undefined
+  );
 
   return useFetch<T>(url, {
     ...fetchOptions,