transformItems receives empty items array when used with useQueryRules hook

Open Q&A
, ,
#1

I am trying to filter out some results returned by Algolia and am trying out the useQueryRules hook. I created a QueryRuleContext component as follows:

import { useQueryRules } from 'react-instantsearch-hooks-web';

const transformItems = (items, { results }) => {
  console.log(items, results);
  return items;
};

const QueryRuleContext = (props) => {
  const { items } = useQueryRules({
    transformItems
  });

  return null;
};

export default QueryRuleContext;

I’m then using it directly within my InstantSearch component as <QueryRuleContext />. The results object is populated with all of the hits and other information as expected, but the items array is empty. What am I missing? Am I using the hook incorrectly? What’s the difference between items and results.hits?

#2

Hi @TSIA_SN and welcome!

useQueryRules is designed to allow you to manipulate your query and filters (we call it context) before triggering server side Rules for your application.

transformItems then gets called on the list of items returned from your rules. Is there a possibility that your rules are configured such that no items are returned?