ネイティブ検索vs. GatsbyとのヘッドレスWordPressでのJetpackインスタント検索

ギャツビーでヘッドレスワードプレスを探索する準備はできましたか？この記事では、WordPressのネイティブ検索とJetPackインスタント検索と比較して、検索機能を掘り下げます。 gatsby-source-wordpressプラグイン（2021年3月3月3日、Gatsby 3で紹介）とWPGRAPHQLを活用して、よりスムーズなWordPress統合を実現するギャツビーサイトを構築します。

この探索は、WordPressを搭載したGatsbyサイトを作成する開発者向けの市場であるGatsby WPテーマを構築する経験によって通知されます。 WordPressの組み込み検索とJetPackインスタント検索の実装の2つの検索方法に焦点を当てます。

ステージを設定します

gatsby-starter-wordpress-blogスターターを使用してGatsbyサイトを作成しましょう。

 Gatsby New Gatsby-Wordpress-w-search https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

このスターターは、基本的な投稿とブログのページルーティングを提供します。この例では、検索結果からページを除外します。スターターのWordPressデモを使用します。独自の使用する場合は、必要なWordPressプラグインを覚えておいてください：WPGRAPHQL（GraphQL API用）およびWPGATSBY（Gatsby固有のスキーマ変更と最適化の構築）。どちらもWordPressプラグインリポジトリから入手できます。

Apolloクライアントの統合

Gatsbyは通常、データフェッチのためにページクエリまたはuseStaticQuery使用します。ただし、ユーザーが開始する検索には、動的なソリューションが必要です。 Apolloクライアントを使用して、WPGRAPHQL APIと直接対話し、データリクエストを処理し、キャッシュします。

Apolloクライアントのインストール：

 Yarn add @apollo/client cross-fetch

gatsby-browser.jsでGatsbyのwrapRootElement APIを使用して、アプリケーションをApolloProviderでラップします：

 // gatsby-browser.js
// ...（輸入）...

const client = new Apolloclient（{
  // ...（リンクとキャッシュの構成）...
  URI： "https://wpgatsbydemo.wpengine.com/graphql"、// graphqlエンドポイントに置き換えます
  フェッチ：クロスフェッチ、
}）;

const const wraprootelement =（{要素}）=>（
  <apolloprovider client="{client}">{要素}</apolloprovider>
）;

検索コンポーネントの構築

必要なファイルを作成します。

 src/components/search.js src/components/search-form.js src/components/search-results.js src/css/search.cssをタッチします

Searchコンポーネントは、検索用語の状態を管理し、フォームと結果をレンダリングします。

 // src/components/search.js
// ...（輸入）...

const search =（）=> {
  const [searchterm、setsearchterm] = uesestate（ ""）;
  戻る （
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {searchterm &&<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  ）;
};

SearchFormシンプルなフォームです。

 // src/components/search-form.js
// ...（輸入）...

const searchform =（{setSearchterm}）=> {
  // ...（state and handlesubmit関数）...
  戻る （
    

検索： setValue（e.target.value）} /> 検索

）; };

SearchResults ApolloクライアントのuseQueryフックを使用します。

 // src/components/search-results.js
// ...（輸入）...

const get_results = gql`
  query（$ searchterm：string）{
    投稿（where：{search：$ searchterm}）{
      エッジ{
        node {
          id
          uri
          タイトル
          抜粋
        }
      }
    }
  }
`;

const searchResults =（{searchterm}）=> {
  const {data、loading、error} = usequery（get_results、{variables：{searchterm}}）;
  // ...（読み込み、エラー、データ処理）...
};

Searchコンポーネントをレイアウトに追加します（または、永続的なディスプレイにwrapPageElementを使用します）。記事の残りの部分では、ページネーション、永続的な検索、投稿とページの取り扱い、およびJetPackのインスタント検索の強化された検索機能の使用について詳しく説明しています。提供されたコードスニペットは、Gatsbyサイト内に堅牢な検索機能を構築するための基盤を提供します。

以上がネイティブ検索vs. GatsbyとのヘッドレスWordPressでのJetpackインスタント検索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。