Instantsearch.js: urlSync + Turbolinks back button not working

[ThomasBush]

I am using the using instantsearch with turbolinks and am experiencing an issue where the back button is not working correctly.

My search coffeescript

search = instantsearch(
      appId: 'id'
      apiKey: 'key'
      indexName: 'index'
      urlSync: {
        threshold: 300
      })

When I search products, the url is updated as expected, search works. If I click on a product, than click the back button, the url changes to the previously generated search url, but I stay on the product#show page for the instance I was viewing. Clicking back button a second time takes me to the root /products page.

This issue doesn't occur when setting useHash: true, unfortunately analytics team needs this to be query params.

[vvo]

Can you point us to a live example of the bug you are experiencing?

Maybe build a simple reduced test case using turbolinks + instantsearch.js to demonstrate the problem?

That would help us, thanks

[ThomasBush]

Sorry @vvo, it looks like you fixed with @kle-roy, but I am still experiencing the same issue, so I am trying to figure out what I am missing. I updated my instantsearch.min.js to 1.4.5. Does it look like I am passing the new setting correctly when instantiating? Thanks.

   search = instantsearch(
      appId: 'id'
      apiKey: 'key'
      indexName: 'products'
      urlSync: {
        threshold: 300
        useHash: false
        getHistoryState: ->
          { turbolinks: true }
      }) 

[kle-roy]

@ThomasBush : as mentioned by @vvo on #992, the getHistoryState feature is not released yet ; for now, you can just test it on the develop branch

[ThomasBush]

Ah thanks, sorry, I missed that last bit.

[Spone]

Hi @vvo do you have an example of how to achieve Turbolinks compatibility with the new router option?

[Haroenv]

Seems like we need to add { turbolinks: true } as the first argument of history.replaceState in routing if that's the case cc @bobylito

[Haroenv]

@Spone, can you try:

instantsearch({
  routing: {
    stateMapping: {
      stateToRoute(uiState) {
        return {
          turbolinks: true,
          ... uiState,
        };
      },
      routeToState({turbolinks, ...routeState}) {
        return routeState
      }
    }
  }
});

I can't try this because I don' have a reproduction

[Spone]

@Haroenv it seems to work perfectly! Thanks

[bobylito]

@Haroenv amazing :) Seems like a good thing to add into a migration guide (maybe the one for preparing v3?)

[Haroenv]

Yes, or maybe we could make it an option to add this by default?

[bobylito]

Yes, or maybe we could make it an option to add this by default?

It's a rather specific use case and the fix is very small, I don't know if there is a strong benefit to have an option 🤔

[Spone]

But turbolinks=true appears in the URL query string when I do that. Can I hide it?

Also, it would be great to have at least a few lines of documentation about this turbolinks options. It seems to be black magic :D

[bobylito]

Also, it would be great to have at least a few lines of documentation about this turbolinks options. It seems to be black magic :D

Yes totally, especially since it was an option of the urlSync. From what I can read about turbolinks, the project is very much black magic 😅

But turbolinks=true appears in the URL query string when I do that. Can I hide it?

I'm not quite sure how turbolinks works in practice. I don't know if you store the attribute in the history data would it still work. Could you try to remove the turboLinks attribute from the URL using a custom createURL function https://community.algolia.com/instantsearch.js/v2/guides/routing.html#historyopts?

[Spone]

If I remove the turbolinks option like that:

import historyRouter from 'instantsearch.js/es/lib/routers/history.js';

// [...]

      router: historyRouter({
        createURL: ({ qsModule, routeState, location }) => {
          delete routeState.turbolinks; // <<<< HERE
          const { protocol, hostname, port = '', pathname, hash } = location;
          const queryString = qsModule.stringify(routeState);
          const portWithPrefix = port === '' ? '' : `:${port}`;
          if (!routeState || Object.keys(routeState).length === 0)
            return `${protocol}//${hostname}${portWithPrefix}${pathname}${hash}`;
          else
        return `${protocol}//${hostname}${portWithPrefix}${pathname}?${queryString}${hash}`;
        }
      }),

... it doesn't appear in the URL but it breaks the Turbolinks behavior (as if the option was not defined).

To be clear: what breaks is that if I click on a hit, I cannot go back to the search results with one click on the back button.

[bobylito]

To be clear: what breaks is that if I click on a hit, I cannot go back to the search results with one click on the back button.

Ok. Do you have an error? Maybe the problem is that the default parseURL function can't parse it back.

[Spone]

Nope, no error, just behaving as if the turbolinks=true option was not enabled.

[bobylito]

Closing this issue in favor of https://github.com/algolia/instantsearch.js/issues/2998