Instantsearch.js: Provide a recipe for using turbolinks and the routing

[bobylito]

Is your feature request related to a problem? Please describe 🙏
Turbolinks is a tech that simulates SPA on traditional websites. The URLSync was compatible, the routing is not.

Describe the solution you'd like 🤔
No clear solution for now but the routing should be compatible and we should document how to implement it.

Additional context
This is a follow up of https://github.com/algolia/instantsearch.js/issues/985

[Spone]

So I got it working in our project, but I have to leave the turbolinks=true param in the URL, or it doesn't work. I'd love to find a way to hide it and keep my routing clean :)

You can view the live implementation here: https://www.woom.fr/recherche/experiences?q=test&turbolinks=true

[bobylito]

Thanks a lot @Spone for the status update 👍 :)

[mayeco]

ping

[tdutreui]

hello :)
anything new around here ?

[Haroenv]

Nothing new; workaround is still: https://github.com/algolia/instantsearch.js/issues/985#issuecomment-388899593

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

[Spone]

Hi there, I'm using the latest instantsearch.js on a new project and the Turbolinks support seems broken again... Any news on this?

[Haroenv]

We haven't changed anything regarding this @Spone, are you using the suggested workaround?

[Haroenv]

(to fix this without workaround, we need to pass turbolinks: true in the "state" object of the history.push, right now this is the "route state", so that's why you need to manually add it. It might make sense to have an option for this in the router, or a guide on how to write your own router with turbo links set as true)

[Spone]

Currently, when I use the recommended workaround, if I click on a link, I have to click the back button twice to get back to my original state. I'm not sure how to debug this...

[francoischalifour]

@Spone Can you please reproduce the behavior in this InstantSearch.js sandbox?

[AlexandreSi]

Hi there,
I encountered the problem here:

1. Go to https://www.woom.fr/activites/Clermont-Ferrand/dans-les-airs
2. Click on "Parapente (...)"
3. See that results are updated
4. Hit back to return to previous page, see that we don't find the same page (actually, it's the page https://www.woom.fr/activites/Clermont-Ferrand that is rendered)
5. Hit forward button, see that we have the same results as step 4.

parseURL is never called.

Do you need a live reproduction of the bug in a sandbox?

Thank you

[Haroenv]

A standalone sandbox is the only efficient way where we can debug yes. What I think might be the case is the turbolinks

1. not sending updates when the url changes
2. gets Removed if turbolinks is removed from location.history

[AlexandreSi]

I am not sure how to reproduce it giving the fact that we install turbolinks via the ruby gem (our backend being rails). Maybe you can help on this?

[Spone]

I am not sure how to reproduce it giving the fact that we install turbolinks via the ruby gem (our backend being rails). Maybe you can help on this?

You can install it using the NPM package: https://www.npmjs.com/package/turbolinks

[AlexandreSi]

Hi @Spone,
Thanks for the tip, I am just not sure that installing turbolinks a different way will reproduce the bug, I will try and see!
Thanks

[AlexandreSi]

Hi,

Here is a sandbox that should expose the problem: https://codesandbox.io/s/algolia-turbolinks-bad-behaviour-b5ed6?file=/src/app.js

The thing is that I didn't neet to add turbolinks: I don't understand why parseURL is not called at each click on back or forward buttons, as described by your documentation.

Thank you again

[Haroenv]

Since it's unrelated to turbolinks, could you open this in a new issue please? I don't know for sure yet what the cause is, but I feel like it might be related to the URL not being different to before

[marckohlbrugge]

Nothing new; workaround is still: #985 (comment)

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

Is this still the recommended workaround with the latest instantsearch and turbo(links) versions? Unfortunately it doesn't seem to have any effect for me (apart from adding turbolinks=true to the generated URL).

[Haroenv]

the state "turbolinks: true" still gets saved in the history state since it saves the whole route state:

https://github.com/algolia/instantsearch.js/blob/3648a3cdc561cca3d92c67f7c5121ed16d00c722/src/lib/routers/history.ts#L132

Alternatively you can change that line in a custom router to no longer save the InstantSearch state on history state, but then you'll need to make sure you also don't read from event.state in onUpdate:

https://github.com/algolia/instantsearch.js/blob/3648a3cdc561cca3d92c67f7c5121ed16d00c722/src/lib/routers/history.ts#L148

Hope that helps @marckohlbrugge, but otherwise it'll be best if there's a reproducible example with turbolinks + InstantSearch so we can investigate what's going wrong

[marckohlbrugge]

Thanks @Haroenv. I'll give it another try. Building a reproducible example is a bit tricky as both instantsearch and turbolinks are quite hard to set up as standalone scripts. But I'll see what I can do if I still can't get it to work with your suggestions above.