Anyway to clear client cache using hooks?

[cjbland]

I've been updating our application to use react-instantsearch-hooks and react-instantsearch-hooks-web and I'm struggling to find how to clear the client cache. We used the refresh prop on InstantSearch in the "dom" version but cannot find something similar in the "hooks" version. Am I missing something or has it not been implemented yet?

I'm specifically referring to this:
https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/#widget-param-refresh

And it doesn't appear to exist here:
https://www.algolia.com/doc/api-reference/widgets/instantsearch/react-hooks/

Any tips would be appreciated, thank you!

[francoischalifour]

Hey @cjbland – we've worked on the last Hook to support caching and other top-level APIs. It looks like this:

function Search() {
  const { refresh } = useInstantSearch();

  return (
    <div>
      <button
        onClick={() => {
          refresh();
        }}
      >
        Refresh
      </button>
    </div>
  );
}

function App(props) {
  return (
    <InstantSearch {...props}>
      <Search />
    </InstantSearch>
  );
}

Here's a sandbox that implements useSearchCache().

See previous solution

For now, you can use useConnector() to retrieve the underlying InstantSearch.js API and expose it in React.

function connectSearchCache(renderFn, unmountFn = () => {}) {
  return (widgetParams) => {
    return {
      $$type: 'custom.cache',
      render(renderOptions) {
        const { instantSearchInstance } = renderOptions;

        renderFn(
          {
            ...this.getWidgetRenderState(renderOptions),
            instantSearchInstance,
          },
          false
        );
      },
      getWidgetRenderState({ instantSearchInstance }) {
        return {
          refresh: instantSearchInstance.refresh.bind(instantSearchInstance),
          widgetParams,
        };
      },
      dispose() {
        unmountFn();
      },
    };
  };
}

function useSearchCache() {
  return useConnector(connectSearchCache);
}

function Search() {
  const { refresh } = useSearchCache();

  return (
    <div>
      <SearchBox />

      <button
        onClick={() => {
          refresh();
        }}
      >
        Refresh
      </button>

      <Hits hitComponent={Hit} />
    </div>
  );
}

export function App(props) {
  return (
    <InstantSearch {...props}>
      <Search />
    </InstantSearch>
  );
}

Here's a sandbox that implements useSearchCache().

[uncvrd]

Was also looking for this, thanks for the temporary workaround!

[cjbland]

Thanks @francoischalifour I appreciate the help! For me the example you gave "kind of" worked, but I'm running in an SSR environment and something caused it to crash on page transitions. I didn't dig into it too much because this is only a shim, so for the time being I'm using client.clearCache() until the new hook is implemented. Thanks again!

[francoischalifour]

Sounds good. Do you mind telling us what crashed in the SSR environment?

[cjbland]

I'm using @remix-run and when I navigate away from a route that uses useSearchCache I get this exception:

 index.js:244 Uncaught Error: The widget definition expects a `dispose` method.

See documentation: https://www.algolia.com/doc/api-reference/widgets/index-widget/js/
    at Object.removeWidgets (index.js:244:15)
    at useConnector.js:143:19
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at safelyCallDestroy (react-dom.development.js:20450:5)
    at commitUnmount (react-dom.development.js:20932:21)
    at commitNestedUnmounts (react-dom.development.js:21004:5)
    at unmountHostComponents (react-dom.development.js:21290:7)
    at commitDeletion (react-dom.development.js:21347:5)

[Haroenv]

@cjbland I've updated the code snippet with a dispose method :)