1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

algolia 更新が反映されなかった

Posted at

##ハマったところ
クライアント側で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側で見たときにデータが変わっていても、検索結果は更新前のデータが出てきます><
どなたかの参考になれば幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?