Development discussions around Shopify APIs
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 |
---|---|
10 | |
4 | |
3 | |
3 | |
3 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023