Single Authors Page Exampe/Faust.js wp-template

authors.js

import { gql } from "@apollo/client";
import { useFaustQuery } from "@faustwp/core";
import { useRouter } from "next/router";
import {
  Container,
  ContentWrapper,
  EntryHeader,
  FeaturedImage,
  Footer,
  Header,
  Main,
  NavigationMenu,
  SEO,
} from "../components";
import * as MENUS from "../constants/menus";
import { BlogInfoFragment } from "../fragments/GeneralSettings";

const GET_LAYOUT_QUERY = gql`
  ${BlogInfoFragment}
  ${NavigationMenu.fragments.entry}
  query GetLayout(
    $headerLocation: MenuLocationEnum
    $footerLocation: MenuLocationEnum
  ) {
    generalSettings {
      ...BlogInfoFragment
    }
    headerMenuItems: menuItems(where: { location: $headerLocation }) {
      nodes {
        ...NavigationMenuItemFragment
      }
    }
    footerMenuItems: menuItems(where: { location: $footerLocation }) {
      nodes {
        ...NavigationMenuItemFragment
      }
    }
  }
`;

const GET_AUTHOR_INFO = gql`
  ${FeaturedImage.fragments.entry}
  query GET_AUTHOR_INFO($id: ID!) {
    user(id: $id, idType: DATABASE_ID) {
      name
      description
      avatar {
        url
      }
      posts {
        edges {
          node {
            id
            title
            excerpt
            date
            uri
            ...FeaturedImageFragment
          }
        }
      }
    }
  }
`;

export default function Component(props) {
  const router = useRouter();
  const { id } = router.query;
  const { data, loading, error } = useFaustQuery(GET_AUTHOR_INFO, {
    variables: {
      id,
    },
  });
  if (props.loading) {
    return <>Loading...</>;
  }

  if (error) {
    return <>Error{error.message}</>;
  }

  const { user } = data || {};
  const posts = user?.posts?.edges.map((edge) => edge.node) || [];

  const { generalSettings, headerMenuItems, footerMenuItems } =
    useFaustQuery(GET_LAYOUT_QUERY);

  const { title: siteTitle, description: siteDescription } = generalSettings;
  const primaryMenu = headerMenuItems?.nodes ?? [];
  const footerMenu = footerMenuItems?.nodes ?? [];

  return (
    <>
      <SEO title={siteTitle} description={siteDescription} />
      <Header
        title={siteTitle}
        description={siteDescription}
        menuItems={primaryMenu}
      />
      <Main>
        <>
          {posts.map((post, index) => (
            <article key={index}>
              <EntryHeader
                author={user.name} // The name is directly on the user object
                title={post.title}
                avatar={avatarUrl}
                description={user.description}
                image={post.featuredImage?.node}
                date={post.date}
              />
              <Container>
                <ContentWrapper excerpt={post.excerpt} />
              </Container>
            </article>
          ))}
        </>
      </Main>
      <Footer title={siteTitle} menuItems={footerMenu} />
    </>
  );
}

Component.queries = [
  {
    query: GET_LAYOUT_QUERY,
    variables: (seedNode, ctx) => ({
      headerLocation: MENUS.PRIMARY_LOCATION,
      footerLocation: MENUS.FOOTER_LOCATION,
    }),
  },
  {
    query: GET_AUTHOR_INFO,
    variables: ({ id }, ctx) => ({
      id,
      asPreview: ctx?.asPreview,
    }),
  },
];