{post?.title()}
- -Recent Posts
--
- {posts?.nodes.map((post) => (
-
- {post.title()} - ))} -
Recent Posts
--
- {posts?.nodes.map((post) => (
-
- {post.title()} - ))} -
{page?.title()}
- -{page?.title()}
- -loading...
; - } - - if (result.type === 'page') { - if (!result.page) { - return <>Not Found; - } - - returnLoading...
;
- }
-
- return Authenticated content
;
-}
-```
-
-Additionally, the example below shows how to use `useAuth` with the `shouldRedirect` option set to `false`. This will disable the automatic redirect to the appropriate URL to authenticate, and allows you to control how the page's content is rendered in an unauthenticated state:
-
-```tsx title=src/pages/gated-content.tsx {5-7,13-15}
-import { client } from 'client';
-
-export default function Gated() {
- const { useAuth } = client.auth;
- const { isLoading, isAuthenticated, authResult } = useAuth({
- shouldRedirect: false,
- });
-
- if (isLoading) {
- return Loading...
;
- }
-
- if (!isAuthenticated) {
- return You are not authenticated! Please login.
;
- }
-
- return Authenticated content
;
-}
-```
-
-`useAuth` exports an object with the following properties:
-
-- `isLoading`: A boolean that indicates whether the `useAuth` function is currently checking if a user is authenticated.
-- `isAuthenticated`: A boolean that indicates whether the user is authenticated.
-- `authResult`: The result from checking if there is an authenticated user.
-
- If there is an authenticated user, the `authResult` will be `true`. Otherwise, the `authResult` will be an object with the following properties:
-
- ```js title="The authResult object when there is no authenticated user"
- {
- /**
- * An absolute URL to the WordPress backend that the user should be redirected to in order to authenticate.
- * This property is used for the "redirect" based authentication strategy
- */
- redirect: 'xxxx';
-
- /*
- * A relative URL path to the local login page as specified in the `loginPagePath` option.
- * This property is used for the "local" based authentication strategy
- */
- login: 'xxxx';
- }
- ```
-
- The `authResult` can be helpful if you want to handle the redirection yourself, instead of the `useAuth` hook.
-
-### `useLogin`
-
-The `useLogin` hook provides an abstraction around obtaining an authorization code and fetching refresh/access tokens from WordPress, thus logging in a user to your Headless frontend.
-
-The following example shows how to use the `useLogin` hook to login a user:
-
-```tsx title=pages/login.tsx {9,18}
-import { client } from 'client';
-import { useState } from 'react';
-
-export default function Login() {
- const { useLogin } = client.auth;
- const [usernameEmail, setUserNameEmail] = useState('');
- const [password, setPassword] = useState('');
-
- const { login, isLoading, data, error } = useLogin();
-
- const errorMessage = data?.error || error?.message;
-
- return (
-
- );
-}
-```
-
-`useLogin` exports an object with the following properties:
-
-- `login`: A function that initiates a request to obtain an authorization code via a GraphQL mutation by the provided `usernameEmail` and `password` arguments. Note that the `usernameEmail` argument is a string that can be either a username or an email address.
-- `isLoading`: A boolean that indicates whether the `login` function is currently fetching an authorization code.
-- `data`: An object that contains the response data from the `login` function.
-- `error`: An object that contains the error data from the `login` function.
-
-When an authorization code is successfully fetched, `useLogin` will facilitate the request to the WPE Headless authorize endpoint to obtain the refresh/access tokens. From there, the tokens are stored properly, and the user is logged in.
-
-Additionally, if the login page URL contains a `redirect_uri` query parameter, the user will be redirected to the `redirect_uri` URL after the login is successful.
-
-### `useLogout`
-
-The `useLogout` hook provides a way to logout a user from your headless frontend.
-
-The following example shows how you could use the `useLogout` hook in a `logout.tsx` page:
-
-```tsx title="src/pages/logout.tsx"
-import { client } from 'client';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-export default function Logout() {
- const router = useRouter();
- const { isLoggedOut, logout } = client.auth.useLogout();
- useEffect(() => {
- if (isLoggedOut !== undefined) {
- return;
- }
-
- // Initiate the logout process.
- // This could also be called on a button click, for example, in a nav menu.
- logout();
- }, [isLoggedOut, logout]);
-
- useEffect(() => {
- if (isLoggedOut) {
- // The user was successfully logged out. Redirect them.
- router.push('/');
- }
- }, [router, isLoggedOut]);
- return <>Logging out...;
-}
-```
-
-`useLogout` exports an object with the following properties:
-
-- `logout`: a function that initiates a request to logout the user by clearing their refresh token from the cookie.
-- `isLoggedOut`: `undefiend` until the `logout` function is called. Then a `boolean` that indicates whether the user was successfully logged out
-- `isLoading`: A boolean that indicates whether the `logout` function is currently logging out the user.
-
-### Custom Queries and Mutations
-
-GQty publishes the following hooks that can be used for custom queries, mutations, or subscriptions:
-
-- [`useQuery`](https://gqty.dev/docs/react/fetching-data#usequery)
- - Make any query request to the Headless WordPress API
-- [`useLazyQuery`](https://gqty.dev/docs/react/fetching-data#uselazyquery)
-- [`useTransactionQuery`](https://gqty.dev/docs/react/fetching-data#usetransactionquery)
-- [`useMutation`](https://gqty.dev/docs/react/mutations#usemutation)
- - Make any mutation request to the Headless WordPress API
-- [`useSubscription`](https://gqty.dev/docs/react/subscriptions#usesubscription)
-
-For example, you may want to get a list of your content types:
-
-```tsx
-const { useQuery } = client;
-
-const contentTypes = useQuery().contentTypes()?.nodes;
-```
-
-`useQuery`, along with all the other hooks, are typed. So you'll be able to see exactly what kind of data you have access to via your IDE's intellisense.
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/gqty-hooks.mdx b/docs/next/reference/hooks/gqty-hooks.mdx
new file mode 100644
index 000000000..f9994a0fd
--- /dev/null
+++ b/docs/next/reference/hooks/gqty-hooks.mdx
@@ -0,0 +1,25 @@
+---
+slug: /next/reference/hooks/gqty-hooks
+title: GQty Hooks
+description: How to use the GQty related hooks for fetching data
+---
+
+There may be instances where the built in Faust.js hooks do not satisfy your data fetching requirements. Thankfully, GQty publishes the following hooks that can be used for custom queries, mutations, or subscriptions:
+
+- [`useQuery`](https://gqty.dev/docs/react/fetching-data#usequery)
+ - Make any query request to the Headless WordPress API
+- [`useLazyQuery`](https://gqty.dev/docs/react/fetching-data#uselazyquery)
+- [`useTransactionQuery`](https://gqty.dev/docs/react/fetching-data#usetransactionquery)
+- [`useMutation`](https://gqty.dev/docs/react/mutations#usemutation)
+ - Make any mutation request to the Headless WordPress API
+- [`useSubscription`](https://gqty.dev/docs/react/subscriptions#usesubscription)
+
+For example, you may want to get a list of your content types:
+
+```tsx
+const { useQuery } = client;
+
+const contentTypes = useQuery().contentTypes()?.nodes;
+```
+
+`useQuery`, along with all the other hooks, are typed. So you'll be able to see exactly what kind of data you have access to via your IDE's intellisense.
diff --git a/docs/next/reference/hooks/hooks.mdx b/docs/next/reference/hooks/hooks.mdx
new file mode 100644
index 000000000..c58d87eb2
--- /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`](/docs/next/reference/hooks/usePost): Fetch a post from WordPress
+- [`usePosts`](/docs/next/reference/hooks/usePosts): Fetch multiple posts from WordPress
+- [`usePage`](/docs/next/reference/hooks/usePage): Fetch a page from WordPress
+- [`usePreview`](/docs/next/reference/hooks/usePreview): Fetch preview data from WordPress
+- [`useAuth`](/docs/next/reference/hooks/useAuth): Facilitate authentication with WordPress
+- [`useLogin`](/docs/next/reference/hooks/useLogin): Facilitate login with WordPress
+- [`useLogout`](/docs/next/reference/hooks/useLogout): Facilitate logout with WordPress
diff --git a/docs/next/reference/hooks/useAuth.mdx b/docs/next/reference/hooks/useAuth.mdx
new file mode 100644
index 000000000..367e231d4
--- /dev/null
+++ b/docs/next/reference/hooks/useAuth.mdx
@@ -0,0 +1,86 @@
+---
+slug: /next/reference/hooks/useAuth
+title: useAuth
+description: The useAuth hook provides a way to ensure that the user is authenticated.
+---
+
+The `useAuth` hook provides a way to guarantee a users' authentication state, thus allowing you to control how a page's content is rendered.
+
+The `useAuth` hook accepts 1 argument of `UseAuthOptions`, which is an object that contains the following properties:
+
+```ts
+const options = {
+ // Specify if the useAuth hook should facilitate the redirect to the appropriate url.
+ shouldRedirect: true;
+}
+```
+
+By default, if the user is not authenticated, the page will redirect to the WordPress backend if the `authType` is `redirect`, and to the `loginPagePath` if `authType` is `local`.
+
+However, if the `shouldRedirect` option is `false`, the `useAuth` hook will **not** facilitate the redirect.
+
+The example below shows how to use the `useAuth` hook to render a page that requires authentication. If a user is authenticated, they will be shown the content. Otherwise, they will be redirected to the appropriate URL to authenticate:
+
+```tsx title=src/pages/gated-content.tsx {5}
+import { client } from 'client';
+
+export default function Gated() {
+ const { useAuth } = client.auth;
+ const { isLoading, isAuthenticated } = useAuth();
+
+ if (isLoading) {
+ return Loading...
;
+ }
+
+ return Authenticated content
;
+}
+```
+
+Additionally, the example below shows how to use `useAuth` with the `shouldRedirect` option set to `false`. This will disable the automatic redirect to the appropriate URL to authenticate, and allows you to control how the page's content is rendered in an unauthenticated state:
+
+```tsx title=src/pages/gated-content.tsx {5-7,13-15}
+import { client } from 'client';
+
+export default function Gated() {
+ const { useAuth } = client.auth;
+ const { isLoading, isAuthenticated, authResult } = useAuth({
+ shouldRedirect: false,
+ });
+
+ if (isLoading) {
+ return Loading...
;
+ }
+
+ if (!isAuthenticated) {
+ return You are not authenticated! Please login.
;
+ }
+
+ return Authenticated content
;
+}
+```
+
+`useAuth` exports an object with the following properties:
+
+- `isLoading`: A boolean that indicates whether the `useAuth` function is currently checking if a user is authenticated.
+- `isAuthenticated`: A boolean that indicates whether the user is authenticated.
+- `authResult`: The result from checking if there is an authenticated user.
+
+ If there is an authenticated user, the `authResult` will be `true`. Otherwise, the `authResult` will be an object with the following properties:
+
+ ```js title="The authResult object when there is no authenticated user"
+ {
+ /**
+ * An absolute URL to the WordPress backend that the user should be redirected to in order to authenticate.
+ * This property is used for the "redirect" based authentication strategy
+ */
+ redirect: 'xxxx';
+
+ /*
+ * A relative URL path to the local login page as specified in the `loginPagePath` option.
+ * This property is used for the "local" based authentication strategy
+ */
+ login: 'xxxx';
+ }
+ ```
+
+ The `authResult` can be helpful if you want to handle the redirection yourself, instead of the `useAuth` hook.
diff --git a/docs/next/reference/hooks/useLogin.mdx b/docs/next/reference/hooks/useLogin.mdx
new file mode 100644
index 000000000..eb2570d22
--- /dev/null
+++ b/docs/next/reference/hooks/useLogin.mdx
@@ -0,0 +1,77 @@
+---
+slug: /next/reference/hooks/useLogin
+title: useLogin
+description: The useLogin hook provides a way to log in a user
+---
+
+The `useLogin` hook provides an abstraction around obtaining an authorization code and fetching refresh/access tokens from WordPress, thus logging in a user to your Headless frontend.
+
+The following example shows how to use the `useLogin` hook to login a user:
+
+```tsx title=pages/login.tsx {9,18}
+import { client } from 'client';
+import { useState } from 'react';
+
+export default function Login() {
+ const { useLogin } = client.auth;
+ const [usernameEmail, setUserNameEmail] = useState('');
+ const [password, setPassword] = useState('');
+
+ const { login, isLoading, data, error } = useLogin();
+
+ const errorMessage = data?.error || error?.message;
+
+ return (
+
+ );
+}
+```
+
+`useLogin` exports an object with the following properties:
+
+- `login`: A function that initiates a request to obtain an authorization code via a GraphQL mutation by the provided `usernameEmail` and `password` arguments. Note that the `usernameEmail` argument is a string that can be either a username or an email address.
+- `isLoading`: A boolean that indicates whether the `login` function is currently fetching an authorization code.
+- `data`: An object that contains the response data from the `login` function.
+- `error`: An object that contains the error data from the `login` function.
+
+When an authorization code is successfully fetched, `useLogin` will facilitate the request to the WPE Headless authorize endpoint to obtain the refresh/access tokens. From there, the tokens are stored properly, and the user is logged in.
+
+Additionally, if the login page URL contains a `redirect_uri` query parameter, the user will be redirected to the `redirect_uri` URL after the login is successful.
diff --git a/docs/next/reference/hooks/useLogout.mdx b/docs/next/reference/hooks/useLogout.mdx
new file mode 100644
index 000000000..e0b578613
--- /dev/null
+++ b/docs/next/reference/hooks/useLogout.mdx
@@ -0,0 +1,42 @@
+---
+slug: /next/reference/hooks/useLogout
+title: useLogout Hook
+description: The useLogout hook provides a way to logout a user
+---
+
+The `useLogout` hook provides a way to logout a user from your headless frontend.
+
+The following example shows how you could use the `useLogout` hook in a `logout.tsx` page:
+
+```tsx title="src/pages/logout.tsx"
+import { client } from 'client';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+export default function Logout() {
+ const router = useRouter();
+ const { isLoggedOut, logout } = client.auth.useLogout();
+ useEffect(() => {
+ if (isLoggedOut !== undefined) {
+ return;
+ }
+
+ // Initiate the logout process.
+ // This could also be called on a button click, for example, in a nav menu.
+ logout();
+ }, [isLoggedOut, logout]);
+
+ useEffect(() => {
+ if (isLoggedOut) {
+ // The user was successfully logged out. Redirect them.
+ router.push('/');
+ }
+ }, [router, isLoggedOut]);
+ return <>Logging out...;
+}
+```
+
+`useLogout` exports an object with the following properties:
+
+- `logout`: a function that initiates a request to logout the user by clearing their refresh token from the cookie.
+- `isLoggedOut`: `undefiend` until the `logout` function is called. Then a `boolean` that indicates whether the user was successfully logged out
+- `isLoading`: A boolean that indicates whether the `logout` function is currently logging out the user.
diff --git a/docs/next/reference/hooks/usePage.mdx b/docs/next/reference/hooks/usePage.mdx
new file mode 100644
index 000000000..8e1efb9ab
--- /dev/null
+++ b/docs/next/reference/hooks/usePage.mdx
@@ -0,0 +1,57 @@
+---
+slug: /next/reference/hooks/usePage
+title: usePage Hook
+description: The usePage hook provides a standard way to get a wordpress page
+---
+
+The `usePage` hook provides the standard interface for getting a page from your Headless WordPress API. It also allows you to pass-in no arguments. When you do not pass arguments into `usePage` it will attempt to look at the URL params in order to determine how to get a page from your Headless WordPress API. In Next.js this means you will need to name your page file in a particular way in order to get the proper URL params. Below are the possible names that will work automatically with Faust.js:
+
+- `[pageId].tsx`
+- `[...pageUri].tsx`
+
+Using the above names, Faust.js is able to apply the following logic to determine how to get a page from your Headless WordPress API:
+
+1. If `pageId` is found in the URL params, Faust.js makes a request to retrieve a `page` from WordPress by `ID`
+1. If `pageUri` is found in the URL params, Faust.js makes a request to retrieve a `page` from WordPress by `URI`
+
+The following is an example of how to use the `usePage` hook with a `pageUri`:
+
+```tsx title=/src/pages/[...pageUri].tsx {5,6}
+import { getNextStaticProps } from '@faustjs/next';
+import { client } from 'client';
+
+export default function Page() {
+ const { usePage } = client;
+ const page = usePage();
+
+ return (
+ {page?.title()}
+ +{page?.title()}
+ +{post?.title()}
+ +{post?.title()}
+ +Recent Posts
+-
+ {posts?.nodes.map((post) => (
+
- {post.title()} + ))} +
Recent Posts
+-
+ {posts?.nodes.map((post) => (
+
- {post.title()} + ))} +
loading...
; + } + + if (result.type === 'page') { + if (!result.page) { + return <>Not Found; + } + + return
@@ -40,7 +40,7 @@ export default function PostsPage() {
Let's also update the `Post` component to accept a `post` prop:
```tsx title=components/post.tsx {1,4,8}
-import { Post as PostType } from "../client";
+import { Post as PostType } from '../client';
export interface PostProps {
post: PostType;
@@ -63,18 +63,18 @@ A couple of things to note here: The schema generated in the previous tutorial e
Additionally, notice the `title` and `content` properties are functions. This is because you are able to specify if you want the rendered content or raw content. For example:
```tsx
-post.title({format: PostObjectFieldFormatEnum.RAW})
+post.title({ format: PostObjectFieldFormatEnum.RAW });
```
Let's go back to the `pages/posts.tsx` component and hook up the data we're fetching to the `Post` component:
```tsx title=pages/posts.tsx {12}
-import { client } from '../client'
-import Post from "../components/post";
+import { client } from '../client';
+import Post from '../components/post';
export default function PostsPage() {
- const {usePosts} = client
- const posts = usePosts()?.nodes
+ const { usePosts } = client;
+ const posts = usePosts()?.nodes;
return (
@@ -89,19 +89,22 @@ export default function PostsPage() {
Once those changes are made, navigate to [http://localhost:3000/posts](http://localhost:3000/posts) in your browser and you should see your posts.
-
+
### 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.
```tsx title=pages/posts.tsx {5,10,11}
-import { client } from "../client";
-import Post from "../components/post";
+import { client } from '../client';
+import Post from '../components/post';
export default function PostsPage() {
const { usePosts, useQuery } = client;
diff --git a/internal/website/sidebars.js b/internal/website/sidebars.js
index 4da1ad067..977877944 100644
--- a/internal/website/sidebars.js
+++ b/internal/website/sidebars.js
@@ -85,6 +85,11 @@ module.exports = {
label: 'Authentication',
id: 'next/guides/authentication',
},
+ {
+ type: 'doc',
+ label: 'Logging Queries',
+ id: 'next/guides/logging-queries',
+ },
{
type: 'doc',
label: '404s',
@@ -97,9 +102,55 @@ module.exports = {
label: 'Reference',
items: [
{
- type: 'doc',
- label: 'Custom Hooks',
- id: 'next/reference/custom-hooks',
+ type: 'category',
+ label: 'Hooks',
+ items: [
+ {
+ type: 'doc',
+ label: 'Hooks Intro',
+ id: 'next/reference/hooks/hooks',
+ },
+ {
+ type: 'doc',
+ label: 'usePost Hook',
+ id: 'next/reference/hooks/usePost',
+ },
+ {
+ type: 'doc',
+ label: 'usePosts Hook',
+ id: 'next/reference/hooks/usePosts',
+ },
+ {
+ type: 'doc',
+ label: 'usePage Hook',
+ id: 'next/reference/hooks/usePage',
+ },
+ {
+ type: 'doc',
+ label: 'usePreview Hook',
+ id: 'next/reference/hooks/usePreview',
+ },
+ {
+ type: 'doc',
+ label: 'useAuth Hook',
+ id: 'next/reference/hooks/useAuth',
+ },
+ {
+ type: 'doc',
+ label: 'useLogin Hook',
+ id: 'next/reference/hooks/useLogin',
+ },
+ {
+ type: 'doc',
+ label: 'useLogout Hook',
+ id: 'next/reference/hooks/useLogout',
+ },
+ {
+ type: 'doc',
+ label: 'GQty Hooks',
+ id: 'next/reference/hooks/gqty-hooks',
+ },
+ ],
},
{
type: 'doc',
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/CHANGELOG.md b/packages/next/CHANGELOG.md
index 47a074ad8..c6cc8b280 100644
--- a/packages/next/CHANGELOG.md
+++ b/packages/next/CHANGELOG.md
@@ -21,7 +21,7 @@
- 068f3c3: Introduced the `useLogout` hook to facilitate logging out a user
- See https://faustjs.org/docs/next/reference/custom-hooks#uselogout for more details.
+ See https://faustjs.org/docs/next/reference/hooks/useLogout for more details.
- Updated dependencies [068f3c3]
- @faustjs/core@0.12.3
diff --git a/packages/next/src/gqty/hooks/index.ts b/packages/next/src/gqty/hooks/index.ts
index 9a304c7c7..9bc57de02 100644
--- a/packages/next/src/gqty/hooks/index.ts
+++ b/packages/next/src/gqty/hooks/index.ts
@@ -35,14 +35,14 @@ interface WithAuthHooks {
/**
* Faust.js hook to get preview data for a page or post.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#usepreview
+ * @see https://faustjs.org/docs/next/reference/hooks/usePreview
*/
usePreview(): UsePreviewResponse;
/**
* Faust.js hook to ensure a user is authenticated.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#useauth
+ * @see https://faustjs.org/docs/next/reference/hooks/useAuth
*/
useAuth(options?: UseAuthOptions): {
isLoading: boolean;
@@ -57,7 +57,7 @@ interface WithAuthHooks {
* Faust.js hook to facilitate a login request.
*
* @param {UseLoginOptions} [options]
- * @see https://faustjs.org/docs/next/reference/custom-hooks#uselogin
+ * @see https://faustjs.org/docs/next/reference/hooks/useLogin
*/
useLogin(options?: UseLoginOptions): {
login: (usernameEmail: string, password: string) => Promise;
@@ -80,7 +80,7 @@ interface WithAuthHooks {
/**
* Faust.js hook to facilitate a logout request.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#uselogout
+ * @see https://faustjs.org/docs/next/reference/hooks/useLogout
*/
useLogout(): {
isLoading: boolean;
@@ -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'];
@@ -119,7 +119,7 @@ export interface NextClientHooks
/**
* Faust.js hook to get a list of posts.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#useposts
+ * @see https://faustjs.org/docs/next/reference/hooks/usePosts
*/
usePosts(
args?: Parameters[0],
@@ -128,7 +128,7 @@ export interface NextClientHooks
/**
* Faust.js hook to get a single post.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#usepost
+ * @see https://faustjs.org/docs/next/reference/hooks/usePost
*/
usePost(
args?: Parameters[0],
@@ -137,7 +137,7 @@ export interface NextClientHooks
/**
* Faust.js hook to get a single page.
*
- * @see https://faustjs.org/docs/next/reference/custom-hooks#usepage
+ * @see https://faustjs.org/docs/next/reference/hooks/usePage
*/
usePage(
args?: Parameters[0],
+
### 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.
```tsx title=pages/posts.tsx {5,10,11}
-import { client } from "../client";
-import Post from "../components/post";
+import { client } from '../client';
+import Post from '../components/post';
export default function PostsPage() {
const { usePosts, useQuery } = client;
diff --git a/internal/website/sidebars.js b/internal/website/sidebars.js
index 4da1ad067..977877944 100644
--- a/internal/website/sidebars.js
+++ b/internal/website/sidebars.js
@@ -85,6 +85,11 @@ module.exports = {
label: 'Authentication',
id: 'next/guides/authentication',
},
+ {
+ type: 'doc',
+ label: 'Logging Queries',
+ id: 'next/guides/logging-queries',
+ },
{
type: 'doc',
label: '404s',
@@ -97,9 +102,55 @@ module.exports = {
label: 'Reference',
items: [
{
- type: 'doc',
- label: 'Custom Hooks',
- id: 'next/reference/custom-hooks',
+ type: 'category',
+ label: 'Hooks',
+ items: [
+ {
+ type: 'doc',
+ label: 'Hooks Intro',
+ id: 'next/reference/hooks/hooks',
+ },
+ {
+ type: 'doc',
+ label: 'usePost Hook',
+ id: 'next/reference/hooks/usePost',
+ },
+ {
+ type: 'doc',
+ label: 'usePosts Hook',
+ id: 'next/reference/hooks/usePosts',
+ },
+ {
+ type: 'doc',
+ label: 'usePage Hook',
+ id: 'next/reference/hooks/usePage',
+ },
+ {
+ type: 'doc',
+ label: 'usePreview Hook',
+ id: 'next/reference/hooks/usePreview',
+ },
+ {
+ type: 'doc',
+ label: 'useAuth Hook',
+ id: 'next/reference/hooks/useAuth',
+ },
+ {
+ type: 'doc',
+ label: 'useLogin Hook',
+ id: 'next/reference/hooks/useLogin',
+ },
+ {
+ type: 'doc',
+ label: 'useLogout Hook',
+ id: 'next/reference/hooks/useLogout',
+ },
+ {
+ type: 'doc',
+ label: 'GQty Hooks',
+ id: 'next/reference/hooks/gqty-hooks',
+ },
+ ],
},
{
type: 'doc',
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/CHANGELOG.md b/packages/next/CHANGELOG.md
index 47a074ad8..c6cc8b280 100644
--- a/packages/next/CHANGELOG.md
+++ b/packages/next/CHANGELOG.md
@@ -21,7 +21,7 @@
- 068f3c3: Introduced the `useLogout` hook to facilitate logging out a user
- See https://faustjs.org/docs/next/reference/custom-hooks#uselogout for more details.
+ See https://faustjs.org/docs/next/reference/hooks/useLogout for more details.
- Updated dependencies [068f3c3]
- @faustjs/core@0.12.3
diff --git a/packages/next/src/gqty/hooks/index.ts b/packages/next/src/gqty/hooks/index.ts
index 9a304c7c7..9bc57de02 100644
--- a/packages/next/src/gqty/hooks/index.ts
+++ b/packages/next/src/gqty/hooks/index.ts
@@ -35,14 +35,14 @@ interface WithAuthHooks