Recherche native contre Jetpack Recherche instantanée dans WordPress sans tête avec Gatsby

Prêt à explorer WordPress sans tête avec Gatsby? Cet article plonge dans la fonctionnalité de recherche, en comparant la recherche native de WordPress avec la recherche instantanée Jetpack. Nous allons construire un site Gatsby en tirant parti du plugin gatsby-source-wordpress (introduit dans Gatsby 3, mars 2021) et WPGraphQL pour une intégration WordPress plus fluide.

Cette exploration est informée par l'expérience de construction de thèmes WP Gatsby - un marché pour les développeurs créant des sites Gatsby propulsés par WordPress. Nous nous concentrerons sur deux méthodes de recherche: en utilisant la recherche intégrée de WordPress et implémentation de la recherche instantanée Jetpack.

Préparer la voie

Créons un site Gatsby à l'aide du démarreur gatsby-starter-wordpress-blog :

 Gatsby New Gatsby-Wordpress-W-Search https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

Ce démarreur fournit un article de base et un routage de page de blog. Pour notre exemple, nous exclurons les pages des résultats de recherche. Nous utiliserons la démo WordPress du démarreur; Si vous utilisez le vôtre, n'oubliez pas les plugins WordPress nécessaires: WPGraphQL (pour l'API GraphQL) et WPGATSBY (pour les modifications de schéma spécifiques à Gatsby et l'optimisation de la construction). Les deux sont disponibles via le référentiel de plugin WordPress.

Intégration du client Apollo

GATSBY utilise généralement des requêtes de page ou useStaticQuery pour la récupération des données. Cependant, pour les recherches initiées par l'utilisateur, nous avons besoin d'une solution dynamique. Nous utiliserons le client Apollo pour interagir directement avec l'API WPGraphQL, gérer les demandes de données et la mise en cache.

Installez le client Apollo:

 fil Add @ Apollo / Client Cross-Fetch

Enveloppez l'application avec ApolloProvider à l'aide de l'API wrapRootElement de Gatsby dans gatsby-browser.js :

 // gatsby-browser.js
// ... (importations) ...

const client = new Apolloclient ({
  // ... (configuration du lien et du cache) ...
  URI: "https://wpgatsbydemo.wpengine.com/graphql", // Remplacez par votre point de terminaison GraphQL
  Réfléchir: cross-fetch,
});

export const wraprootelement = ({element}) => (
  <apolloprovider client="{client}">{élément}</apolloprovider>
));

Construire le composant de recherche

Créez les fichiers nécessaires:

 toucher src / composants / search.js src / composants / search-form.js src / composants / search-résults.js src / css / search.css

Le composant Search gère l'état du terme de recherche et rend le formulaire et les résultats:

 // src / composants / search.js
// ... (importations) ...

const search = () => {
  const [searchTerm, setSearchTerm] = UseState ("");
  retour (
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {searchterm &&<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  ));
};

SearchForm est une forme simple:

 // src / composants / search-form.js
// ... (importations) ...

const searchform = ({setSearchTerm}) => {
  // ... (fonction d'état et handlesUbmit) ...
  retour (
    

Recherche: setValue (e.target.value)} /> Recherche

)); };

SearchResults utilise le crochet useQuery du client Apollo:

 // src / composants / search-résults.js
// ... (importations) ...

const get_results = gql`
  requête ($ searchterm: string) {
    Posts (où: {search: $ searchterm}) {
      Bords {
        Node {
          identifiant
          uri
          titre
          extrait
        }
      }
    }
  }
`;

const searchResults = ({searchterm}) => {
  const {data, chargement, error} = useQuery (get_results, {variables: {searchTerm}});
  // ... (chargement, erreur et traitement des données) ...
};

Ajoutez le composant Search à votre mise en page (ou utilisez wrapPageElement pour l'affichage persistant). Le reste de l'article détaille la pagination, la recherche persistante, la gestion des publications et les pages, et en utilisant la recherche instantanée Jetpack pour des capacités de recherche améliorées. Les extraits de code fournis offrent une base pour construire une fonctionnalité de recherche robuste dans votre site Gatsby.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!