Skip to main content

📦 FetchSearchResult

TypeScript interface defining the return value structure of the getSearchResult() function.

📋 Interface Definition​

interface FetchSearchResult {
  products: Product[];
  pageInfo: ProductsPageInfo | null;
  availableFilters?: FilterGroup[];
  totalCount?: number;
  searchTerm: string;
  error: string | null;
}

🔍 Properties​

products​

  • Type: Product[]
  • Description: Array of products matching the search criteria
  • Always present: Yes (empty array if no results)

pageInfo​

  • Type: ProductsPageInfo | null
  • Description: Pagination information for cursor-based navigation
  • Null when: No results or pagination not applicable

availableFilters​

  • Type: FilterGroup[]
  • Description: Dynamic filters available based on current search results
  • Optional: Yes (may not be present in all responses)

totalCount​

  • Type: number
  • Description: Total number of products matching the search
  • Optional: Yes (may not be present in all responses)

searchTerm​

  • Type: string
  • Description: The search query that was executed
  • Always present: Yes

error​

  • Type: string | null
  • Description: Error message if the search failed
  • Null when: Search was successful

📄 Related Types​

Product​

interface Product {
  id: string;
  title: string;
  handle: string;
  descriptionHtml: string;
  featuredImage: Image | null;
  images: Image[];
  variants: Variant[];
  price: {
    amount: number;
    currencyCode: string;
  };
  compareAtPrice: {
    amount: number;
    currencyCode: string;
  } | null;
  metafields: Record<string, any>;
}

ProductsPageInfo​

interface ProductsPageInfo {
  hasNextPage: boolean;
  hasPreviousPage: boolean;
  startCursor: string | null;
  endCursor: string | null;
}

FilterGroup​

interface FilterGroup {
  id: string;
  label: string;
  type: "LIST" | "PRICE_RANGE" | "BOOLEAN";
  values: FilterValue[];
}

interface FilterValue {
  id: string;
  label: string;
  count: number;
  input: any; // Filter input object for applying this filter
}

Variant​

interface Variant {
  id: string;
  productTitle: string;
  variantTitle: string;
  price: {
    amount: number;
    currencyCode: string;
  };
  compareAtPrice: {
    amount: number;
    currencyCode: string;
  } | null;
  metafields: Record<string, any>;
}

Image​

interface Image {
  id: string;
  url: string;
  altText: string | null;
  width: number;
  height: number;
}

🧪 Usage Examples​

Basic Result Handling​

const { data, error } = await getSearchResult({
  query: "solar panels",
  limit: 12,
});

if (error) {
  console.error("Search failed:", error);
  return;
}

// data is of type FetchSearchResult
console.log(`Found ${data.totalCount} results for "${data.searchTerm}"`);
console.log(`Showing ${data.products.length} products`);

data.products.forEach((product) => {
  console.log(`${product.title} - $${product.price.amount}`);
});

Pagination Handling​

const result = await getSearchResult({
  query: "solar kit",
  limit: 10,
});

if (result.pageInfo?.hasNextPage) {
  // Fetch next page
  const nextPage = await getSearchResult({
    query: "solar kit",
    limit: 10,
    cursor: result.pageInfo.endCursor,
  });
}

Filter Processing​

const result = await getSearchResult({
  query: "renewable energy",
  limit: 20,
});

// Process available filters for UI
result.availableFilters?.forEach((filterGroup) => {
  console.log(`Filter: ${filterGroup.label}`);
  filterGroup.values.forEach((value) => {
    console.log(`  ${value.label} (${value.count})`);
  });
});

Error Handling​

const result = await getSearchResult({
  query: "", // Invalid empty query
});

if (result.error) {
  // Handle specific error cases
  switch (result.error) {
    case "Search query cannot be empty":
      // Show validation message
      break;
    case "Search failed":
      // Show generic error
      break;
    default:
      // Show unexpected error
      break;
  }
}

Metafield Access​

const result = await getSearchResult({
  query: "solar panels",
  productMetafields: [
    { field: "custom.warranty_years", type: "number_integer" },
    { field: "custom.efficiency", type: "number_decimal" },
  ],
  options: {
    camelizeKeys: true,
  },
});

result.products.forEach((product) => {
  // Access metafields (camelized keys)
  const warranty = product.metafields.customWarrantyYears;
  const efficiency = product.metafields.customEfficiency;

  console.log(
    `${product.title}: ${warranty} year warranty, ${efficiency}% efficiency`
  );
});

🚨 Error States​

Common error messages you might encounter:

  • "Search query cannot be empty" - Query parameter is empty or whitespace
  • "Search failed" - General search failure from Shopify API
  • "Unexpected error" - Unexpected runtime error during search
  • Network-related errors from the underlying fetch operation

✅ Back to: Search Overview →

npm version

npm downloads

GitHub stars

GitHub issues

See FAQs

Description

TypeScript interface for getSearchResult return value.