const FetchPosts = async ({criteria}) => {
console.log(criteria) //from useQuery key
//your get api call here with criteria params
return posts;
};
const [criteria, setCriteria] = useState("")
const {isLoading, data: post} = useQuery(["posts", criteria], FetchPosts); //include criteria state to query key
console.log(post)
<select
name="filter"
value={criteria}
onChange={(e) => {
setCriteria(e.target.value); // trigger a re-render and cause the useQuery to run the query with the newly selected criteria
}}
>
<option>Most recent First</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
</select>