next.js中的hasura過濾總是一鍵延遲

Question

我通過 useRecipe_Filter 從 hasura 獲取數據並將 searchFilter state 作為變量傳遞給它。看起來每次我按下一個鍵 ui 都會更新一個按鍵以延遲過濾的數據被傳遞到結果 state

const SearchBar = (props: any) => {

鍵值 state 用作 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>
  );
};

這是我使用的查詢 _ilike 讓我們按不區分大小寫的字母進行比較，我使用 %% 以便能夠按一個字母進行比較

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

Answer 1

我通過為像這樣從 hasura 獲取的數據添加 useEffect 來解決這個問題

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