algolia / algolia/instantsearch

Category filter is not applied by InstantSearchNext when the url is opened via next/link

Open
#6,359 2 comments 2 reactions 0 assignees View on GitHub
triage
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 (


Filters


{isCategoryPage && }
{filteredAttributes.map((attribute, index) => {
return (

);
})}


);
};

```

```
export const SubcategoryLinks = ({ onClick }: Props) => {
const { items } = useMenu({
attribute: 'category.nameUrl',
limit: 100,
transformItems,
});

return (


    {items.map((item, index) => (



  • {item.label}

     ({item.count})


  • ))}

);
};

```

image

image

![image](https://github.com/user-attachments/assets/8dbd10f4-3425-46ca-a07d-cd037cfe7933)

### 🔍 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.