Algolia: Export React Instant Search results

Is there any way to export Algolia’s React Instant Search results to a CSV? I’ve tried using the react-csv package, but it doesn’t work with Algolia’s Hit Component. The package requires data as props, but the data is constantly changing since it’s React Instant Search.

What I mean by constantly changing is that on page load, you’re given the entire index of records found, then you can narrow down the results with the search bar or other filtering components.

I’ve gone down the Google rabbit hole looking for information about exporting Algolia’s search results as a CSV, but I haven’t found anything regarding React Instant Search—unless I completely missed it.

Has anyone tried this before? If so, could you point me in the right direction regarding documentation or examples? I’m a super newbie to Algolia, so I appreciate any help!

Hello!

If you are just looking to export the current page of data, by using a custom Hits component, you can access props.hits and get the Hit data this way. From there you could pass the data to react-csv in the raw format, or pass it through a function to convert it to a different format.

Here’s an example:

import { connectHits } from 'react-instantsearch-dom';

function convertData (input) {
  // If you plan on modifying the input, use a deep copy
  // so that you do not interfere with the frontend's data
  return input.map(entry => ({
      name: entry.name,
      description: entry.description,
      // ... other fields to export/convert
  }))
}

function DownloadableHits (props) {
    return (
      <div>
        <CSVLink
          filename="my_algolia_results.csv"
          data={convertData(props.hits)}
          target="_blank"
        >
          Download Records
        </CSVLink>
        <hr />
        {props.hits.map(hit => <Hit hit={hit} />)}
      </div>
    )
}

const CustomHits = connectHits(DownloadableHits);

class App extends Component {
  render() {
    return (
      <div className="right-panel">
        <SearchBox />
        <CustomHits />
        <Pagination />
      </div>
    );
  }
}

If you are using React InstantSearch Hooks, you can do this same thing but instead use useInstantSearch in a component to access the Hit information and then supply the hits to react-csv.