[Gatsby.js] ブログ毎に動的にgraphqlを実行する方法

Gatsby.jsは、Reactベースの静的サイト生成フレームワークであり、非常に人気があります。Gatsby.jsを使うと、コンテンツを動的に生成するための便利なツールが提供されています。その中でも、createPageメソッドとGraphQLクエリを活用することで、より高度な動的コンテンツの生成が可能となります。

createPageメソッドの基本的な使い方

まずは、Gatsby.jsのcreatePageメソッドの基本的な使い方から始めましょう。createPageメソッドは、GatsbyのNode APIの一部であり、ページを動的に作成するために使用されます。以下のコードは、createPageメソッドを使用して新しいページを作成する例です。

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // ここにページの作成ロジックを記述します

  // createPageメソッドを使用して新しいページを作成します
  createPage({
    path: "/my-new-page",
    component: path.resolve("./src/templates/my-template.js"),
    context: {
      // ここにコンテキストのデータを設定します
    },
  });
};

このコードでは、createPageメソッドを使用して/my-new-pageというパスの新しいページを作成しています。また、componentプロパティには、ページのテンプレートコンポーネントのパスを指定しています。

変数の定義とコンテキストへの追加

次に、変数を定義し、それをcontextオブジェクトに追加してみましょう。contextオブジェクトは、ページコンポーネント内で利用可能なデータを保持するために使用されます。以下のコードは、変数を定義し、contextオブジェクトに追加する例です。

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // 変数を定義します
  const myVariable = "my-value";

  createPage({
    path: "/my-new-page",
    component: path.resolve("./src/templates/my-template.js"),
    context: {
      // 変数をコンテキストに追加します
      myVariable: myVariable,
    },
  });
};

このコードでは、myVariableという変数を定義し、contextオブジェクトに追加しています。この変数は、後ほどテンプレートコンポーネント内で利用することができます。

テンプレートコンポーネントでのGraphQLクエリの動的実行

最後に、テンプレートコンポーネント内で変数を使用してGraphQLクエリを動的に実行する方法を見ていきましょう。以下のコードは、my-template.jsというテンプレートコンポーネント内でGraphQLクエリを動的に実行する例です。

import React from "react";
import { graphql } from "gatsby";

const MyTemplate = ({ data }) => {
  // GraphQLクエリの結果を取得します
  const { myVariable } = data.site.siteMetadata;

  return (
    <div>
      <h1>{myVariable}</h1>
      {/* ここにコンテンツを表示します */}
    </div>
  );
};

export const query = graphql`
  query($myVariable: String!) {
    site {
      siteMetadata {
        title
        myVariable
      }
    }
  }
`;

export default MyTemplate;

このコードでは、graphqlタグを使用してGraphQLクエリを定義しています。クエリ内の変数として$myVariableを指定し、query変数の引数として渡します。そして、クエリの結果をdataオブジェクトから取得して、テンプレートコンポーネント内で利用することができます。

まとめ

この記事では、Gatsby.jsのcreatePageメソッドとGraphQLクエリを活用して、動的なコンテンツを生成する方法を紹介しました。createPageメソッドを使用してページを作成し、contextオブジェクトに変数を追加することで、テンプレートコンポーネント内で動的なGraphQLクエリを実行することができます。この仕組みを活用することで、柔軟なコンテンツ生成が可能となり、ユーザーによりパーソナライズされた体験を提供することができます。