本机搜索与JetPack Instant interment search在无头Wordpress中使用Gatsby

准备与Gatsby探索无头WordPress了吗？本文深入研究了搜索功能，将WordPress的本机搜索与JetPack Instant Search进行了比较。我们将构建一个利用gatsby-source-wordpress插件（在2021年3月3日在Gatsby 3中引入）和WPGRAPHQL的盖茨比网站，以进行更平滑的WordPress集成。

通过构建盖茨比WP主题的经验来了解这一探索，这是一个为开发人员创建由WordPress提供动力的开发人员的市场。我们将重点介绍两种搜索方法：利用WordPress的内置搜索和实现JetPack Instant Search。

设置舞台

让我们使用gatsby-starter-wordpress-blog启动器创建一个盖茨比网站：

盖茨比新的gatsby-wordpress-w-search https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

此入门提供了基本的帖子和博客页面路由。在我们的示例中，我们将从搜索结果中排除页面。我们将使用启动器的WordPress演示；如果使用自己的，请记住必要的WordPress插件：WPGRAPHQL（对于GraphQL API）和WPGATSBY（用于盖茨比特定的架构修改并构建优化）。两者都可以通过WordPress插件存储库获得。

集成阿波罗客户端

Gatsby通常使用页面查询或useStaticQuery进行数据获取。但是，对于用户启动的搜索，我们需要动态解决方案。我们将使用Apollo客户端直接与WPGRAPHQL API进行交互，处理数据请求和缓存。

安装阿波罗客户端：

纱线添加 @apollo/client crossfetch

使用Gatsby的wrapRootElement API将应用程序与gatsby-browser.js中的ApolloProvider包装：

 // gatsby-browser.js
// ...（进口）...

const client =新的apolloclient（{{
  // ...（链接和缓存配置）...
  URI：“ https：//wpgatsbydemo.wpengine.com/graphql”，//用graphql endpoint替换
  提取：杂交，
}）;

导出const wraprootlement =（{element}）=>（
  <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] = usestate（“”）;
  返回 （
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {搜索术语&&<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  ）；
};

SearchForm是一个简单的形式：

 // src/components/search-form.js
// ...（进口）...

const searchForm =（{setSearchTerm}）=> {
  // ...（状态和handlesubmit函数）...
  返回 （
    

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

）； };

SearchResults使用Apollo客户端的useQuery钩：

 // src/components/search-results.js
// ...（进口）...

const get_results = gql`
  查询（$ searchTerm：string）{
    帖子（其中：{搜索：$ searchTerm}）{
      边缘{
        节点{
          ID
          Uri
          标题
          摘抄
        }
      }
    }
  }
`;

const searchResults =（{{搜索term}）=> {
  const {data，loading，error} = usequery（get_results，{variables：{searchTerm}}）;
  // ...（加载，错误和数据处理）...
};

将Search组件添加到布局中（或使用wrapPageElement进行持久显示）。本文的其余部分详细介绍了分页，持续搜索，处理帖子和页面，并使用JetPack即时搜索以获取增强的搜索功能。提供的代码片段为盖茨比网站内建立强大的搜索功能提供了基础。

以上是本机搜索与JetPack Instant interment search在无头Wordpress中使用Gatsby的详细内容。更多信息请关注PHP中文网其他相关文章！