diff --git a/docs/next/guides/fetching-data.mdx b/docs/next/guides/fetching-data.mdx
index 3798b436d..92f052140 100644
--- a/docs/next/guides/fetching-data.mdx
+++ b/docs/next/guides/fetching-data.mdx
@@ -127,11 +127,11 @@ This will ensure Faust.js uses the correct client to make requests on your behal
## Using the Client to Make Queries
-Assuming you have created a client using the Faust.js `getClient` function, you will be able to take advantage of many of the added features that Faust.js provides, and also the general features provided by GQty. You can read our [hooks for fething data reference](../reference/custom-hooks) for examples on how to use some of the built-in hooks using the Faust.js client, but the client will support any query to your Headless WordPress API. Let's look at a few examples of how to use the client to make queries.
+Assuming you have created a client using the Faust.js `getClient` function, you will be able to take advantage of many of the added features that Faust.js provides, and also the general features provided by GQty. You can read our [hooks for fetching data reference](../reference/hooks) for examples on how to use some of the built-in hooks using the Faust.js client, but the client will support any query to your Headless WordPress API. Let's look at a few examples of how to use the client to make queries.
### The useQuery Hook
-If you are not able to use one of the [WordPress-specific hooks](../reference/custom-hooks) you can use the `useQuery` hook to make a query to the Headless WordPress API. This hook is useful for making any query supported by your Headless WordPress API. It essentially exposes your entire generated GQL schema to you for you to use what you need. For example, say you have a `Header` component and you want to fetch menu items from your "Primary" menu in WordPress. You could do so as follows:
+If you are not able to use one of the [WordPress-specific hooks](../reference/hooks) you can use the `useQuery` hook to make a query to the Headless WordPress API. This hook is useful for making any query supported by your Headless WordPress API. It essentially exposes your entire generated GQL schema to you for you to use what you need. For example, say you have a `Header` component and you want to fetch menu items from your "Primary" menu in WordPress. You could do so as follows:
```tsx title=src/components/Header.tsx {4,12-15,30-36}
import React from 'react';
@@ -222,7 +222,8 @@ export function PostForm() {
content: content.value,
},
});
- }}>
+ }}
+ >
@@ -269,15 +270,15 @@ The `logQueries` function returns a function that you can call to turn the log o
```ts
if (process.env.NODE_ENV === 'development') {
- const unsubscribe = logQueries(client)
+ const unsubscribe = logQueries(client);
- // queries are now logging
- // ...
+ // queries are now logging
+ // ...
- unsubscribe();
+ unsubscribe();
- // queries no longer log
- // ...
+ // queries no longer log
+ // ...
}
```
diff --git a/docs/next/reference/expected-url-params.mdx b/docs/next/reference/expected-url-params.mdx
index 312fa782c..20496f8af 100644
--- a/docs/next/reference/expected-url-params.mdx
+++ b/docs/next/reference/expected-url-params.mdx
@@ -4,7 +4,7 @@ title: Expected URL Params
description: Faust.js has built-in URL params that it expects to be present in the URL, making it easier to get data from Headless WordPress.
---
-When querying WordPress for data you are often going to use pieces of the current URL to determine what type of request to make. For example, if you have a list of posts in your site at `/posts` and your `Hello World` post can be found at `/posts/hello-world`, then the assumption is your `Hello World` post slug is `hello-world`. However, you still need a way to get the `hello-world` value from the URL in order to make a requests for the post. With Next.js you do this using `params` of [Static Props Context](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) or [Server Side Props Context](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering). Faust.js takes this one step further and has some predefined param names that you can use in order to have Faust.js find the URL params and make requests on your behalf. A lot of this is documented in our [hooks reference](./custom-hooks). In general our hooks work based on an expected URL param of the content type and either `Id`, `Slug`, or `Uri` at the end. Below is the interface we look for:
+When querying WordPress for data you are often going to use pieces of the current URL to determine what type of request to make. For example, if you have a list of posts in your site at `/posts` and your `Hello World` post can be found at `/posts/hello-world`, then the assumption is your `Hello World` post slug is `hello-world`. However, you still need a way to get the `hello-world` value from the URL in order to make a requests for the post. With Next.js you do this using `params` of [Static Props Context](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) or [Server Side Props Context](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering). Faust.js takes this one step further and has some predefined param names that you can use in order to have Faust.js find the URL params and make requests on your behalf. A lot of this is documented in our [hooks reference](./hooks). In general our hooks work based on an expected URL param of the content type and either `Id`, `Slug`, or `Uri` at the end. Below is the interface we look for:
```tsx
interface Params {
diff --git a/docs/next/reference/hooks/hooks.mdx b/docs/next/reference/hooks/hooks.mdx
new file mode 100644
index 000000000..3ed352394
--- /dev/null
+++ b/docs/next/reference/hooks/hooks.mdx
@@ -0,0 +1,15 @@
+---
+slug: /next/reference/hooks
+title: Hooks
+description: Hooks for Faust.js
+---
+
+Faust.js provides a number of hooks that make interacting with your headless WordPress site a little easier.
+
+- [`usePost`](/next/reference/hooks/usePost): Fetch a post from WordPress
+- [`usePosts`](/next/reference/hooks/usePosts): Fetch multiple posts from WordPress
+- [`usePage`](/next/reference/hooks/usePage): Fetch a page from WordPress
+- [`usePreview`](/next/reference/hooks/usePreview): Fetch preview data from WordPress
+- [`useAuth`](/next/reference/hooks/useAuth): Facilitate authentication with WordPress
+- [`useLogin`](/next/reference/hooks/useLogin): Facilitate login with WordPress
+- [`useLogout`](/next/reference/hooks/useLogout): Facilitate logout with WordPress
diff --git a/docs/tutorial/querying-data.mdx b/docs/tutorial/querying-data.mdx
index 85168f8e3..c34b94b95 100644
--- a/docs/tutorial/querying-data.mdx
+++ b/docs/tutorial/querying-data.mdx
@@ -12,7 +12,7 @@ In this tutorial, we'll use the client we created in the previous tutorial to qu
## Using The Client Hooks
-The client we created in the previous tutorial gives us access to helpful [React Hooks](../next/reference/custom-hooks) for easily querying data from WordPress.
+The client we created in the previous tutorial gives us access to helpful [React Hooks](../next/reference/hooks) for easily querying data from WordPress.
### Get Posts Using `usePosts` Hook
@@ -96,9 +96,9 @@ Once those changes are made, navigate to [http://localhost:3000/posts](http://lo
### Get Data Using The `useQuery` Hook
-While Faust.js provides [custom hooks](../next/reference/custom-hooks) for fetching data like posts, pages, etc, sometimes you need to fetch data outside of the scope of the custom hooks.
+While Faust.js provides [custom hooks](../next/reference/hooks) for fetching data like posts, pages, etc, sometimes you need to fetch data outside of the scope of the custom hooks.
-That is where the [`useQuery`](../next/reference/custom-hooks#custom-queries-and-mutations) hook comes in. This is a GQty hook that gives access to your entire schema.
+That is where the [`useQuery`](../next/reference/hooks/gqty-hooks) hook comes in. This is a GQty hook that gives access to your entire schema.
Let's display the site title and description using the `useQuery` hook.
diff --git a/internal/website/sidebars.js b/internal/website/sidebars.js
index f424d7bf1..977877944 100644
--- a/internal/website/sidebars.js
+++ b/internal/website/sidebars.js
@@ -105,6 +105,11 @@ module.exports = {
type: 'category',
label: 'Hooks',
items: [
+ {
+ type: 'doc',
+ label: 'Hooks Intro',
+ id: 'next/reference/hooks/hooks',
+ },
{
type: 'doc',
label: 'usePost Hook',
diff --git a/internal/website/src/components/Features/HomepageFeatures.js b/internal/website/src/components/Features/HomepageFeatures.js
index 5cac15034..9408ba405 100644
--- a/internal/website/src/components/Features/HomepageFeatures.js
+++ b/internal/website/src/components/Features/HomepageFeatures.js
@@ -49,7 +49,7 @@ const FeatureList = [
description: (
<>Fetch posts, categories, pages, and more using standard URL params.>
),
- link: '/docs/next/reference/custom-hooks',
+ link: '/docs/next/reference/hooks',
},
{
title: 'Custom Post Types',
diff --git a/packages/next/src/gqty/hooks/index.ts b/packages/next/src/gqty/hooks/index.ts
index 53683fb94..9bc57de02 100644
--- a/packages/next/src/gqty/hooks/index.ts
+++ b/packages/next/src/gqty/hooks/index.ts
@@ -103,7 +103,7 @@ export interface NextClientHooks
/**
* GQty hook to make any query request to the Headless Wordpress API.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#custom-queries-and-mutations
+ * @see https://faustjs.org/docs/next/reference/hooks/gqty-hooks
*/
useQuery: ReactClient['useQuery'];