docs: update caching guide

Author: johannschopplich

README.md

@@ -46,7 +46,7 @@ And send queries in your template:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useKql({
+const { data, refresh, error, status, clear } = await useKql({
   query: 'site'
 })
 </script>

docs/api/use-kql.md

@@ -51,16 +51,37 @@ type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
 - `data`: the result of the asynchronous function that is passed in.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
-- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
+- `status`: a string indicating the status of the data request (`'idle'`, `'pending'`, `'success'`, `'error'`).
 - `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
 
+## Caching
+
+By default, a [unique key is generated](/guide/caching) based in input parameters for each request to ensure that data fetching can be properly de-duplicated across requests. To disable caching, set the `cache` option to `false`:
+
+```ts
+const { data } = await useKql({ query: 'site' }, {
+  cache: false
+})
+```
+
+Clear the cache for a specific query by calling the `clear` function. This will remove the cached data for the query and allow the next request to fetch the data from the server:
+
+```ts
+const { data, refresh, clear } = await useKql({ query: 'site' })
+
+async function invalidateAndRefresh() {
+  clear()
+  await refresh()
+}
+```
+
 ## Example
 
 ```vue
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useKql({
+const { data, refresh, error, status, clear } = await useKql({
   query: 'site',
   select: ['title', 'children']
 })

docs/config/caching.md

@@ -18,6 +18,17 @@ const { data } = await useKql(
 )
 ```
 
+## Clearing the Cache
+
+```ts
+const { data, refresh, clear } = await useKql({ query: 'site' })
+
+async function invalidateAndRefresh() {
+  clear()
+  await refresh()
+}
+```
+
 ## Server-Side Caching
 
 Nuxt KQL lets you opt in to server-side caching of query responses. It does so by utilizing the [cache API](https://nitro.unjs.io/guide/cache) of Nuxt's underlying server engine, [Nitro](https://nitro.unjs.io). Query responses are cached in-memory by default, but you can use any storage mountpoints supported by Nitro. The full list of built-in storage mountpoints can be found in the [unstorage documentation](https://unstorage.unjs.io).

docs/guide/getting-started.md

@@ -62,7 +62,7 @@ Use the globally available [`useKql`](/api/use-kql) composable to send queries:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useKql({
+const { data, refresh, error, status, clear } = await useKql({
   query: 'site',
   select: {
     title: true,

docs/package.json

@@ -8,6 +8,6 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "vitepress": "^1.3.2"
+    "vitepress": "^1.3.4"
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-kql",
   "type": "module",
   "version": "1.5.0",
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.9.0",
   "description": "Kirby's Query Language API for Nuxt",
   "author": "Johann Schopplich <[email protected]>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "release": "bumpp"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
-    "@vueuse/core": "^10.11.0",
+    "@nuxt/kit": "^3.13.0",
+    "@vueuse/core": "^11.0.3",
     "defu": "^6.1.4",
     "kirby-types": "^0.7.1",
     "ofetch": "^1.3.4",
@@ -61,14 +61,14 @@
     "uint8array-extras": "^1.4.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/test-utils": "^3.14.0",
-    "@types/node": "^20.14.14",
-    "bumpp": "^9.4.2",
+    "@nuxt/eslint-config": "^0.5.4",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^20.16.2",
+    "bumpp": "^9.5.2",
     "destr": "^2.0.3",
-    "eslint": "^9.8.0",
-    "nuxt": "^3.12.4",
+    "eslint": "^9.9.1",
+    "nuxt": "^3.13.0",
     "typescript": "^5.5.4",
     "vitest": "^2.0.5"
   }