algolia / algolia/instantsearch
Category filter is not applied by InstantSearchNext when the url is opened via next/link
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
### 🐛 Current behavior
We are using InstantSearchNext to make SSR for Algolia search.
The category is parsed from the url and passed to the uiState
```
export const InstantSearchProvider = ({ indexName, ...props }: Props) => {
return (
);
};
```
We have a component that has `useMenu` hook. It's visible when the page is opened via `Category`
```
export const CategoryUrlFacet = ({ isSubCategory }: Props) => {
const attribute = isSubCategory ? 'category.url' : 'category.parent.url';
useMenu({ attribute: attribute, limit: 1 });
return null;
};
```
But when the page is opened via next/link `Category` so that transition is seamless we got warning that menu widget is absent and the category parameter is ignored so we retrieve all the products.
The issue is reproduced when `useDynamicWidgets` is used together with useMenu is another component
```
export const FiltersColumn = ({
excludedAttributes = [],
isPlp = false,
isSubCategory = false,
className,
}: Props) => {
const preAppliedAttributes = isSubCategory ? ['category.url'] : ['category.parent.url'];
const trackFilterClick = useTrackClickFilter();
const { attributesToRender } = useDynamicWidgets({
facets: isPlp ? preAppliedAttributes : ['*'],
maxValuesPerFacet: 100,
});
const isCategoryPage = isPlp && !isSubCategory;
const filteredAttributes = attributesToRender.filter(
(attribute) => !excludedAttributes.includes(attribute),
);
return (
{isCategoryPage && }
{filteredAttributes.map((attribute, index) => {
return (
);
})}
);
};
```
```
export const SubcategoryLinks = ({ onClick }: Props) => {
const { items } = useMenu({
attribute: 'category.nameUrl',
limit: 100,
transformItems,
});
return (
-
{item.label}
({item.count})
{items.map((item, index) => (
))}
);
};
```

### 🔍 Steps to reproduce
1. Open the category page (page is showing the correct number of products)
2. Open any product
3. Go to the category page using next/link
4. Result: Category filter wasn't applied. Search result consist of all the products (This issue is not consistent. It's reproduced time after time)
### Live reproduction
https://codesandbox/no-sandbox
### 💭 Expected behavior
CSR page to return the same result as SSR. All filters that have been set up by routing prop of the InstantSearchNext component are applied.
### Package version
algoliasearch 4.24.0, react-instantsearch 7.13.0, react-instantsearch-nextjs 0.3.10
### Operating system
macOS 14.5
### Browser
Chrome Version 128.0.6613.120
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Contributor guide
Research direction
Start with the InstantSearchNext routing configuration, especially parseURL, stateMapping, useMenu, and useDynamicWidgets, then reproduce the transition from a product page using next/link. Compare that client-side transition with opening the category URL directly and verify that the category filter is applied without the missing-widget warning and that CSR returns the SSR result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100