Skip to main content

Useful Hooks For Data Fetching With Faust.js

When you use getClient from Faust.js to generate a GQty client, you will get some additional hooks that you can use to make your client more useful and make fetching data from Headless WordPress easier. The following hooks are available on the client object generated by getClient.

usePost#

The usePost hook provides the standard interface for getting a post from your Headless WordPress API. It also allows you to pass-in no arguments. When you do not pass arguments into usePost it will attempt to look at the URL params in order to determine how to get a post from your Headless WordPress API. In Next.js this means you will need to name your post 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:

  • [postId].tsx
  • [postSlug].tsx
  • [...postUri].tsx

Using the above names, Faust.js is able to apply the following logic to determine how to get a post from your Headless WordPress API:

  1. If postId is found in the URL params, Faust.js makes a request to retrieve a post from WordPress by ID
  2. If postSlug is found in the URL params, Faust.js makes a request to retrieve a post from WordPress by SLUG
  3. If postUri is found in the URL params, Faust.js makes a request to retrieve a post from WordPress by URI

The following is an example of how to use the usePost hook with a postSlug:

/src/pages/posts/[postSlug].tsx
import { getNextStaticProps } from "@faustjs/next";
import { client } from "client";
export default function Page() {
const { usePost } = client;
const post = usePost();
return (
<article>
<h1>{post?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: post?.content() }} />
</article>
);
}

The above code will also work with postId and postUri depending upon what URL scheme you want to use. You may also want to fetch a specific post. Doing that might look similar to the following:

import { getNextStaticProps } from "@faustjs/next";
import { GetStaticPropsContext } from "next";
import { client, PostIdType } from "client";
export default function Page() {
const { usePost } = client;
const post = usePost({
id: "hello-world",
idType: PostIdType.SLUG,
});
return (
<article>
<h1>{post?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: post?.content() }} />
</article>
);
}

usePosts#

The usePosts hook provides the standard interface for getting a list of posts from your Headless WordPress API. It also allows you to pass-in no arguments. When you do not pass arguments into usePosts it will attempt to look at the URL params in order to determine how to get a list of posts from your Headless WordPress API. In Next.js this means you will need to name your post 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:

  1. If categoryId is found in the URL params, a request is made to retrieve a list of posts for a category by ID
  2. If categorySlug is found in the URL params, a request is made to retrieve a list of posts for a category by SLUG
  3. If no URL params are found, a request is made to retrieve a list of posts without any filters

The following is an example of how to use the usePosts hook with no URL params:

src/pages/index.tsx
import { getNextStaticProps } from "@faustjs/next";
import { client } from "client";
export default function Home() {
const { usePosts } = client;
const posts = usePosts({
first: 6,
});
return (
<>
<h2>Recent Posts</h2>
<ul>
{posts?.nodes.map((post) => (
<li key={post.id}>{post.title()}</li>
))}
</ul>
</>
);
}

The code above will get the first 6 posts from the Headless WordPress API. If you want to create a page that would pull posts associated with a specific category you can use the following code:

src/pages/category/[categorySlug].tsx
import { getNextStaticProps } from "@faustjs/next";
import { client } from "client";
export default function Home() {
const { usePosts } = client;
const posts = usePosts({
first: 6,
});
return (
<>
<h2>Recent Posts</h2>
<ul>
{posts?.nodes.map((post) => (
<li key={post.id}>{post.title()}</li>
))}
</ul>
</>
);
}

The code above will get the first 6 posts from the Headless WordPress API that are for the categorySlug defined in the URL params.

For an example of usePosts with pagination, take a look at our Next.js getting started example.

usePage#

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
  2. 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:

/src/pages/[...pageUri].tsx
import { getNextStaticProps } from "@faustjs/next";
import { client } from "client";
export default function Page() {
const { usePage } = client;
const page = usePage();
return (
<article>
<h1>{page?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: page?.content() }} />
</article>
);
}

The above code will also work with pageId and pageUri depending upon what URL scheme you want to use. You may also want to fetch a specific page. Doing that might look similar to the following:

import { getNextStaticProps } from "@faustjs/next";
import { GetStaticPropsContext } from "next";
import { client, PageIdType } from "client";
export default function Page() {
const { usePost } = client;
const page = usePage({
id: "hello-world",
idType: PageIdType.SLUG,
});
return (
<article>
<h1>{page?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: page?.content() }} />
</article>
);
}

usePreview#

The usePreview hook provides an abstraction around getting a preview page or post from your Headless WordPress API. WordPress generally uses query parameters for post and page preview URLs. It also uses the ID of the post or page, so you need to call the Headless WordPress API in a specific way to get the data you need. You also can't use the Next.js URL params scheme with dynamic file names to read query params. Instead you have to pull the query params off the Next.js router and pass them into usePreview. usePreview expects you to pass in either pageId or postId depending upon what type of content you are fetching. If you pass in pageId then usePreview will look for a page by ID. If you pass in postId then usePreview will look for a post by ID.

The following example shows how to use the usePreview hook to render either a post or page from WordPress:

src/pages/preview.tsx
import { useRouter } from "next/router";
import { PageComponent } from "./[...pageUri]";
import type { Page, Post } from "@faustjs/core";
import { PostComponent } from "./posts/[postSlug]";
import { client } from "client";
export default function Preview() {
const {
query: { p, page_id },
} = useRouter();
const { usePreview } = client;
const isPage = !!page_id;
const postOrPage: unknown = usePreview({
pageId: isPage ? (p as string) : undefined,
postId: !isPage ? (p as string) : undefined,
} as any);
if (postOrPage === null) {
return <>Not Found</>;
}
if (isPage) {
return <PageComponent page={postOrPage as Page} />;
}
return <PostComponent post={postOrPage as Post} />;
}

Custom Queries and Mutations#

GQty publishes the following hooks that can be used for custom queries, mutations, or subscriptions:

For example, you may want to get a list of your content types:

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.

Edit this page