From 9a0bf4f49a760c6d9a73cf9050b76318dcbd58eb Mon Sep 17 00:00:00 2001
From: Johann Schopplich <mail@johannschopplich.com>
Date: Sun, 1 Sep 2024 08:46:43 +0200
Subject: [PATCH] docs: add `clear` method

---
 README.md                            |  2 +-
 docs/api/use-fetch-like.md           | 15 +++++++++++++--
 docs/guide/getting-started.md        |  2 +-
 playground/pages/jsonPlaceholder.vue |  6 ++----
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 9cf946b..64b2819 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ Use these composables in your templates or components:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>
diff --git a/docs/api/use-fetch-like.md b/docs/api/use-fetch-like.md
index 2e28079..5662d5e 100644
--- a/docs/api/use-fetch-like.md
+++ b/docs/api/use-fetch-like.md
@@ -15,7 +15,7 @@ The composable supports every [`useAsyncData` option](https://nuxt.com/docs/api/
 - `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.
@@ -91,6 +91,17 @@ const { data } = await useMyApiData('posts', {
 The key can be a reactive value, e.g. a computed property.
 :::
 
+To clear the cache for a specific request, use the `clear` function. You can then call `refresh` to fetch the data again:
+
+```ts
+const { data, refresh, clear } = await useMyApiData('posts')
+
+async function invalidateAndRefresh() {
+  clear()
+  await refresh()
+}
+```
+
 ## Examples
 
 ::: info
@@ -117,7 +128,7 @@ export default defineNuxtConfig({
 
 ```vue
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 4469456..b297935 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -91,7 +91,7 @@ Use these composables in your templates or components:
 
 ```vue
 <script setup lang="ts">
-const { data, pending, refresh, error } = await useJsonPlaceholderData('posts/1')
+const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
 </script>
 
 <template>
diff --git a/playground/pages/jsonPlaceholder.vue b/playground/pages/jsonPlaceholder.vue
index 8b5ed14..28ca28f 100644
--- a/playground/pages/jsonPlaceholder.vue
+++ b/playground/pages/jsonPlaceholder.vue
@@ -6,7 +6,7 @@ import type { NuxtError } from '#app'
 const route = useRoute()
 
 // Intended for similar use cases as `useFetch`
-const { data, pending, error } = await useJsonPlaceholderData<JsonPlaceholderComment>(
+const { data, status, error } = await useJsonPlaceholderData<JsonPlaceholderComment>(
   'comments',
   {
     query: computed(() => ({
@@ -72,9 +72,7 @@ async function onSubmit() {
     <h2>useJsonPlaceholderData</h2>
     <p>Responses are cached by default.</p>
     <p>
-      Status:
-      <mark v-if="pending">pending</mark>
-      <code v-else>fetched</code>
+      Status: <mark>{{ status }}</mark>
     </p>
     <p>
       <button @click="incrementPostId()">