robinzimmer1989 / gatsby-wordpress-search

Gatsby Wordpress Search

Add search functionality (powered by Lunr.js) to your Gatsby site based on Wordpress data.

The plugin filters post title, post content and all ACF fields.

Requirements

Gatsby plugin: gatsby-source-wordpress

Instructions

1. Upload the PHP file inside the plugin folder (see GitHub) as a plugin into Wordpress. Once this is done you should be able to see the json output at "/wp-json/wp/v2/searchResults".

2. Include the route in your gatsby-config.js

{
      resolve: "gatsby-source-wordpress",
      options: {
        ...
        includedRoutes: ["**/searchResults"]
      }
    }

3. Install the search component

yarn add gatsby-wordpress-search

or

npm i gatsby-wordpress-search

4. Import the component and style it.

import React from "react";
import { StaticQuery, graphql, navigate } from "gatsby";
import styled from "styled-components";
import Search from "gatsby-wordpress-search";

<Wrapper>
  <StaticQuery
    query={graphql`
      {
        allWordpressWpSearchResults {
          edges {
            node {
              id
              post_title
              searchData
              pathname
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <Search
          data={data}
          minCharacters={4}
          contentCharacters={300}
          maxResults={10}
          placeholder='Search'
          onSelect={object => navigate(o.pathname)}
        />
      );
    }}
  />
</Wrapper>;

const Wrapper = styled.div`
  .container {
  }

  .input {
  }

  .suggests {
  }

  .suggest {
  }

  .suggestTitle {
  }

  .suggestContent {
  }
`;

gatsby-wordpress-search's Issues

Great Plugin .... some notes

Hi Rob,
Great search plugin for WP + gatsby
Probably worth mentioning in install that 2 things matter:

• You search which will show results must be called searchResults, or in my case I just added a page called search.js to /pages in gatsby build

• Whats also important is line 5 in the php file. If you're using v2 of WP Rest API. The endpoint will adjust from wp/v1 to wp/v2

Apart from that great plugin, happy to add those bits to notes or actual code via PR if you prefer.

Best
Mo
@tweetzal

Lunr plugin settings in gatsby.config for searching WordPress content

I've tried implementing your code on my Gatsby/WordPress site. I'm guessing we also need to install gatsby-plugin-lunr but as far as the gatsby.config settings, I'm stuck.

This is what I have so far...

{
      resolve: `gatsby-plugin-lunr`,
      options: {
        languages: [
          {
            // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details
            name: 'en',
          },
        ],
        // Fields to index. If store === true value will be stored in index file.
        // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details
        fields: [
          { name: 'title', store: true, attributes: { boost: 20 } },
          { name: 'category' },
          { name: 'url', store: true },
        ],
        // How to resolve each field's value for a supported node type
        resolvers: {
          wordpress__POST: {
            title: node => node.title,
            category: (node, getNode) => getNode(node.categories__NODE).name,
            url: (node, getNode) => getNode(node.path__NODE).name,
          },
        },
        //custom index file name, default is search_index.json
        filename: 'search_index.json',
      },
    },

Ideally I'd like to have the ACF fields indexed, as this is where all the body copy for each Post is.

My GraphQL query for posts looks like this...

{
  allWordpressPost {
    edges {
      node {
        format
        title
        path
        categories {
          id
          name
        }
        acf {
          content_post {
            __typename ... on WordPressAcf_text_block {
              text
              text_2
              text_3
              text_4
            }
          }
        }
      }
    }
  }
}

Are you able to post your gatsby-plugin-lunr settings here so I can get an idea of how to do this properly, please?

Maximum update depth exceeded.

Hi! I tried to set up your plugin but i encountered some issues. It happens when as soon as the page loads where the component is present.

This is the error i receive:
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. in SearchComponent (at HeaderSearchbar.tsx:10) in StaticQueryDataRenderer (at gatsby-browser-entry.js:38)

And this is my current setup:

import React from 'react'
import { StaticQuery, graphql, navigate } from 'gatsby'
import Search from 'gatsby-wordpress-search'

const HeaderSearchbar = () => (
  <StaticQuery
    query={graphql`
      {
        allWordpressWpSearchResults {
          edges {
            node {
              id
              post_title
              searchData
              pathname
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <Search
          data={data}
          minCharacters={4}
          contentCharacters={300}
          maxResults={10}
          placeholder="Search"
          onSelect={object => navigate(o.pathname)}
        />
      )
    }}
  />
)

export default HeaderSearchbar

Any ideas of what could be causing this issue?

Support for gatsby-source-wordpress-experimental

Any chance you have a version in the works that works with gatsby-source-wordpress-experimental? Thanks!