Development discussions around Shopify APIs
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Hello,
I want to give the app user the option to search in his products.
I want to fetch the products when the user is typing.
It's working buy only if I'm adding the search term manually
Have a look on my code here:
function ProductsPage() {
// useEffect
const PRODUCTS_QUERY = gql`{
products(first: 20, query: "test") {
edges {
node {
id
title
images(first:1) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
originalSrc
id
}
}
}
}
}
}
}`;
const {loading, error, data} = useQuery(PRODUCTS_QUERY);
// search field vars
const [searchValue, setSearchValue] = useState('');
const handleSearchChange = useCallback((newValue) => {
setSearchValue(newValue);
console.log(newValue);
}, []);
// set search field
const searchField = (
<TextField
label="Search for product"
value={searchValue}
onChange={handleSearchChange}
/>
);
if (loading) return (
<Loading/>
);
if (error) return (
<Banner status="critical">
There was an issue loading products.
</Banner>
);
return <ProductsList data={data} searchField={searchField}/>
}
export default ProductsPage;
I want that when people typing in searchField component it will make a new request and search for more results.
User | RANK |
---|---|
19 | |
7 | |
7 | |
6 | |
5 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022