Bugs with hashed routing and linking to a specific filter from a different page

[JohnMica]

hi there,
not sure if this is a bug or i'm doing something wrong so that is why a discussion.

upgrading from version 0.xx to latest Vue version (4)
has to use hasmode as the app may be integrated in iframes on various pages

I have managed to

• use the provided components with slots
• get the filters dynamically from my Algolia BE

Now i the the logic that

• i am on a exhibitorspage ( [id].vue )
• i have a sidebar that contains some categories (and their ids)

When i click on a specific category i would need to

• pass the URL like { category_name : category_id }
• the ais-search would then load the URL and apply the filter automatically
  so from a URL like http://localhost:3000/#/exhibitors/uk-limited,
  i click on the category with the URL -> http://localhost:3000/#/exhibitors?refinementList%5Bquestion_option_ids%5D%5B0%5D=9bf76094-000000000000
• it loads the http://localhost:3000/#/exhibitors?refinementList%5Bquestion_option_ids%5D%5B0%5D=9bf76094-000000000000
• it loads the page but it doesnt apply the filter at all

Few issues with my approach

• I dont know the actual question_option_ids parameter as that could be also area, product, speaker, whatever_ids
• I dont know why it needs to be pluralized instead of the question_option_id

also when applying a filter on the localhost:3000/#/exhibitors the url params are attached before the hash

not sure if this can be solved but it should work in hash mode as well, no ?

[Haroenv]

How have you enabled the hashmode, I don't know of that option? Do you have a sandbox available for someone to reproduce?

[JohnMica]

hash mode is enabled in nuxt.config.ts

router: {
options: {
hashMode: true,
},
},

not sure algolia actually has this option at all.

this could be why the params are added to the actual URL and not the #/path?XXXXXXXX

[Haroenv]

I'm not sure what creates the URL, but the order of hash and query parameters is wrong, query param / search needs to be before the hash / fragment.

Did you provide anything to the routing option of InstantSearch?

[JohnMica]

just wanted to mention that without the hash all works as intended

the # is not an ID on a page or a link to an ID it is the SPA mode of using nuxt3 / vue-instantsearch 4 so basically the baseUrl of the whole app.

since this is going to be inside an iframe on a different domain, it needs to have the # and the URL params would ideally be after the hash.

at least in the current version (using version 0.x of Algolia) there was a way to update the query params manually)

and i would like to not have to manually watch all routes and internal state and update that unless i must do it.

this is the routing provided to Algolia where the indexName and algoliaSettings are coming from an internal API

import { history as historyRouter } from "instantsearch.js/es/lib/routers";
import { singleIndex as singleIndexMapping } from "instantsearch.js/es/lib/stateMappings";

...

const routing = computed(() => {
  return {
    router: historyRouter(),
    stateMapping: singleIndexMapping(indexName.value),
  };
});
const searchClient = computed(() =>
  algoliasearch(
    algoliaSettings.value.application_id,
    algoliaSettings.value.search_only_api_key
  )
);

[Haroenv]

What would solve your use-case is likely changing the parseURL to read from "search inside hash" rather than from location.search

const routing = computed(() => {
  return {
    router: historyRouter({
      parseURL({ qsModule, location }) {
        return qsModule.parse(location.hash.split("?")[1]), {
          arrayLimit: 99,
        });
      },
    }),
    stateMapping: singleIndexMapping(indexName.value),
  };
});

[JohnMica]

thanks for the suggestion.
so i might have to change the createURL function as well to add the URL params after the # and this would

• give me freedom to use whatever baseUrl i want (in this case the # but it could be anything really)
• allow the algolia client to search and update its filters depending on these URL params

[Haroenv]

Yes, you can further customise the settings, or even directly use vue router there

[JohnMica]

thanks again for the ideas

[JohnMica]

i ended up with this solution to allow

• filtering and updated currentRefinements
• linking to the main search results page with the filters
• reload the page and update the filters as needed

 router: historyRouter({
      createURL({ qsModule, location, routeState }) {
        const urlParts = location.href.match(/^(.*?)\/#\/exhibitors/);
        const baseUrl = `${urlParts ? urlParts[1] : ""}`;

        const queryString = qsModule.stringify(routeState, {
          addQueryPrefix: true,
          arrayFormat: "indices",
        });
        return `${baseUrl}#/exhibitors${queryString}`;
      },
      parseURL({ qsModule, location }) {
        return qsModule.parse(location.href.split("?")[1], {
          arrayLimit: 99,
          parseArrays: true,
        });
      },
    }),
    stateMapping: singleIndexMapping(indexName.value),

i do have another quick question though

the main page is in the exhibitors folder as exhibitors /index.vue

• I do have also dynamic pages inside the exhibitor folder exhibitors /[id]/index.vue
• whenever I actually go to a result from Algolia search I end up with a strange warning that Algolia doesn't support dynamic routing
• I can only assume this is from the way the pages are structured and the middleware that runs on all pages but just wanted to double check with you as well