使用IntestantSearch React插入中间件（见解）

Question

因此，我们使用Algolia/InstantSearch/React/NextJ进行了功能搜索。但是Insights中间件目前尚未设置。

以下是实现的修剪版本，我们使用自定义小部件对结果的显示更加良好的控制。

我们将挂钩实现用于自定义小部件，

const { hits, sendEvent, ... } = useInfiniteHits(props)

import { useState } from 'react'
import algoliasearch from 'algoliasearch/lite'
import { InstantSearch, InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
import SearchBox from '@components/swatches/algolia/SearchBox'
import Hits from '@components/swatches/algolia/Hits'
import RefinementList from '@components/swatches/algolia/RefinementList'
import CurrentRefinements from '@components/swatches/algolia/CurrentRefinements'
import { getServerState } from 'react-instantsearch-hooks-server'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { history } from 'instantsearch.js/es/lib/routers/index.js'
import styles from '@styles/page.module.scss'



const Page = ({ serverState, url }) => {

  const searchClient = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_INDEX_ID,
    process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY
  )
  return (
        <div className={styles.wrapper}>
            <InstantSearchSSRProvider {...serverState}>
              <InstantSearch
                searchClient={searchClient}
                indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX}
                routing={{
                  router: history({
                    getLocation: () =>
                      typeof window === 'undefined' ? new URL(url) : window.location,
                  }),
                }}
              >

                <Container fluid="lg">
                  <div className="mb-3">
                    <SearchBox />
                  </div>
                  <CurrentRefinements />
                  <Hits />
                </Container>
              </InstantSearch>
            </InstantSearchSSRProvider>
        </div>
  )
}

export default Page

export async function getServerSideProps({ req, res, resolvedUrl}) {

  const protocol = req.headers.referer?.split('://')[0] || 'https';
  const url = `${protocol}://${req.headers.host}${req.url}`;
  const serverState = await getServerState(<Page url={url} />);

  return {
    props: {
      serverState,
      url,
    },
  }
}

所以我的问题是，我们在哪里可以将洞察力中间件连接起来？

阅读文档，（ https：https：//www.algolia。 com/doc/api greference/widgets/intestantsearch/react-hooks/）我并不是100％确定从哪里开始。我找不到InstantSearch React文档中的任何地方，无论如何它都可以在其中参考以配置这种东西。

我只是直接在API上而不是使用IntestantSearch触发事件，我是否会更好？

谢谢

Answer 1

诀窍是使用InstantSearch使用useInstantsearch：

const instantSearch = useInstantSearch();
instantSearch.use(middleware)

docs 应该告诉您该怎么做。