Filters' parameters disappear on refresh

Hello there.

I’ m currently implementing Algolia InstantSearch. I’ ve created a search Page using both InstantSearch and Vue InstantSearch. Both pages are working as expected expect from one thing. I’ ve implemented custom routing and it works just fine. The URLs are being created in the way I want them to be BUT as soon as I refresh the page the URL created using the custom routing disappears. Any way to get by this? Bellow I present the part of my code related to the custom routing I implemented.

const router = historyRouter({
    windowTitle({ category, query }) {
        // query = searchQuery
        // const queryTitle = query ? `${pageTitleQuery} ${query}` : `${pageTitleNoQuery}`;
        const queryTitle = query;

        // // if (category) {
        // // return `${category} – ${queryTitle}`;
        // // }

        return queryTitle;
    },

    createURL({ qsModule, routeState, location }) {
        const urlParts = location.href.match(/^(.*?)\/search/);
        const baseUrl = `${urlParts ? urlParts[1] : ''}/`;
        const queryParameters = {};

        if (routeState.query) {
            queryParameters.query = encodeURIComponent(routeState.query);
        }

        if (routeState.page !== 1) {
            queryParameters.page = routeState.page;
        }

        if (routeState.price) {
            queryParameters.price = routeState.price;
        }
        if (routeState.make) {
            queryParameters.make = routeState.make.map(encodeURIComponent);
        }
        if (routeState.body_type) {
            queryParameters.body_type = routeState.body_type;
        }
        if (routeState.fuel_type) {
            queryParameters.fuel_type = routeState.fuel_type;
        }
        if (routeState.cc) {
            queryParameters.cc = routeState.cc;
        }
        if (routeState.reg_year) {
            queryParameters.reg_year = routeState.reg_year;
        }
        if (routeState.transmission) {
            queryParameters.transmission = routeState.transmission;
        }

        const queryString = qsModule.stringify(queryParameters, {
            addQueryPrefix: true,
            arrayFormat: 'comma'
        });

        return `${baseUrl}test-search-vue${queryString}`;
    },

    parseURL({ qsModule, location }) {
        const { query = '', page, price = [], make = [], body_type = [], fuel_type = [], cc = [], reg_year = [], transmission = [] } = qsModule.parse(
            location.search.slice(1)
        );
        const allPrices = Array.isArray(price) ? price : [price].filter(Boolean);
        const allMakes = Array.isArray(make) ? make : [make].filter(Boolean);
        const allBodyTypes = Array.isArray(body_type) ? body_type : [body_type].filter(Boolean);
        const allFuelTypes = Array.isArray(fuel_type) ? fuel_type : [fuel_type].filter(Boolean);
        const allCC = Array.isArray(cc) ? cc : [cc].filter(Boolean);
        const allregYears = Array.isArray(reg_year) ? reg_year : [reg_year].filter(Boolean);
        const allTransmissionTypes = Array.isArray(transmission) ? transmission : [transmission].filter(Boolean);
        return {
            query: decodeURIComponent(query),
            page,
            price: allPrices.map(decodeURIComponent),
            make: allMakes.map(decodeURIComponent),
            body_type: allBodyTypes.map(decodeURIComponent),
            fuel_type: allFuelTypes.map(decodeURIComponent),
            cc: allCC.map(decodeURIComponent),
            reg_year: allregYears.map(decodeURIComponent),
            transmission: allTransmissionTypes.map(decodeURIComponent),
        };
    }
});

const getStateMapping = ({ indexName }) => ({
    stateToRoute(uiState) {
        const indexUiState = uiState[indexName] || {};
        return {
            query: indexUiState.query,
            page: indexUiState.page,
            price: indexUiState.numericMenu && indexUiState.numericMenu.final_price || indexUiState.range && indexUiState.range.final_price,
            make: indexUiState.refinementList && indexUiState.refinementList.make,
            body_type: indexUiState.refinementList && indexUiState.refinementList.body_type_alt_localized,
            fuel_type: indexUiState.refinementList && indexUiState.refinementList.fuel_type_localized,
            cc: indexUiState.numericMenu && indexUiState.numericMenu.cc,
            reg_year: indexUiState.numericMenu && indexUiState.numericMenu.reg_year,
            transmission: indexUiState.refinementList && indexUiState.refinementList.transmission_localized,
        };
    },
                
    routeToState(routeState) {
        return {
            instant_search: {
                query: routeState.query,
                page: routeState.page,
                numericMenu: {
                    price: routeState.final_price,
                    reg_year: routeState.reg_year,
                    cc: routeState.cc
                },
                refinementList: {
                    make: routeState.make,
                    body_type: routeState.body_type_alt_localized,
                    fuel_type: routeState.fuel_type_localized,
                    transmission: routeState.transmission_localized
                },
                range: {
                    price: routeState.final_price,
                }
            }
        }
    }
});

Hi @giannis.alexiou,

I don’t understand how you’re using both InstantSearch and Vue InstantSearch at the same time. I guess one in a page, and another one in another page?

If you try this example:

It has the routing enabled and whenever you refresh the page, the URL and the refinements stay. Can you update the example to reproduce your issue?

Hello @eunjae.lee

No. Not both of them in the same time. I’ ve constructed the same page using both InstantSearch and Vue InstantSearch in order to test it. But in both versions I have the same issue regarding the routing.

The example you posted here is using the default routing from algolia. It is not customized. Using the default routing I have no problems either. Using the custom routing I have implemented based on your documentation (https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/, https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/) I get the certain issue on refresh

Can you also take a look at this example please?

This has a custom implement for routing but works fine with refreshes.
If you come up with a reproducible example, it’d be easier to investigate the bug you’re encountering.

Yeah… I’ ve seen that… I builded my code based on that example :sweat_smile:

I forgot to mention that our whole App is being hosted in a Laravel environment. I don’ t think it has something to do with, but let me comment that anyway.

Hi @giannis.alexiou,

The default behaviour doesn’t seem to display it. I think it could possibly be due to a custom widget, custom onStateChange or searchFunction, but not sure which one or what. Can you create a minimal version in codesandbox which still shows the issue? there’s examples higher on the page here