Store.refresh() not working with Nuxt?

[abattenburg]

I'm trying to test the searchStrore.refresh() method with Nuxt, and don't seem to be seeing any result. To test I'm changing my data in algolia, and then calling the method algoliaRefresh and looking for changes.

As shown below I'm using the Nuxt setup from this example, and referencing the created store with this.searchStore.refresh() in my algoliaRefresh function. I don't notice any change in the data until I leave the page and return to remount the component.

Currently to update Algolia data I've been reloading the entire page, but thats obviously a poor solution. As Algolia needs to be at the page level when using Nuxt, I can't wrap it in a parent component to remount just that component without reloading the entire page. Is their a suggested way to get around this? Or is Store.refresh() the only way to refresh data?

<div class="container">

    <div class="container">

      <button @click="algoliaRefresh">Testing</button>

      <ais-index :search-store="searchStore" class="wrapper" :query-parameters="{'page': page}">
        <div class="filter">
          <ais-search-box :class-names="{
                  'ais-input': 'form-control'
                  }">
            <ais-input placeholder="Search for a product..."></ais-input>
          </ais-search-box>

          <ais-refinement-list class="filter-skintype" :sort-by="sorting" attribute-name="bestFor" :class-names="{
                                      'ais-refinement-list__count': 'badge',
                                      'ais-refinement-list__item': 'label-item'
                                      }">
            <h3 class="filter-skintype-header" slot="header">What items</h3>
          </ais-refinement-list>
        </div>

        <div>
            <ais-results :stack="true" class="results posts">
              <template slot-scope="{ result }">

            <!-- Filter out Products with no reviews -->

                <div class="post grow" v-if="result.posts.length > 0">
                    <nuxt-link :to="`product/${result.objectID}`">
                        <h3>{{ result.name }}</h3>
                    </nuxt-link>
                </div>

                <div v-else>
                  <p class="filter-out">{{ result.posts.length }}</p>
                </div>
              </template>
            </ais-results>
        </div>

        <p v-observe-visibility="loadMore" class="load-more"></p>
        <ais-no-results></ais-no-results>
      </ais-index>
    </div>
  </div>
</template>

    import {
     createFromAlgoliaCredentials,
     createFromSerialized
    } from 'vue-instantsearch'

    const searchStore = createFromAlgoliaCredentials(
      'SOMETHING',
      'somethingElse'
    )
    searchStore.indexName = 'Products'

    export default {
      async asyncData() {
        searchStore.start()
        await searchStore.waitUntilInSync()

        return { serializedSearchStore: searchStore.serialize() }
      },

      data() {
        return {
          searchStore: null,
          page: 1,
          sorting: ['name:asc']
        }
      },

      created() {
        this.searchStore = createFromSerialized(this.serializedSearchStore)
      },

      methods: {
        algoliaRefresh() {
          searchStore.refresh()
          console.log('refresh')
        },
        loadMore(isVisible) {
          if (isVisible) {
            this.page++
            console.log('visible')
          }
        }
    }

[abattenburg]

As an update to this issue, I've tried a number of methods to trigger a reload (searchStore.stop()/ searchStore.start(), implementing the regular SSR solution) but with no luck.

However, a hacky way to get around this is to change the query via a method ( this.searchStore.query = '=') to a character not likely to be used. For some reason if an unused character is typed in for the first time, the data in the store refreshes to what is current. Updating the query this way also leaves the query blank in the searchbox so it kind of works. Again, that key can't have been used in the search before or you're out of luck. It's obviously a terrible solution....

I'll leave this issue open another few days in case anyone has thoughts on why new characters would cause Algolia to get current data. I'll keep experimenting with hacks on the query to update the data and why that's happening, but i'd really love to see a working example of the store.refresh() method if it exists.

[Haroenv]

that’s really odd, could you make this into a full github repository or example on Glitch so we can try it out?

In the meantime, another example that works to my knowledge is this one: https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/nuxt

[abattenburg]

I've been using that example since it was first added to the docs in September I think. Everything works fine except the refreshing which back then their didn't exist a method for. I saw it was introduced at algolia/react-instantsearch#619 for the react library, and that according to your issue #366 it has also been added to the vue version. Maybe I'm just misunderstanding how refresh is supposed to work? I thought that when called it would grab the current version of the search store but that could be wrong.

But yes I'll make a repo later to show exactly what I mean.

[Haroenv]

Vue InstantSearch v1 is no longer supported for now, please open a new issue if this issue persists in newer versions.