Question about Cells in regards to Algolia search functionality

Get Help and Help Others
2

Sounds like you’re on the right track! To populate Algolia you can do something simple like a script that you call periodically to put new results up:

yarn rw generate script populateSearch

You’ll get a file at scripts/populateSearch.js and then you can run that script with:

yarn rw exec populateSearch

Or if you always want to run it at the same time as the build:

yarn rw exec populateSearch && yarn rw build

You may be able to hook up some custom magic with webpack to have it run that script with just the build command but that’s beyond my skills!

When you want to actually integrate search into your site, you’ll do something like the following:

You created a cell with a query at the top there. Now you need an SDL file to describe the GraphQL types/fields that will be available, and then a Service to actually define the resolver for the type(s) in the SDL.

We have a generator for SDLs/Services but it’s currently limited to only being able to automatically generate them if you have a Prisma model with the same name. So you’ll have to create one manually for now. Here’s a basic shell to get you started:

// api/src/graphql/search.sdl.js

// You may get more data back from Algolia than just "text" but this
// is a good start:

export const schema = gql`
  type Result {
    text: String!
  }

  type Query {
    search(input: String!): [Result!]! @skipAuth
  }
`

And then the service to actually return results:

// api/src/services/search/search.js

export const search = ({ input }) => {
  // algolia search here, should return an array of
  // objects that have the same properties as the Result 
  // type in the SDL. For example:

  return [{ text: 'Redwood is the best' }, { text: 'I love Redwood' }]
}

Which would make your cell’s QUERY looks something like:

// web/src/components/SearchCell.js

export const QUERY = gql`
  query SearchQuery($input: String!) {
    search(input: $input) {
      text
    }
  }
`

But, where does input come from? When you include the Cell component in its parent (a Page perhaps?) you just include input as a prop and the Cell will pick it up automatically and include it in the QUERY for you (cells call useQuery automatically):

// web/src/pages/SearchPage/SearchPage.js

import SearchCell from 'src/components/SearchCell'

const SearchPage = () => {

  return (
    // just need an <input> somewhere that accepts the search text somewhere,
    // and let's assume the value in that <input> is saved in a `searchText`
    // variable, then you can just do:

    { searchText && <SearchCell input={searchText} /> }
  )
}

If there’s no search text then nothing is rendered. While the search is being performed, the Cell will render the <Loading> component, if there are no results, the Cell will render the <Empty> component, and if there are results it’ll render the <Success> component! Pretty cool, huh?

2 Likes