##ハマったところ
クライアント側でalgoliaデータを更新したときに、検索をし直しても、
algolia側ではデータが更新されてるにも関わらず、検索結果が更新前のデータのものであり、
毎回リロードをしないと更新後のデータが表示されなかった。
##ダメだった例
const algoliasearch = require('algoliasearch')
const REACT_APP_ALGOLIA_ID = "YOUR_REACT_APP_ALGOLIA_ID"
const REACT_APP_ADMIN_API_KEY = "YOUR_REACT_APP_ADMIN_API_KEY"
const client = algoliasearch(REACT_APP_ALGOLIA_ID, REACT_APP_ADMIN_API_KEY)
const index = client.initIndex('body_search')
class Search extends Component {
constructor(props) {
super(props);
this.onSearch = this.onSearch.bind(this)
}
async onSearch() {
let search_results
await index
.search({
query: '',
})
.then(function (responses) {
search_results = responses.hits
})
.catch(function (error) {
console.log(error)
})
// グローバルstateのstate.search_resultsにセットするreduxのaction
this.props.searchFinish(search_results)
}
render() {
return (
<div>
<button onClick={this.onSearch}>検索する</button>
{this.props.search_results.map(search_result => {
return (
<Result result={result} />
)
})}
</div>
)
}
}
##うまくいった例
const algoliasearch = require('algoliasearch')
const REACT_APP_ALGOLIA_ID = "YOUR_REACT_APP_ALGOLIA_ID"
const REACT_APP_ADMIN_API_KEY = "YOUR_REACT_APP_ADMIN_API_KEY"
const client = algoliasearch(REACT_APP_ALGOLIA_ID, REACT_APP_ADMIN_API_KEY)
class Search extends Component {
constructor(props) {
super(props);
this.onSearch = this.onSearch.bind(this)
}
async onSearch() {
const index = client.initIndex('body_search')
let search_results
await index
.search({
query: '',
})
.then(function (responses) {
search_results = responses.hits
})
.catch(function (error) {
console.log(error)
})
// グローバルstateのstate.search_resultsにセットするreduxのaction
this.props.searchFinish(search_results)
}
render() {
return (
<div>
<button onClick={this.onSearch}>検索する</button>
{this.props.search_results.map(search_result => {
return (
<Result result={result} />
)
})}
</div>
)
}
}
言われてみればあたり前のことでしたが、毎回indexを初期化してから検索をしないと、algolia側で見たときにデータが変わっていても、検索結果は更新前のデータが出てきます><
どなたかの参考になれば幸いです。