From 0cac5c710c242cd5f88d0843538740bb675af86f Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Thu, 10 Nov 2022 19:46:21 +1000
Subject: [PATCH] docs(api): add `useHydration` composable (#8768)

---
 .../3.api/1.composables/use-hydration.md      | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-hydration.md b/docs/content/3.api/1.composables/use-hydration.md
index c3684b0811f..d7d5a12ac0c 100644
--- a/docs/content/3.api/1.composables/use-hydration.md
+++ b/docs/content/3.api/1.composables/use-hydration.md
@@ -2,8 +2,37 @@
 
 Allows full control of the hydration cycle to set and receive data from the server.
 
-::ReadMore{link="/getting-started/data-fetching"}
-::
+`useHydration` is a built-in composable that provides a way to set data on the server side every time a new HTTP request is made and receive that data on the client side. This way `useHydration` allows you to take full control of the hydration cycle.
+
+## Type
+
+```ts [signature]
+useHydration <T> (key: string, get: () => T, set: (value: T) => void) => {}
+```
+
+You can use `useHydration()` within composables, plugins and components.
+
+`useHydration` accepts three parameters:
+
+- `key`
+
+  **Type**: `String`
+
+  `key` is a unique key that identifies the data in your Nuxt application
 
-::NeedContribution
+- `get`
+
+  **Type**: `Function`
+
+  `get` is a function that returns the value to set the initial data
+
+- `set`
+
+  **Type**: `Function`
+
+  `set` a function that receives the data on the client-side
+
+Once the initial data is returned using the `get` function on the server side, you can access that data within `nuxtApp.payload` using the unique key that is passed as the first parameter in `useHydration` composable.
+
+::ReadMore{link="/getting-started/data-fetching"}
 ::