Native Search vs. Jetpack Instant Search in Headless WordPress With Gatsby

Ready to explore headless WordPress with Gatsby? This article delves into search functionality, comparing WordPress's native search with Jetpack Instant Search. We'll build a Gatsby site leveraging the gatsby-source-wordpress plugin (introduced in Gatsby 3, March 2021) and WPGraphQL for a smoother WordPress integration.

This exploration is informed by experience building Gatsby WP Themes—a marketplace for developers creating Gatsby sites powered by WordPress. We'll focus on two search methods: utilizing WordPress's built-in search and implementing Jetpack Instant Search.

Setting the Stage

Let's create a Gatsby site using the gatsby-starter-wordpress-blog starter:

gatsby new gatsby-wordpress-w-search https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

This starter provides basic post and blog page routing. For our example, we'll exclude pages from search results. We'll use the starter's WordPress demo; if using your own, remember the necessary WordPress plugins: WPGraphQL (for the GraphQL API) and WPGatsby (for Gatsby-specific schema modifications and build optimization). Both are available via the WordPress plugin repository.

Integrating Apollo Client

Gatsby typically uses page queries or useStaticQuery for data fetching. However, for user-initiated searches, we need a dynamic solution. We'll use Apollo Client to interact directly with the WPGraphQL API, handling data requests and caching.

Install Apollo Client:

yarn add @apollo/client cross-fetch

Wrap the application with ApolloProvider using Gatsby's wrapRootElement API in gatsby-browser.js:

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

const client = new ApolloClient({
  // ... (link and cache configuration) ...
  uri: "https://wpgatsbydemo.wpengine.com/graphql", // Replace with your GraphQL endpoint
  fetch: cross-fetch,
});

export const wrapRootElement = ({ element }) => (
  <apolloprovider client="{client}">{element}</apolloprovider>
);

Building the Search Component

Create the necessary files:

touch src/components/search.js src/components/search-form.js src/components/search-results.js src/css/search.css

The Search component manages the search term state and renders the form and results:

// src/components/search.js
// ... (imports) ...

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

SearchForm is a simple form:

// src/components/search-form.js
// ... (imports) ...

const SearchForm = ({ setSearchTerm }) => {
  // ... (state and handleSubmit function) ...
  return (
    

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

); };

SearchResults uses Apollo Client's useQuery hook:

// src/components/search-results.js
// ... (imports) ...

const GET_RESULTS = gql`
  query($searchTerm: String) {
    posts(where: { search: $searchTerm }) {
      edges {
        node {
          id
          uri
          title
          excerpt
        }
      }
    }
  }
`;

const SearchResults = ({ searchTerm }) => {
  const { data, loading, error } = useQuery(GET_RESULTS, { variables: { searchTerm } });
  // ... (loading, error, and data handling) ...
};

Add the Search component to your layout (or use wrapPageElement for persistent display). The rest of the article details pagination, persistent search, handling posts and pages, and using Jetpack Instant Search for enhanced search capabilities. The provided code snippets offer a foundation for building a robust search functionality within your Gatsby site.

The above is the detailed content of Native Search vs. Jetpack Instant Search in Headless WordPress With Gatsby. For more information, please follow other related articles on the PHP Chinese website!