feat: add fuzzy param as optional

packages/api/src/platforms/vtex/clients/search/index.ts

@@ -30,7 +30,7 @@ export interface SearchArgs {
   type: 'product_search' | 'facets'
   sort?: Sort
   selectedFacets?: SelectedFacet[]
-  fuzzy?: '0' | '1' | 'auto'
+  fuzzy?: string
   hideUnavailableItems?: boolean
   showInvisibleItems?: boolean
 }
@@ -112,15 +112,15 @@ export const IntelligentSearch = (
     sort = '',
     selectedFacets = [],
     type,
-    fuzzy = 'auto',
+    fuzzy,
     showInvisibleItems,
   }: SearchArgs): Promise<T> => {
     const params = new URLSearchParams({
       page: (page + 1).toString(),
       count: count.toString(),
       query,
       sort,
-      fuzzy,
+      fuzzy: fuzzy ?? 'auto',
       locale: ctx.storage.locale,
     })
 

packages/api/src/platforms/vtex/resolvers/query.ts

@@ -112,7 +112,14 @@ export const Query = {
   },
   search: async (
     _: unknown,
-    { first, after: maybeAfter, sort, term, selectedFacets }: QuerySearchArgs,
+    {
+      first,
+      after: maybeAfter,
+      sort,
+      term,
+      selectedFacets,
+      fuzzy,
+    }: QuerySearchArgs,
     ctx: Context
   ) => {
     // Insert channel in context for later usage
@@ -154,12 +161,17 @@ export const Query = {
     }
 
     const after = maybeAfter ? Number(maybeAfter) : 0
+
     const searchArgs: Omit<SearchArgs, 'type'> = {
       page: Math.ceil(after / first),
       count: first,
       query: query ?? undefined,
       sort: SORT_MAP[sort ?? 'score_desc'],
       selectedFacets: selectedFacets?.flatMap(transformSelectedFacet) ?? [],
+      fuzzy:
+        fuzzy && (fuzzy === '0' || fuzzy === '1' || fuzzy === 'auto')
+          ? fuzzy
+          : 'auto',
     }
 
     const productSearchPromise = ctx.clients.search.products(searchArgs)

packages/api/src/typeDefs/query.graphql

@@ -242,6 +242,10 @@ type Query {
     Array of selected search facets.
     """
     selectedFacets: [IStoreSelectedFacet!]
+    """
+    Indicates how the search engine corrected the misspelled word by using fuzzy logic.
+    """
+    fuzzy: String
   ): StoreSearchResult!
     @cacheControl(scope: "public", sMaxAge: 120, staleWhileRevalidate: 3600)
 
@@ -308,7 +312,6 @@ type Query {
     selectedFacets: [IStoreSelectedFacet!]
   ): StoreRedirect
 
-
   """
   Returns a list of sellers available for a specific localization.
   """

packages/core/@generated/gql.ts

@@ -18,11 +18,11 @@ const documents = {
     types.Filter_FacetsFragmentDoc,
   '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        priceWithTaxes\n        listPrice\n        listPriceWithTaxes\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n':
     types.ProductDetailsFragment_ProductFragmentDoc,
-  '\n  fragment ClientManyProducts on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n':
+  '\n  fragment ClientManyProducts on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n':
     types.ClientManyProductsFragmentDoc,
   '\n  fragment ClientProduct on Query {\n    product(locator: $locator) {\n      id: productID\n    }\n  }\n':
     types.ClientProductFragmentDoc,
-  '\n  fragment ClientProductGallery on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n':
+  '\n  fragment ClientProductGallery on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n':
     types.ClientProductGalleryFragmentDoc,
   '\n  fragment ClientSearchSuggestions on Query {\n    search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n      suggestions {\n        terms {\n          value\n        }\n      }\n    }\n  }\n':
     types.ClientSearchSuggestionsFragmentDoc,
@@ -42,9 +42,9 @@ const documents = {
     types.ValidateCartMutationDocument,
   '\n  mutation SubscribeToNewsletter($data: IPersonNewsletter!) {\n    subscribeToNewsletter(data: $data) {\n      id\n    }\n  }\n':
     types.SubscribeToNewsletterDocument,
-  '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n':
+  '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n    $fuzzy: String\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n':
     types.ClientManyProductsQueryDocument,
-  '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n\n  fragment SearchEvent_metadata on SearchMetadata {\n    isTermMisspelled\n    logicalOperator\n  }\n':
+  '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n    $fuzzy: String\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n\n  fragment SearchEvent_metadata on SearchMetadata {\n    isTermMisspelled\n    logicalOperator\n  }\n':
     types.ClientProductGalleryQueryDocument,
   '\n  query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {\n    ...ClientProduct\n    product(locator: $locator) {\n      ...ProductDetailsFragment_product\n    }\n  }\n':
     types.ClientProductQueryDocument,
@@ -80,7 +80,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ClientManyProducts on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n'
+  source: '\n  fragment ClientManyProducts on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n'
 ): typeof import('./graphql').ClientManyProductsFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -92,7 +92,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ClientProductGallery on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n'
+  source: '\n  fragment ClientProductGallery on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n'
 ): typeof import('./graphql').ClientProductGalleryFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -152,13 +152,13 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n'
+  source: '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n    $fuzzy: String\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n'
 ): typeof import('./graphql').ClientManyProductsQueryDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n\n  fragment SearchEvent_metadata on SearchMetadata {\n    isTermMisspelled\n    logicalOperator\n  }\n'
+  source: '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n    $fuzzy: String\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n      fuzzy: $fuzzy\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n\n  fragment SearchEvent_metadata on SearchMetadata {\n    isTermMisspelled\n    logicalOperator\n  }\n'
 ): typeof import('./graphql').ClientProductGalleryQueryDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

packages/core/@generated/graphql.ts

@@ -483,6 +483,7 @@ export type QueryRedirectArgs = {
 export type QuerySearchArgs = {
   after: InputMaybe<Scalars['String']['input']>
   first: Scalars['Int']['input']
+  fuzzy: InputMaybe<Scalars['String']['input']>
   selectedFacets: InputMaybe<Array<IStoreSelectedFacet>>
   sort?: InputMaybe<StoreSort>
   term?: InputMaybe<Scalars['String']['input']>
@@ -1399,6 +1400,7 @@ export type ClientManyProductsQueryQueryVariables = Exact<{
   sort: StoreSort
   term: Scalars['String']['input']
   selectedFacets: Array<IStoreSelectedFacet> | IStoreSelectedFacet
+  fuzzy: InputMaybe<Scalars['String']['input']>
 }>
 
 export type ClientManyProductsQueryQuery = {
@@ -1445,6 +1447,7 @@ export type ClientProductGalleryQueryQueryVariables = Exact<{
   sort: StoreSort
   term: Scalars['String']['input']
   selectedFacets: Array<IStoreSelectedFacet> | IStoreSelectedFacet
+  fuzzy: InputMaybe<Scalars['String']['input']>
 }>
 
 export type ClientProductGalleryQueryQuery = {
@@ -1848,6 +1851,7 @@ export const ClientManyProductsFragmentDoc = new TypedDocumentString(
     sort: $sort
     term: $term
     selectedFacets: $selectedFacets
+    fuzzy: $fuzzy
   ) {
     products {
       pageInfo {
@@ -1878,6 +1882,7 @@ export const ClientProductGalleryFragmentDoc = new TypedDocumentString(
     sort: $sort
     term: $term
     selectedFacets: $selectedFacets
+    fuzzy: $fuzzy
   ) {
     products {
       pageInfo {
@@ -2051,7 +2056,7 @@ export const SubscribeToNewsletterDocument = {
 export const ClientManyProductsQueryDocument = {
   __meta__: {
     operationName: 'ClientManyProductsQuery',
-    operationHash: '99012563e9885c3b27a716ca212a2c317e7ec12f',
+    operationHash: 'bc199e270b76ba33335dbecf3116a175988f831b',
   },
 } as unknown as TypedDocumentString<
   ClientManyProductsQueryQuery,
@@ -2060,7 +2065,7 @@ export const ClientManyProductsQueryDocument = {
 export const ClientProductGalleryQueryDocument = {
   __meta__: {
     operationName: 'ClientProductGalleryQuery',
-    operationHash: '177fe68cb385737b0901fc9e105f0a4813e18a20',
+    operationHash: '65cd9b9509a9cf62bbe315f947b2820bf9f250e2',
   },
 } as unknown as TypedDocumentString<
   ClientProductGalleryQueryQuery,

packages/core/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -54,7 +54,7 @@ export default function ProductListing({
   data: server,
 }: ProductListingPageProps) {
   const {
-    state: { sort, term, selectedFacets },
+    state: { sort, term, selectedFacets, fuzzy },
   } = useSearch()
   const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
 
@@ -63,6 +63,7 @@ export default function ProductListing({
     sort,
     selectedFacets,
     itemsPerPage,
+    fuzzy,
   })
 
   const { pages, useGalleryPage } = useCreateUseGalleryPage()

packages/core/src/components/templates/SearchPage/SearchWrapper.tsx

@@ -35,14 +35,15 @@ export default function SearchWrapper({
 }: SearchWrapperProps) {
   const router = useRouter()
   const {
-    state: { term, sort, selectedFacets },
+    state: { term, sort, selectedFacets, fuzzy },
   } = useSearch()
   const { data: pageProductGalleryData, isValidating } = useProductGalleryQuery(
     {
       term,
       sort,
       itemsPerPage,
       selectedFacets,
+      fuzzy,
     }
   )
 

packages/core/src/customizations/src/fragments/ClientManyProducts.ts

@@ -8,6 +8,7 @@ export const fragment = gql(`
       sort: $sort
       term: $term
       selectedFacets: $selectedFacets
+      fuzzy: $fuzzy
     ) {
       products {
         pageInfo {

packages/core/src/customizations/src/fragments/ClientProductGallery.ts

@@ -8,6 +8,7 @@ export const fragment = gql(`
       sort: $sort
       term: $term
       selectedFacets: $selectedFacets
+      fuzzy: $fuzzy
     ) {
       products {
         pageInfo {

packages/core/src/sdk/analytics/types.ts

@@ -26,6 +26,7 @@ export interface IntelligentSearchQueryParams {
   locale: string
   term: string
   logicalOperator: string
+  fuzzy?: string
   isTermMisspelled: boolean
   totalCount: number
 }

packages/core/src/sdk/product/useLocalizedVariables.ts

@@ -12,6 +12,7 @@ export const useLocalizedVariables = ({
   sort,
   term,
   selectedFacets,
+  fuzzy,
 }: Partial<ClientManyProductsQueryQueryVariables>) => {
   const { channel, locale } = useSession()
 
@@ -23,6 +24,7 @@ export const useLocalizedVariables = ({
       after: after ?? '0',
       sort: sort ?? ('score_desc' as const),
       term: term ?? '',
+      fuzzy,
       selectedFacets: [
         ...facets,
         { key: 'channel', value: channel ?? '' },

packages/core/src/sdk/product/usePageProductsQuery.ts

@@ -37,6 +37,7 @@ export const query = gql(`
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
+    $fuzzy: String
   ) {
     ...ClientManyProducts
     search(
@@ -45,6 +46,7 @@ export const query = gql(`
       sort: $sort
       term: $term
       selectedFacets: $selectedFacets
+      fuzzy: $fuzzy
     ) {
       products {
         pageInfo {
@@ -73,7 +75,7 @@ export const useCreateUseGalleryPage = () => {
 
   const useGalleryPage = useCallback(function useGalleryPage(page: number) {
     const {
-      state: { sort, term, selectedFacets },
+      state: { sort, term, selectedFacets, fuzzy },
       itemsPerPage,
     } = useSearch()
 
@@ -83,6 +85,7 @@ export const useCreateUseGalleryPage = () => {
       sort,
       term: term ?? '',
       selectedFacets,
+      fuzzy,
     })
 
     const hasSameVariables =

packages/core/src/sdk/product/useProductGalleryQuery.ts

@@ -26,6 +26,7 @@ export const query = gql(`
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
+    $fuzzy: String
   ) {
     ...ClientProductGallery
     redirect(term: $term, selectedFacets: $selectedFacets) {
@@ -37,6 +38,7 @@ export const query = gql(`
       sort: $sort
       term: $term
       selectedFacets: $selectedFacets
+      fuzzy: $fuzzy
     ) {
       products {
         pageInfo {
@@ -63,21 +65,25 @@ type ProductGalleryQueryOptions = {
   selectedFacets: Facet[]
   sort: ClientManyProductsQueryQueryVariables['sort']
   term: ClientManyProductsQueryQueryVariables['term']
+  fuzzy?: string
 }
 
 export const useProductGalleryQuery = ({
   term,
   sort,
   selectedFacets,
   itemsPerPage,
+  fuzzy,
 }: ProductGalleryQueryOptions) => {
   const { locale } = useSession()
+
   const localizedVariables = useLocalizedVariables({
     first: itemsPerPage,
     after: '0',
     sort,
     term: term ?? '',
     selectedFacets,
+    fuzzy,
   })
 
   return useQuery<Query, Variables>(query, localizedVariables, {

packages/core/src/sdk/product/useProductsPrefetch.ts

@@ -16,6 +16,7 @@ export const query = gql(`
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
+    $fuzzy: String
   ) {
     ...ClientManyProducts
     search(
@@ -24,6 +25,7 @@ export const query = gql(`
       sort: $sort
       term: $term
       selectedFacets: $selectedFacets
+      fuzzy: $fuzzy
     ) {
       products {
         pageInfo {
@@ -55,7 +57,7 @@ export const useProductsQueryPrefetch = (
 export const useProductsPrefetch = (page: number | null) => {
   const {
     itemsPerPage,
-    state: { sort, term, selectedFacets },
+    state: { sort, term, selectedFacets, fuzzy },
   } = useSearch()
 
   const prefetch = useProductsQueryPrefetch({
@@ -64,6 +66,7 @@ export const useProductsPrefetch = (page: number | null) => {
     sort,
     term: term ?? '',
     selectedFacets,
+    fuzzy,
   })
 
   useEffect(() => {