Faust.js+WPGraphiQL로 케이크 처리

WPGraphiQL 플러그인과Faust.js를 조합하면 조회를 쓰는 시간을 절약할 수 있고 WordPress CMS화도 할 수 있습니다.하지만 케이크 케이크를 사용하려면 시간이 좀 걸리기 때문에 절차를 정리해 봤다.

WordPress 측

WPGraphiQL의 준비

Compooser를 사용하려면 환경을 준비하십시오.추천sage/bedrock.

composer require wp-graphql/wp-graphql
wp plugin activate wp-graphql

제작 토익, GraphiQL 노출

우리는 게임을 만들 것이다.

function custom_register_taxes_games() {
  $labels = [
    'name' => __( 'ゲーム' ),
    'singular_name' => __( 'ゲームズ' ),
  ];

  $args = [
    'label' => __( 'ゲーム' ),
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'hierarchical' => false,
    'show_ui' => true,
    'show_in_menu' => true,
    'show_in_nav_menus' => true,
    'query_var' => true,
    'rewrite' => [ 'slug' => 'games', 'with_front' => true, ],
    'show_admin_column' => true,
    'show_in_rest' => true,
    'show_tagcloud' => false,
    'rest_base' => 'games',
    'rest_controller_class' => 'WP_REST_Terms_Controller',
    'show_in_quick_edit' => true,
    'sort' => false,
    'show_in_graphql' => true,
    'graphql_single_name' => 'Game',
    'graphql_plural_name' => 'Games',
  ];
  register_taxonomy( 'games', [ 'post' ], $args );
}

add_action( 'init', 'custom_register_taxes_games' );

이것은 CPPTUI에 추가할 수 있지만 어쨌든 코드에 설정을 적어 주세요.(WordPress에 익숙하지 않기 때문에 CPUI로 코드를 만들어 생성합니다. 쓸모없는 옵션이 많을 수 있습니다.)

    'show_in_graphql' => true,
    'graphql_single_name' => 'Game',
    'graphql_plural_name' => 'Games',

중요한 것은 GraphiQL에서 사용하는 것이다.

query game {
  game(id: "minecraft", idType: SLUG) {
    id
    name
  }
}

예를 들어 minecraft의 속담 게임은 이렇게 얻을 수 있다.

튜브 설치 및 활성화

https://faustjs.org/docs/next/reference/hooks/usePosts
2022년 4월 30일 현재 패스트.js의usePosts에서where는 케이크를 사용할 수 없습니다.
https://github.com/wp-graphql/wp-graphql-tax-query
거기서 이쪽 플러그인을 사용하세요.2022년 4월 30일까지 워드프레스 팩가스트에 등록하지 않았으니 컴포지션에 창고를 추가해 주십시오.

composer config repositories.wp-graphql/wp-graphql-tax-query \
    vcs https://github.com/wp-graphql/wp-graphql-tax-query.git
composer require wp-graphql/wp-graphql-tax-query:master
wp plugin activate wp-graphql-tax-query

참조: https://scrapbox.io/namaozi/composer에서 GiitHub의 창고에서 추가 포장하는 방법

Next.js 방면

https://faustjs.org/docs/next/getting-started
여기서부터 환경을 준비하면 WPGraphiQL의 환경을 가장 빨리 구축할 수 있다.

Schema의 생성

사용

npx gqty generate

sage/bedrock 등의 이유/wp가 URL에 포함된 경우 적절하게 편집src/faust.config.js해야 한다.

기사 목록 페이지 준비

Faust.js는 Apollo ClientGQty를 통해 통신하지 않습니다.
https://gqty.dev/docs/intro/how-it-works#skeleton-render--values
일본어 정보는 전혀 없지만 이 프로그램 라이브러리는 useQuery만 하면 반환Symbol(gqty-proxy)됩니다.이렇게 하면 클라이언트가 먼저 색자를 그리고 데이터가 도착한 후에 디스플레이 업데이트를 진행할 것이다.
서버에서 데이터를 처리할 때 매우 번거롭다.client.useQuery().game(...) 취득 후 gqty-proxy로 되돌아와 404의 판정이나 구축 경로를 생성할 수 없습니다.
https://faustjs.org/docs/next/guides/ssr-ssg#statically-generate-some-of-your-pages-at-build-time-based-on-a-query
https://github.com/wpengine/faustjs/discussions/515#discussioncomment-1411394
따라서 GQtyClient의inlineResolved함수를 사용하면 된다고 한다.

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

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 };

이러한 유틸리티는 종속 연결 라우팅에 사용됩니다.inlineResolved의 호출 함수에서 getFields 또는 getArrayFields를 사용하여 데이터를 얻는 실체.이를 준비해야만 적당한 404 판정과 경로를 만들 수 있다.

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

src/pages/games/[gameSlug]/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',
  };
}

또한 클라이언트에서 일반적으로 usePosts를 사용하고 taxQuery로 선별한다.2022년 4월 30일까지 wp-graphiql-tax-query 플러그인을 사용할 수 없습니다.
커서의 페이지 태그 사용에 대해서는 공식적인 example을 참조하십시오.
!
getStatic Propos에 질의를 쓸 필요가 없습니다.
https://faustjs.org/docs/next/guides/ssr-ssg
Faust.페이지 구성 요소를 통해 js의 getNextStaticProps 는 투명한 데이터를 가져와 SSR을 할 수 있습니다.

페이지 스타일

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

src/pages/games/[gameSlug]/[paginationTerm]/[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',
  };
}

패스트입니다.js의 튜토리얼과 마찬가지로 게임의 존재 판정을 혼자 추가했습니다.이것이 없으면 존재하지 않는 비속어도 404도 안 된다.
또한 경로가 생성되지 않습니다.구축할 때 수시로 변화하는 커서를 사용하는 의미가 매우 얇죠.

├ ● /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)

상술한 실시 방식은 이런 경로를 만들어 낼 수 있다.
이상, Fast.js에서 케이크를 처리하는 프로그램입니다.GQty의 정보가 너무 적어서 괴롭습니다.