How do you update InfiniteHits session storage cache?

[landermedia]

import { createInfiniteHitsSessionStorageCache } from "instantsearch.js/es/lib/infiniteHitsCache";

const sessionStorageCache = createInfiniteHitsSessionStorageCache();

function App() {
  const { hits } = useInfiniteHits({ cache: sessionStorageCache });
}

Pretty contrived example above.

Question is how do you update hits after you make some partial updates in the backend? Reloading the browser seems to not make any difference...

Doing a search with the given Hit included with the results shows the updated values but the one's saved in Session Storag has old values. Doing client.clearCache() does not seem to do anything. Idk but maybe perhaps this is a bug?

[Haroenv]

There's indeed no out-of-the-box solution for this yet, but the key is ais.infiniteHits in sessionStorage, so if you clear that key before doing instantsearch.refresh(), it should work as expected. Something like this should work: https://codesandbox.io/s/hardcore-tharp-zhkpoe?file=/src/App.js:749-840

Note that accessing search.refresh() requires you to import InstantSearchContext, which isn't yet exported from the root, as we haven't decided on the best way to expose it.

Note that you probably want to set the page back to zero at that point too, depending on your implementation.

Hope that helps!

[landermedia]

thank you @Haroenv for the prompt response! I've applied removing session storage ais.infiniteHits strategically.

Does import InstantSearchContext work with Next.js? Although I can see the file path exists and the export is there, it doesn't seem to be able to do so: https://codesandbox.io/s/dreamy-christian-9pfvng?file=/pages/index.js (basically just your example above ported to Next.js)

Also tried es path at react-instantsearch-hooks/dist/es/lib/InstantSearchContext but to no avail.

[Haroenv]

The file should be available, maybe you need to add .js to the end? Otherwise a simple connector which exposes refresh works too: https://codesandbox.io/s/interesting-jepsen-yi1pi2?file=/pages/index.js

const connectRefresh = (renderFn, unmountFn) => (widgetParams) => ({
  init(args) {
    renderFn(this.getWidgetRenderState(args), true);
  },
  render(args) {
    renderFn(this.getWidgetRenderState(args), false);
  },
  dispose() {
    unmountFn();
  },
  getWidgetRenderState(args) {
    return {
      refresh: () => args.instantSearchInstance.refresh()
    };
  }
});

// ...
  const { refresh } = useConnector(connectRefresh);

[landermedia]

Thanks @Haroenv. I'm not sure but I can't get it to work Next.js with the export so I followed this connector approach you suggested. Here's a revised one for those who are working with TS.

Disclaimer: I'm a TS newbie so this could definitely be improved.

export const connectRefresh =
  (renderFn, unmountFn = () => {}) =>
  (widgetParams) => ({
    $$type: 'my-organisation.my-widget',
    init(args) {
      renderFn(this.getWidgetRenderState(args), true);
    },
    render(args) {
      renderFn(this.getWidgetRenderState(args), false);
    },
    dispose() {
      unmountFn();
    },
    getWidgetRenderState(args) {
      return {
        widgetParams,
        refresh: () => args.instantSearchInstance.refresh(),
      };
    },
  });

Now in usage:

const { refresh }: { refresh?: () => void } = useConnector(connectRefresh);