Next.js+WordPress+GraphQLで前後の記事へのリンクを設定
Gatsby.jsでWordPressの場合は、前後の記事のクエリも元からあったみたいだけど、
Next.jsでの場合は、探したけど見当たりませんでした。
でも、やっぱり前後の記事のリンクって欲しいんです、私は。
それで、いろいろ調べてみるもあまり資料はないみたい。
でも、WPGraphQLの公式サイトを眺めてるとなんとなくそれっぽいことが出来そうな気がして、もしかして！？
WPGraphQLの公式サイト
上のサイトを見てると何となく出来そうじゃねぇ？
あれこれ試行錯誤して、出来たっぽい！やった！
function.phpにてクエリを追加してやることに。
nextPostというクエリを新たに Post クエリの下に作ります。
たまたまできたコードが以下です。（ほんとたまたま。だからベストな方法ではない。）
get_next_post_link('%link')で、次の記事のデータをゲット！
%linkというので、「<<」などの余分なものを削除して読み込んでます。
参考サイト「WordPress私的マニュアル - elearn.jp」
クエリはこんな感じです。
function.php
「クエリ nextPost 作成」
add_action( 'graphql_register_types', function() {
register_graphql_field( 'Post', 'nextPost', [
'type' => 'String',
'description' => __( 'Example field added to the Post Type', 'replace-with-your-textdomain' ),
'resolve' => function( \WPGraphQL\Model\Post $post, $args, $context, $info ) {
return get_next_post_link('%link');
}
]);
});
「クエリ prevPost 作成」
add_action( 'graphql_register_types', function() {
register_graphql_field( 'Post', 'prevPost', [
'type' => 'String',
'description' => __( 'Example field added to the Post Type', 'replace-with-your-textdomain' ),
'resolve' => function( \WPGraphQL\Model\Post $post, $args, $context, $info ) {
return get_previous_post_link('%link');
}
]);
});
取得した next_post_link('%link')の値の中身。
<a href=\"http://hogehoge.com/2021/08/12/hello-world/\" rel=\"prev\">Hello world!</a>
これを リンクURL と リンクテキスト に分けます。
「http://hogehoge.com/2021/08/12」を取り除いて、「/posts」を頭につける：リンクURLを抜き出す
const sourceStr = '<a href="http://hogehoge.com/2021/08/12/hello-world/" rel="prev">Hello world!</a>';
const a = sourceStr.split( '"' );
const b = a[1];
const c = b.replace('http://hogehoge.com/', '');
const nextUrl = '/posts' + c.substring(10);
リンクテキスト（タイトル「Hello world!」）を抜き出す（上から続けて）
const sourceStr = '<a href="http://hogehoge.com/2021/08/12/hello-world/" rel="prev">Hello world!</a>';
const e = a[4];
const g = e.substring(1);
const nextTitle = g.replace('</a>', '');
なぜこんなことをしてるかというと…
dangerouslySetInnerHTMLでHTMLをそのまま出力では、Reactのメリットである<Link>タグによるリンク移動使えないのです。
だから前後ページのリンクURLとリンクタイトルはそれぞれ取得して、あらためて<Link>タグにて設定してあげてます。
まだまだ完成はしてませんが、これでいけそうな感じです。
もっといい方法があれば教えてください。