How to configure hitsPerPage so it is restored from the router on a page load?

Hello, I am trying to set up pagination with react-instantsearch.

I wish to preserve the hitsPerPage value in the URL, so that if the URL is shared, the recipient will get the same hits per page value when they load the page via the shared URL.

My configuration is as follows:

  1. <Configure hitsPerPage={20} >
  2. routing enabled in the InstantSearch component.
  3. useHitsPerPage hook as follows:
 useHitsPerPage({
    items: [20, 50, 100].map((pageSize) => ({
      label: `View ${pageSize} per page`,
      value: pageSize,
      default: pageSize === 20,
    })),

I can perform the search and change the hitsPerPage via the menu properly. I see that the following query param is added:

[hitsPerPage]=50

However, if I take that resulting URL with the hitsPerPage, and load it in another browser session, the value is lost, and the hitsPerPage goes back to 20. The URL is re-written and the hits per page query param disappears.

The documentation doesn’t seem to explain how to configure hitsPerPage so that it will default to a value in the query string, if it exists. For example, should the “default” parameter in the useHitsPerPage’s items array be dynamic based on the URL query parameter value? Or is the library supposed to handle that? The latter is true for some other search parameters, so I thought maybe it would be for this too.

I’m not sure if I’m inadvertently overriding the URL’s hitsPerPage with the way I am configuring it.

It seems like you’re encountering an issue with preserving the hitsPerPage value in the URL when using react-instantsearch with pagination. Here are some suggestions to help you resolve this issue and ensure that the hitsPerPage value is maintained in the URL:

Check Routing Configuration:

  • Ensure that routing is properly enabled in your InstantSearch component. This is essential for react-instantsearch to manage the URL parameters and preserve state across page loads.

Example:

<InstantSearch
  appId="YOUR_APP_ID"
  apiKey="YOUR_API_KEY"
  indexName="YOUR_INDEX_NAME"
  routing={true} // Ensure routing is enabled
>
  {/* Other components and configurations */}
</InstantSearch>

Dynamic Default Value for hitsPerPage:

  • Instead of setting a static default value for hitsPerPage in your useHitsPerPage hook, consider making it dynamic based on the URL query parameter value. This ensures that the hitsPerPage value from the URL is honored as the default when the page loads.

Example:

const { hitsPerPage: hitsPerPageFromUrl } = useURLQueryParam('hitsPerPage', NumberDeserializer);

useHitsPerPage({
  items: [20, 50, 100].map((pageSize) => ({
    label: `View ${pageSize} per page`,
    value: pageSize,
    default: pageSize === hitsPerPageFromUrl, // Use hitsPerPage from URL as default
  })),
});

Here, useURLQueryParam is a custom hook (you may need to implement it or use a library like react-url-query) to extract the hitsPerPage value from the URL query parameter.

Handle URL Changes:

  • Make sure that your application properly handles URL changes and updates the hitsPerPage value accordingly. React Router or similar routing libraries can be used to achieve this. When the hitsPerPage value changes in the URL, update the hitsPerPage state in your application accordingly.

Debugging URL Changes:

  • Use browser developer tools to inspect the URL changes and check if the hitsPerPage query parameter is correctly added and maintained when changing the hitsPerPage value through the menu. This can help identify any issues with URL management in your application.

By following these suggestions and ensuring that routing is enabled, handling URL changes correctly, and using dynamic HPInstantInk default values for hitsPerPage based on the URL query parameter, you should be able to preserve the hitsPerPage value in the URL and maintain consistency across different browser sessions.

[quote=“alex15 bcbsfl, post:1, topic:20123, full:true”]
Hello, I am trying to set up pagination with react-instantsearch.

I wish to preserve the hitsPerPage value in the URL, so that if the URL is shared, the recipient will get the same hits per page value when they load the page via the shared URL.

My configuration is as follows:

  1. <Configure hitsPerPage={20} >
  2. routing enabled in the InstantSearch component.
  3. useHitsPerPage hook as follows:
 useHitsPerPage({
    items: [20, 50, 100].map((pageSize) => ({
      label: `View ${pageSize} per page`,
      value: pageSize,
      default: pageSize === 20,
    })),

I can perform the search and change the hitsPerPage via the menu properly. I see that the following query param is added:

[hitsPerPage]=50

However, if I take that resulting URL with the hitsPerPage, and load it in another browser session, the value is lost, and the hitsPerPage goes back to 20. The URL is re-written and the hits per page query param disappears.

The documentation doesn’t seem to explain how to configure hitsPerPage so that it will default to a value in the query string, if it exists. For example, should the “default” parameter in the useHitsPerPage’s items array be dynamic based on the URL query parameter value? Or is the library supposed to handle that? The latter is true for some other search parameters, so I thought maybe it would be for this too.

I’m not sure if I’m inadvertently overriding the URL’s hitsPerPage with the way I am configuring it.
[/quote]

Hello, @alex15
To ensure that the hitsPerPage value is preserved in the URL when using react-instantsearch, you’ll need to make use of the library’s routing system which allows you to manage the search state in the URL. Here’s a simplified approach to achieve this:

Enable Routing: Make sure that routing is enabled in your InstantSearch component.
Customize State Mapping: Implement a custom state mapping that reads the hitsPerPage value from the URL and applies it to the search state.
Update the default Parameter: Modify the default parameter in your useHitsPerPage hook to be dynamic based on the URL query parameter value.

Here’s an example of how you might implement this:

import { useHistory } from ‘react-router-dom’;

const searchStateToUrl = (searchState) => {
// Your logic to turn searchState into a URL
};

const urlToSearchState = (location) => {
// Your logic to parse the URL into a searchState
return {
…searchState,
hitsPerPage: location.query[‘hitsPerPage’] || 20
};
};

const App = () => {
const history = useHistory();
const { location } = history;

const searchState = urlToSearchState(location);

return (
<InstantSearch
searchState={searchState}
onSearchStateChange={(updatedSearchState) => {
history.push(searchStateToUrl(updatedSearchState));
}}
createURL={searchStateToUrl}
// … other props
>

{/* … other components */}

);
};

In this example, urlToSearchState reads the hitsPerPage value from the URL and sets it in the search state, while searchStateToUrl updates the URL with the current search state. This way, when the URL is shared and loaded in another session, the hitsPerPage value is preserved.

I hope my suggestion is helpful for you.

Best Regard,
Diana658hill

Hello,
To configure hitsPerPage so it is restored from the router on a page load in a web application using Vue.js with Vue Router or React with React Router, you can retrieve the hitsPerPage parameter from the router’s query parameters this.$route.query in Vue.js or location.search in React). Parse the value from mgh patient gateway the query string and use it to initialize the hitsPerPage state or component property. This approach ensures that the hitsPerPage value is restored and maintained based on the URL query parameter when the page loads, allowing your application to utilize this parameter for dynamic behavior or rendering logic.