Faust.js+WPGraphQLで、カスタムタクソノミーを扱う

mkdir src/utils
touch src/utils/game.ts

import { client, GameIdType } from '@/client';
import { getFields, getArrayFields } from 'gqty';

/**
 * ゲームが存在するか否か
 * @param slug スラッグ
 */
const checkGameExistsBySlug = async (slug: string) => {
  const { inlineResolved, query } = client.client;
  const game = await inlineResolved(() => {
    return getFields(
      query.game({
        id: slug,
        idType: GameIdType.SLUG,
      }),
      'id'
    );
  });
  return game !== null;
};

/**
 * getStaticPaths用のpathsを返す
 * @param paramName ルートパラメータの名前
 */
const getAllGameSlugParams = async (paramName: string) => {
  const games = await client.client.inlineResolved(() => {
    return getArrayFields(client.client.query.games()?.nodes, 'slug');
  });
  return games
    ? games.map((game) => {
        return {
          params: {
            [paramName]: game.slug,
          },
        };
      })
    : [];
};

export { checkGameExistsBySlug, getAllGameSlugParams };

DIR=src/pages/games/[gameSlug]
mkdir -p $DIR && touch $DIR/index.tsx

import { getNextStaticProps } from '@faustjs/next';
import { GetStaticPropsContext } from 'next';
import { useRouter } from 'next/router';
import {
  client,
  GameIdType,
  RelationEnum,
  RootQueryToPostConnectionWhereArgsTaxQueryField,
  RootQueryToPostConnectionWhereArgsTaxQueryOperator,
  TaxonomyEnum,
} from 'client';
import { checkGameExistsBySlug, getAllGameSlugParams } from '@/utils/game';

const POSTS_PER_PAGE = 6;

export default function Page() {
  const { useQuery, usePosts } = client;
  const { query = {} } = useRouter();
  const { gameSlug, paginationTerm, gameCursor } = query;
  const game = useQuery().game({ id: gameSlug.toString(), idType: GameIdType.SLUG });
  const isBefore = paginationTerm === 'before';
  const posts = usePosts({
    after: !isBefore ? (gameCursor as string) : undefined,
    before: isBefore ? (gameCursor as string) : undefined,
    first: !isBefore ? POSTS_PER_PAGE : undefined,
    last: isBefore ? POSTS_PER_PAGE : undefined,
    /**
     * wp-graphql-tax-queryプラグインで絞り込む
     * @see https://github.com/wp-graphql/wp-graphql-tax-query
     */
    where: {
      taxQuery: {
        relation: RelationEnum.AND,
        taxArray: [
          {
            terms: [game?.slug],
            taxonomy: TaxonomyEnum.GAME,
            operator: RootQueryToPostConnectionWhereArgsTaxQueryOperator.IN,
            field: RootQueryToPostConnectionWhereArgsTaxQueryField.SLUG,
          },
        ],
      },
    },
  });

  return (
    // 省略
  );
}

export async function getStaticProps(context: GetStaticPropsContext) {
  const notFound = !(await checkGameExistsBySlug(context.params.gameSlug.toString()));
  return getNextStaticProps(context, {
    Page,
    client,
    notFound,
  });
}

export async function getStaticPaths() {
  const paths = await getAllGameSlugParams('gameSlug');
  return {
    paths,
    fallback: 'blocking',
  };
}

DIR=$DIR/[paginationTerm]
mkdir -p $DIR && touch "$DIR/[gameCursor].tsx"

import { GetStaticPropsContext } from 'next';
import Page from '@/pages/games/[gameSlug]';
import { getNextStaticProps } from '@faustjs/next';
import { client } from 'client';
import { checkGameExistsBySlug } from '@/utils/game';

export default Page;

export async function getStaticProps(context: GetStaticPropsContext) {
  const { paginationTerm, gameSlug } = context.params;
  const notFound = !(paginationTerm === 'after' || paginationTerm === 'before') || !(await checkGameExistsBySlug(gameSlug.toString()));
  return getNextStaticProps(context, {
    Page,
    client,
    notFound,
  });
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}

├ ● /games/[gameSlug] (ISR: 900 Seconds) (9804 ms)              1.76 kB         184 kB
├   ├ /games/minecraft-dungeons (1532 ms)
├   ├ /games/minecraft-console (1519 ms)
├   ├ /games/minecraft-je (1427 ms)
├   ├ /games/hytale (1330 ms)
├   └ /games/minecraft (1225 ms)