shopify storefront search with graphql in Remix React

avocado23
Shopify Partner
15 0 3

I am new to Remix React projects, hence I'm having a difficult time understanding the structure of the project. I am trying to create a SearchBar Component in the Header and return the first 10 products related to user input. Here is my relevant Search Component code in the Header Component:

function SearchForm() {
  const SEARCH_PRODUCTS_QUERY = `
  query SearchProducts($query: String!) {
    products(query: $query, first: 10) {
      edges {
        node {
          id
          title
          handle
          description
        }
      }
    }
  }
`;
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  function handleSearch() {
    //    console.log('handle search', searchTerm);
  }
  return (
    <div>
      <input
        type="text"
        placeholder="search"
        value={searchTerm}
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <button type="button" onClick={handleSearch}>
        Search
      </button>
      <ul>
        {searchResults.map((product) => (
          <li key={product.node.id}>{product.node.title}</li>
        ))}
      </ul>
    </div>
  );
}

I am just rendering this inside the Header Component. I am not sure if I should handle the query here. Cause I think I need the API endpoints and such to get the response body. How can I implement the handleSearch function to make it work?

Replies 0 (0)