react-instantsearch
react-instantsearch copied to clipboard
algolia
useRange not returning any values.
🐛 Bug description
I'm trying to convert from the old HOC version and convert to hooks, the HOC version worked but the hook version gives the response from below.
What happens is we have some values that are range values and this doesn't work.
This is the console log that i've done.
const {
range: { min, max },
start: [minValue, maxValue],
canRefine,
refine,
} = useRange({ attribute: category });
console.log('HERE', category, min, max, minValue, maxValue, canRefine);
'HERE' milge 0 0 -Infinity Infinity false
🔍 Bug reproduction
Nothing public that can be worked on. Unfortunately.
💭 Expected behavior
Nothing should change from the older HOC version.
Environment
- React InstantSearch Hooks version: 6.26.0
- React version: 17.0.2
- Browser: 103.0.5060.114
- OS: macOS
do you have a sandbox with this behaviour? Have you tried the same code with the builtin RangeInput widget?
As a first hint, I'm not sure if you intended to write attribute: category or attribute: "category"?
Hey @The-Code-Monkey,
This would still be helpful to have a reproducible so we can at least compare what you had in React InstantSearch v6 and what you now have in React InstantSearch Hooks. It's fine if you can't share your current project, but you can reproduce the issue in isolation in a CodeSandbox, either using the Algolia index you already have, or create a new one with a small sample of data just for testing purposes.
Here are starter CodeSandbox projects you can use:
https://codesandbox.io/s/bold-napier-1vyn9b?file=/src/range-test.js
Here is an example of what i get when using your hooks sandbox.
in your sandbox I get a range value of 1, 5000 though, however there's two initial renders where there's no refinement yet. You can see how we convert to a "inclusive range" in the e-commerce example: https://github.com/algolia/react-instantsearch/blob/580cbab8176e41719f423efeb620df5fce2e866b/examples/hooks-e-commerce/components/PriceSlider.tsx#L61-L71
Ok but the other problem, as i think ive fixed that one is the fact that canRefine comes back as false which stops the refine function from working when previously it worked fine with the HOC version. What would cause the hook to say its not refineable.
does it always have canRefine false or only on the initial render @The-Code-Monkey?
This may be a bug because we need to add a check based on results.__isArtificial in connectRange(): https://github.com/algolia/instantsearch.js/blob/cf738b50d36c99c12995c79157920748094b4a7c/src/connectors/range/connectRange.ts#L428-L438
@Haroenv It's always canRefine false, for all of the different attributes it can be.
algoliasearch.umd.js:1809 POST https://-dsn.algolia.net/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.14.0)%3B%20Browser%3B%20instantsearch.js%20(4.43.1)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(6.30.2)%3B%20react-instantsearch-hooks%20(6.30.2)%3B%20JS%20Helper%20(3.10.0) net::ERR_NAME_NOT_RESOLVED
eval @ algoliasearch.umd.js:1809
send @ algoliasearch.umd.js:1777
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:515
Promise.then (async)
S @ algoliasearch.umd.js:514
n @ algoliasearch.umd.js:545
eval @ algoliasearch.umd.js:561
get @ algoliasearch.umd.js:240
d.responsesCache.get.miss @ algoliasearch.umd.js:560
get @ algoliasearch.umd.js:240
read @ algoliasearch.umd.js:559
eval @ algoliasearch.umd.js:1000
AlgoliaSearchHelper._search @ algoliasearch.helper.js:1326
AlgoliaSearchHelper.searchOnlyWithDerivedHelpers @ algoliasearch.helper.js:167
mainHelper.search @ InstantSearch.js:546
helper.search @ index.js:434
useInstantSearchApi @ useInstantSearchApi.js:66
InstantSearch @ InstantSearch.js:20
renderWithHooks @ react-dom.development.js:2522
updateFunctionComponent @ react-dom.development.js:2782
beginWork @ react-dom.development.js:3105
beginWork$1 @ react-dom.development.js:4027
performUnitOfWork @ react-dom.development.js:3825
workLoopSync @ react-dom.development.js:3818
renderRootSync @ react-dom.development.js:3815
performSyncWorkOnRoot @ react-dom.development.js:3745
eval @ react-dom.development.js:2069
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushSyncCallbackQueueImpl @ react-dom.development.js:2069
flushSyncCallbackQueue @ react-dom.development.js:2068
flushPassiveEffectsImpl @ react-dom.development.js:3972
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushPassiveEffects @ react-dom.development.js:3960
eval @ react-dom.development.js:3945
workLoop @ scheduler.development.js:415
flushWork @ scheduler.development.js:389
performWorkUntilDeadline @ scheduler.development.js:155
Show 9 more frames
algoliasearch.umd.js:1809 POST https://-1.algolianet.com/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.14.0)%3B%20Browser%3B%20instantsearch.js%20(4.43.1)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(6.30.2)%3B%20react-instantsearch-hooks%20(6.30.2)%3B%20JS%20Helper%20(3.10.0) net::ERR_NAME_NOT_RESOLVED
eval @ algoliasearch.umd.js:1809
send @ algoliasearch.umd.js:1777
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:475
Promise.then (async)
onRetry @ algoliasearch.umd.js:474
eval @ algoliasearch.umd.js:509
eval @ algoliasearch.umd.js:510
Promise.then (async)
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:515
Promise.then (async)
S @ algoliasearch.umd.js:514
n @ algoliasearch.umd.js:545
eval @ algoliasearch.umd.js:561
get @ algoliasearch.umd.js:240
d.responsesCache.get.miss @ algoliasearch.umd.js:560
get @ algoliasearch.umd.js:240
read @ algoliasearch.umd.js:559
eval @ algoliasearch.umd.js:1000
AlgoliaSearchHelper._search @ algoliasearch.helper.js:1326
AlgoliaSearchHelper.searchOnlyWithDerivedHelpers @ algoliasearch.helper.js:167
mainHelper.search @ InstantSearch.js:546
helper.search @ index.js:434
useInstantSearchApi @ useInstantSearchApi.js:66
InstantSearch @ InstantSearch.js:20
renderWithHooks @ react-dom.development.js:2522
updateFunctionComponent @ react-dom.development.js:2782
beginWork @ react-dom.development.js:3105
beginWork$1 @ react-dom.development.js:4027
performUnitOfWork @ react-dom.development.js:3825
workLoopSync @ react-dom.development.js:3818
renderRootSync @ react-dom.development.js:3815
performSyncWorkOnRoot @ react-dom.development.js:3745
eval @ react-dom.development.js:2069
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushSyncCallbackQueueImpl @ react-dom.development.js:2069
flushSyncCallbackQueue @ react-dom.development.js:2068
flushPassiveEffectsImpl @ react-dom.development.js:3972
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushPassiveEffects @ react-dom.development.js:3960
eval @ react-dom.development.js:3945
workLoop @ scheduler.development.js:415
flushWork @ scheduler.development.js:389
performWorkUntilDeadline @ scheduler.development.js:155
Show 14 more frames
ConnectedRangeRefinement.tsx:34 HERE milge 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE vrmYr 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE bhp 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE lngth 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE milge 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE vrmYr 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE bhp 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE lngth 0 0 -Infinity Infinity false
algoliasearch.umd.js:1809 POST https://-2.algolianet.com/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.14.0)%3B%20Browser%3B%20instantsearch.js%20(4.43.1)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(6.30.2)%3B%20react-instantsearch-hooks%20(6.30.2)%3B%20JS%20Helper%20(3.10.0) net::ERR_NAME_NOT_RESOLVED
eval @ algoliasearch.umd.js:1809
send @ algoliasearch.umd.js:1777
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:475
Promise.then (async)
onRetry @ algoliasearch.umd.js:474
eval @ algoliasearch.umd.js:509
eval @ algoliasearch.umd.js:510
Promise.then (async)
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:475
Promise.then (async)
onRetry @ algoliasearch.umd.js:474
eval @ algoliasearch.umd.js:509
eval @ algoliasearch.umd.js:510
Promise.then (async)
e @ algoliasearch.umd.js:500
eval @ algoliasearch.umd.js:515
Promise.then (async)
S @ algoliasearch.umd.js:514
n @ algoliasearch.umd.js:545
eval @ algoliasearch.umd.js:561
get @ algoliasearch.umd.js:240
d.responsesCache.get.miss @ algoliasearch.umd.js:560
get @ algoliasearch.umd.js:240
read @ algoliasearch.umd.js:559
eval @ algoliasearch.umd.js:1000
AlgoliaSearchHelper._search @ algoliasearch.helper.js:1326
AlgoliaSearchHelper.searchOnlyWithDerivedHelpers @ algoliasearch.helper.js:167
mainHelper.search @ InstantSearch.js:546
helper.search @ index.js:434
useInstantSearchApi @ useInstantSearchApi.js:66
InstantSearch @ InstantSearch.js:20
renderWithHooks @ react-dom.development.js:2522
updateFunctionComponent @ react-dom.development.js:2782
beginWork @ react-dom.development.js:3105
beginWork$1 @ react-dom.development.js:4027
performUnitOfWork @ react-dom.development.js:3825
workLoopSync @ react-dom.development.js:3818
renderRootSync @ react-dom.development.js:3815
performSyncWorkOnRoot @ react-dom.development.js:3745
eval @ react-dom.development.js:2069
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushSyncCallbackQueueImpl @ react-dom.development.js:2069
flushSyncCallbackQueue @ react-dom.development.js:2068
flushPassiveEffectsImpl @ react-dom.development.js:3972
unstable_runWithPriority @ scheduler.development.js:465
runWithPriority$1 @ react-dom.development.js:2063
flushPassiveEffects @ react-dom.development.js:3960
eval @ react-dom.development.js:3945
workLoop @ scheduler.development.js:415
flushWork @ scheduler.development.js:389
performWorkUntilDeadline @ scheduler.development.js:155
Show 19 more frames
i18next.js:89 i18next::translator: missingKey en translation Representative Example Representative Example
ConnectedRangeRefinement.tsx:34 HERE milge 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE vrmYr 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE bhp 0 0 -Infinity Infinity false
ConnectedRangeRefinement.tsx:34 HERE lngth 0 0 -Infinity Infinity false
algoliasearch.umd.js:1809 POST https://-3.algolianet.com/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.14.0)%3B%20Browser%3B%20instantsearch.js%20(4.43.1)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(6.30.2)%3B%20react-instantsearch-hooks%20(6.30.2)%3B%20JS%20Helper%20(3.10.0) net::ERR_NAME_NOT_RESOLVED
This is the console logs for the algolia stuff when it doesnt work.
based on https://-3.algolianet.com/, I see that you didn't pass any application id to algoliasearch (or possibly empty string)
I thought that, but i have the
appId, apiKey, and indexName all in the correct places if im correct.
So the algoliaSearch function takes the appId and the apiKey and then the InstantSearch component takes the indexName and the returned searchClient from the previous function. shouldnt be anything else i need to do correct?
I will try manually putting them in rather than waiting for the api to pull it from our db
Yeah i get the same results. Are there any config differences i need to make to the algolia index to enable the hooks to work or should they work the same
It should work the same, but if you have a reproduction, that would be ideal, as there's something which is preventing the network request in your case, according to the stack trace
ok ill have another look thanks for your help ill update the ticket with what i find.
Ok so something a little stranger is that useRefinementList works for the listable options with the exact same config yet useRange does not.
This may be a bug because we need to add a check based on
results.__isArtificialinconnectRange(): https://github.com/algolia/instantsearch.js/blob/cf738b50d36c99c12995c79157920748094b4a7c/src/connectors/range/connectRange.ts#L428-L438
Im guessing its due this comment as I can't think of any other reason why this wouldn't work?
As if thats the only difference between the connectRange and useRange that would be my first point of call.
@Haroenv
I have found one thing by changing branch and going back to connectRange the currentRefinement comes back as undefined, undefined for min and max.
whereas the min and max for the useRange hook come back as 0 0 could that be the difference which is causing the canRefine value to be set to false instead.
something else i just noticed even though we can refine is connectRange, canRefine is still false but allows the refine function to work thus allowing the range to work.
I have just booted up a new project and im getting the same results with only the algolia lib installed and nothing else. I'm assuming its a config issue with our index.
If i want to use the useRange hook where do i need to put the key in the algolia index config.
@The-Code-Monkey I think I have/had a similiar issue when moving from react-instant-search to react-instant-search hooks.
After adding the attribute I wanted to use the range filter on to the Facets as not searchable I get results back from it. But it is still buggy. I work with timestamps and I can't work with future dates anymore, whereas this worked with the react-instant-search without any problems.
Hi, I've put React InstantSearch's connectRange and React InstantSearch Hooks useRange side by side, and canRefine is true after initial rendering, with the sample dataset from Algolia: https://codesandbox.io/s/small-sky-mrdflm?file=/src/ReactInstantSearch.js.
As React InstantSearch Hooks uses a different logic from React InstantSearch, the underlying APIs can be incompatible. My guess is that your dataset configuration might miss something to make it work with React InstantSearch Hooks. For example, make sure your attribute is set as attributesForFaceting and that all the values are numbers, as stated here: https://www.algolia.com/doc/api-reference/widgets/range-input/react-hooks/?client=react#about.
Am also facint this issue for few times it worked as below but now it's not returning any data.
@anandtoshniwal what do you mean that you don't get results? range has a value, and start isn't set yet as it's not currently refined
@The-Code-Monkey Did @dhayab's answer help you out?
We're doing a round of cleanup before migrating this repository to the new InstantSearch monorepo. This issue seems not to have generated much activity lately and is to be mostly solved, so we're going to close it. Feel free to reopen it if needed.
