@shopify/cli 3.65.1 → 3.65.3

package/dist/assets/hydrogen/starter/app/routes/search.tsx

@@ -1,8 +1,17 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {
+  json,
+  type LoaderFunctionArgs,
+  type ActionFunctionArgs,
+} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
-
-import {SearchForm, SearchResults, NoSearchResults} from '~/components/Search';
+import {SearchForm} from '~/components/SearchForm';
+import {SearchResults} from '~/components/SearchResults';
+import {
+  type RegularSearchReturn,
+  type PredictiveSearchReturn,
+  getEmptyPredictiveSearchResult,
+} from '~/lib/search';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Search`}];
@@ -10,66 +19,68 @@ export const meta: MetaFunction = () => {
 
 export async function loader({request, context}: LoaderFunctionArgs) {
   const url = new URL(request.url);
-  const searchParams = new URLSearchParams(url.search);
-  const variables = getPaginationVariables(request, {pageBy: 8});
-  const searchTerm = String(searchParams.get('q') || '');
+  const isPredictive = url.searchParams.has('predictive');
+  const searchPromise = isPredictive
+    ? predictiveSearch({request, context})
+    : regularSearch({request, context});
 
-  if (!searchTerm) {
-    return {
-      searchResults: {results: null, totalResults: 0},
-      searchTerm,
-    };
-  }
-
-  const {errors, ...data} = await context.storefront.query(SEARCH_QUERY, {
-    variables: {
-      query: searchTerm,
-      ...variables,
-    },
+  searchPromise.catch((error: Error) => {
+    console.error(error);
+    return {term: '', result: null, error: error.message};
   });
 
-  if (!data) {
-    throw new Error('No search data returned from Shopify API');
-  }
-
-  const totalResults = Object.values(data).reduce((total, value) => {
-    return total + value.nodes.length;
-  }, 0);
-
-  const searchResults = {
-    results: data,
-    totalResults,
-  };
-
-  return defer({
-    searchTerm,
-    searchResults,
-  });
+  return json(await searchPromise);
 }
 
+/**
+ * Renders the /search route
+ */
 export default function SearchPage() {
-  const {searchTerm, searchResults} = useLoaderData<typeof loader>();
+  const {type, term, result, error} = useLoaderData<typeof loader>();
+  if (type === 'predictive') return null;
 
   return (
     <div className="search">
       <h1>Search</h1>
-      <SearchForm searchTerm={searchTerm} />
-      {!searchTerm || !searchResults.totalResults ? (
-        <NoSearchResults />
+      <SearchForm>
+        {({inputRef}) => (
+          <>
+            <input
+              defaultValue={term}
+              name="q"
+              placeholder="Search…"
+              ref={inputRef}
+              type="search"
+            />
+            &nbsp;
+            <button type="submit">Search</button>
+          </>
+        )}
+      </SearchForm>
+      {error && <p style={{color: 'red'}}>{error}</p>}
+      {!term || !result?.total ? (
+        <SearchResults.Empty />
       ) : (
-        <SearchResults
-          results={searchResults.results}
-          searchTerm={searchTerm}
-        />
+        <SearchResults result={result} term={term}>
+          {({articles, pages, products, term}) => (
+            <div>
+              <SearchResults.Products products={products} term={term} />
+              <SearchResults.Pages pages={pages} term={term} />
+              <SearchResults.Articles articles={articles} term={term} />
+            </div>
+          )}
+        </SearchResults>
       )}
-      <Analytics.SearchView
-        data={{searchTerm, searchResults}}
-      />
+      <Analytics.SearchView data={{searchTerm: term, searchResults: result}} />
     </div>
   );
 }
 
-const SEARCH_QUERY = `#graphql
+/**
+ * Regular search query and fragments
+ * (adjust as needed)
+ */
+const SEARCH_PRODUCT_FRAGMENT = `#graphql
   fragment SearchProduct on Product {
     __typename
     handle
@@ -106,6 +117,9 @@ const SEARCH_QUERY = `#graphql
       }
     }
   }
+` as const;
+
+const SEARCH_PAGE_FRAGMENT = `#graphql
   fragment SearchPage on Page {
      __typename
      handle
@@ -113,6 +127,9 @@ const SEARCH_QUERY = `#graphql
     title
     trackingParameters
   }
+` as const;
+
+const SEARCH_ARTICLE_FRAGMENT = `#graphql
   fragment SearchArticle on Article {
     __typename
     handle
@@ -120,41 +137,43 @@ const SEARCH_QUERY = `#graphql
     title
     trackingParameters
   }
-  query search(
+` as const;
+
+const PAGE_INFO_FRAGMENT = `#graphql
+  fragment PageInfoFragment on PageInfo {
+    hasNextPage
+    hasPreviousPage
+    startCursor
+    endCursor
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/search
+export const SEARCH_QUERY = `#graphql
+  query RegularSearch(
     $country: CountryCode
     $endCursor: String
     $first: Int
     $language: LanguageCode
     $last: Int
-    $query: String!
+    $term: String!
     $startCursor: String
   ) @inContext(country: $country, language: $language) {
-    products: search(
-      query: $query,
-      unavailableProducts: HIDE,
-      types: [PRODUCT],
+    articles: search(
+      query: $term,
+      types: [ARTICLE],
       first: $first,
-      sortKey: RELEVANCE,
-      last: $last,
-      before: $startCursor,
-      after: $endCursor
     ) {
       nodes {
-        ...on Product {
-          ...SearchProduct
+        ...on Article {
+          ...SearchArticle
         }
       }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-        startCursor
-        endCursor
-      }
     }
     pages: search(
-      query: $query,
+      query: $term,
       types: [PAGE],
-      first: 10
+      first: $first,
     ) {
       nodes {
         ...on Page {
@@ -162,16 +181,236 @@ const SEARCH_QUERY = `#graphql
         }
       }
     }
-    articles: search(
-      query: $query,
-      types: [ARTICLE],
-      first: 10
+    products: search(
+      after: $endCursor,
+      before: $startCursor,
+      first: $first,
+      last: $last,
+      query: $term,
+      sortKey: RELEVANCE,
+      types: [PRODUCT],
+      unavailableProducts: HIDE,
     ) {
       nodes {
-        ...on Article {
-          ...SearchArticle
+        ...on Product {
+          ...SearchProduct
         }
       }
+      pageInfo {
+        ...PageInfoFragment
+      }
+    }
+  }
+  ${SEARCH_PRODUCT_FRAGMENT}
+  ${SEARCH_PAGE_FRAGMENT}
+  ${SEARCH_ARTICLE_FRAGMENT}
+  ${PAGE_INFO_FRAGMENT}
+` as const;
+
+/**
+ * Regular search fetcher
+ */
+async function regularSearch({
+  request,
+  context,
+}: Pick<
+  LoaderFunctionArgs,
+  'request' | 'context'
+>): Promise<RegularSearchReturn> {
+  const {storefront} = context;
+  const url = new URL(request.url);
+  const variables = getPaginationVariables(request, {pageBy: 8});
+  const term = String(url.searchParams.get('q') || '');
+
+  // Search articles, pages, and products for the `q` term
+  const {errors, ...items} = await storefront.query(SEARCH_QUERY, {
+    variables: {...variables, term},
+  });
+
+  if (!items) {
+    throw new Error('No search data returned from Shopify API');
+  }
+
+  const total = Object.values(items).reduce(
+    (acc, {nodes}) => acc + nodes.length,
+    0,
+  );
+
+  const error = errors
+    ? errors.map(({message}) => message).join(', ')
+    : undefined;
+
+  return {type: 'regular', term, error, result: {total, items}};
+}
+
+/**
+ * Predictive search query and fragments
+ * (adjust as needed)
+ */
+const PREDICTIVE_SEARCH_ARTICLE_FRAGMENT = `#graphql
+  fragment PredictiveArticle on Article {
+    __typename
+    id
+    title
+    handle
+    blog {
+      handle
     }
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
   }
 ` as const;
+
+const PREDICTIVE_SEARCH_COLLECTION_FRAGMENT = `#graphql
+  fragment PredictiveCollection on Collection {
+    __typename
+    id
+    title
+    handle
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_PAGE_FRAGMENT = `#graphql
+  fragment PredictivePage on Page {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_PRODUCT_FRAGMENT = `#graphql
+  fragment PredictiveProduct on Product {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+    variants(first: 1) {
+      nodes {
+        id
+        image {
+          url
+          altText
+          width
+          height
+        }
+        price {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_QUERY_FRAGMENT = `#graphql
+  fragment PredictiveQuery on SearchQuerySuggestion {
+    __typename
+    text
+    styledText
+    trackingParameters
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/predictiveSearch
+const PREDICTIVE_SEARCH_QUERY = `#graphql
+  query PredictiveSearch(
+    $country: CountryCode
+    $language: LanguageCode
+    $limit: Int!
+    $limitScope: PredictiveSearchLimitScope!
+    $term: String!
+    $types: [PredictiveSearchType!]
+  ) @inContext(country: $country, language: $language) {
+    predictiveSearch(
+      limit: $limit,
+      limitScope: $limitScope,
+      query: $term,
+      types: $types,
+    ) {
+      articles {
+        ...PredictiveArticle
+      }
+      collections {
+        ...PredictiveCollection
+      }
+      pages {
+        ...PredictivePage
+      }
+      products {
+        ...PredictiveProduct
+      }
+      queries {
+        ...PredictiveQuery
+      }
+    }
+  }
+  ${PREDICTIVE_SEARCH_ARTICLE_FRAGMENT}
+  ${PREDICTIVE_SEARCH_COLLECTION_FRAGMENT}
+  ${PREDICTIVE_SEARCH_PAGE_FRAGMENT}
+  ${PREDICTIVE_SEARCH_PRODUCT_FRAGMENT}
+  ${PREDICTIVE_SEARCH_QUERY_FRAGMENT}
+` as const;
+
+/**
+ * Predictive search fetcher
+ */
+async function predictiveSearch({
+  request,
+  context,
+}: Pick<
+  ActionFunctionArgs,
+  'request' | 'context'
+>): Promise<PredictiveSearchReturn> {
+  const {storefront} = context;
+  const url = new URL(request.url);
+  const term = String(url.searchParams.get('q') || '').trim();
+  const limit = Number(url.searchParams.get('limit') || 10);
+  const type = 'predictive';
+
+  if (!term) return {type, term, result: getEmptyPredictiveSearchResult()};
+
+  // Predictively search articles, collections, pages, products, and queries (suggestions)
+  const {predictiveSearch: items, errors} = await storefront.query(
+    PREDICTIVE_SEARCH_QUERY,
+    {
+      variables: {
+        // customize search options as needed
+        limit,
+        limitScope: 'EACH',
+        term,
+      },
+    },
+  );
+
+  if (errors) {
+    throw new Error(
+      `Shopify API errors: ${errors.map(({message}) => message).join(', ')}`,
+    );
+  }
+
+  if (!items) {
+    throw new Error('No predictive search data returned from Shopify API');
+  }
+
+  const total = Object.values(items).reduce(
+    (acc, item) => acc + item.length,
+    0,
+  );
+
+  return {type, term, result: {items, total}};
+}

package/dist/assets/hydrogen/starter/app/styles/reset.css

@@ -1,6 +1,16 @@
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
   margin: 0;
   padding: 0;
 }

package/dist/assets/hydrogen/starter/env.d.ts

@@ -6,12 +6,11 @@
 import '@total-typescript/ts-reset';
 
 import type {
-  Storefront,
-  CustomerAccount,
-  HydrogenCart,
+  HydrogenContext,
   HydrogenSessionData,
+  HydrogenEnv,
 } from '@shopify/hydrogen';
-import type {AppSession} from '~/lib/session';
+import type {createAppLoadContext} from '~/lib/context';
 
 declare global {
   /**
@@ -19,36 +18,18 @@ declare global {
    */
   const process: {env: {NODE_ENV: 'production' | 'development'}};
 
-  /**
-   * Declare expected Env parameter in fetch handler.
-   */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
+  interface Env extends HydrogenEnv {
+    // declare additional Env parameter use in the fetch handler and Remix loader context here
   }
 }
 
 declare module '@shopify/remix-oxygen' {
-  /**
-   * Declare local additions to the Remix loader context.
-   */
-  interface AppLoadContext {
-    env: Env;
-    cart: HydrogenCart;
-    storefront: Storefront;
-    customerAccount: CustomerAccount;
-    session: AppSession;
-    waitUntil: ExecutionContext['waitUntil'];
+  interface AppLoadContext
+    extends Awaited<ReturnType<typeof createAppLoadContext>> {
+    // to change context type, change the return of createAppLoadContext() instead
   }
 
-  /**
-   * Declare local additions to the Remix session data.
-   */
-  interface SessionData extends HydrogenSessionData {}
+  interface SessionData extends HydrogenSessionData {
+    // declare local additions to the Remix session data here
+  }
 }