hasura filtering in next.js is always one key to late

Question

I am getting data from hasura though useRecipe_Filter and passing searchFilter state for it as a variable.It looks like everytime i press a key ui updates one key press to late filtered data is passed to results state

const SearchBar = (props: any) => {

key values state used as a variable for useRecipe_filter

  const [searchFilter, setSearchFilter] = useState('');
  const { data, loading, error } = useRecipe_Filter({
    variables: {
      title: `%${searchFilter}%`
    }
  });
  const filterRecipes = (e: any) => {
    setSearchFilter(e.target.value);
    let mappedData: any = [];
    if (data && data.recipes) {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>{error.message}</p>;
      mappedData = data.recipes.map((recipe: any) => {
        return {
          id: recipe.id,
          title: recipe.title,
          image: recipe.image,
          ingredients: recipe.ingredient_relation.map((ingredient: any) => {
            return {
              id: ingredient.id,
              name: ingredient.name
            };
          }),
          description: recipe.description
        };
      });
    }
    props.setResults(mappedData);
  };
  const handleAddNewRecipe = () => {
    props.onOpen();
    if (props.onSetChangeName(true) || props.onSetShowButton(true)) {
      props.onSetShowButton(false);
      props.onSetChangeName(false);
    }
    props.setFormName('');
    props.setFormImage('');
    props.setFormDescription('');
    props.setFormIngredient('');
  };

  return (
    <div>
      <Container>
        <input
          type="text"
          placeholder="Search for a recipe..."
          value={searchFilter}
          onChange={filterRecipes}
        />
        <button type="button" id="btn" onClick={handleAddNewRecipe}>
          Add new recipe
        </button>
      </Container>
      <RecipeList
        onOpen={props.onOpen}
        recipe={props.results}
        setRecipe={props.setResults}
        onSetShowButton={props.onSetShowButton}
        onSetChangeName={props.onSetChangeName}
        setFormName={props.setFormName}
        setFormImage={props.setFormImage}
        setFormDescription={props.setFormDescription}
        setFormIngredient={props.setFormIngredient}
      />
    </div>
  );
};

here is the query i used _ilike lets compare by case insensitive letters and i used %% to be able to compare by one letter

query recipe_filter($title: String!) {
  recipes(where: { title: { _ilike: $title } }) {
    id
    title
    image
    description
    ingredient_relation {
      id
      name
    }
  }
}

Answer 1

I solved this by adding useEffect for data that im geting from hasura like this

  useEffect(() => {
    props.setResults(mappedData);
  }, [data]);