I am fetching data from Hasura using useRecipe_Filter and passing the searchFilter state as a variable. It seems that every time I press a key, the UI updates with one keystroke delay before filtered data is passed to the results state.
const SearchBar = (props: any) => {
The searchFilter state is used as a variable for useRecipe_filter
const [searchFilter, setSearchFilter] = useState('');
const { data, loading, error } = useRecipe_Filter({
variables: {
title: `%${searchFilter}%`
}
});
const filterRecipes = (e: any) => {
// code block here
};
const handleAddNewRecipe = () => {
// code block here
};
return (
<div>
// JSX code here
</div>
);
};
This is the query I utilized with _ilike to perform case-insensitive comparisons and used %% to compare by individual letters
query recipe_filter($title: String!) {
recipes(where: { title: { _ilike: $title } }) {
id
title
image
description
ingredient_relation {
id
name
}
}
}