✨ feat: get all facets

:%s

framework/vendure/schema.d.ts

@@ -93,6 +93,10 @@ export type QueryProductsArgs = {
   options?: Maybe<ProductListOptions>
 }
 
+export type QueryFacetsArgs = {
+  options?: Maybe<FacetListOptions>
+}
+
 export type QuerySearchArgs = {
   input: SearchInput
 }
@@ -2727,6 +2731,13 @@ export type ProductListOptions = {
   filter?: Maybe<ProductFilterParameter>
 }
 
+export type FacetListOptions = {
+  skip?: Maybe<Scalars['Int']>
+  take?: Maybe<Scalars['Int']>
+  sort?: Maybe<FacetSortParameter>
+  filter?: Maybe<FacetFilterParameter>
+}
+
 export type UpdateOrderItemsResult =
   | Order
   | OrderModificationError
@@ -2884,6 +2895,23 @@ export type ProductVariantSortParameter = {
   discountPrice?: Maybe<SortOrder>
 }
 
+
+export type FacetFilterParameter = {
+  createdAt?: Maybe<DateOperators>
+  updatedAt?: Maybe<DateOperators>
+  languageCode?: Maybe<StringOperators>
+  name?: Maybe<StringOperators>
+  code?: Maybe<StringOperators>
+}
+
+export type FacetSortParameter = {
+  id?: Maybe<SortOrder>
+  createdAt?: Maybe<SortOrder>
+  updatedAt?: Maybe<SortOrder>
+  name?: Maybe<SortOrder>
+  code?: Maybe<SortOrder>
+}
+
 export type CustomerFilterParameter = {
   createdAt?: Maybe<DateOperators>
   updatedAt?: Maybe<DateOperators>
@@ -3192,6 +3220,23 @@ export type GetAllProductsQuery = { __typename?: 'Query' } & {
   }
 }
 
+export type GetAllFacetsQuery = { __typename?: 'Query' } & {
+  facets: { __typename?: 'FacetList' } & {
+    items: Array<
+      { __typename?: 'Facet' } & Pick<
+        Facet,
+        'id' | 'name' | 'code'
+      > & {
+          parent?: Maybe<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
+          children?: Maybe<
+            Array<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
+          >
+        }
+    >,
+    'totalItems'
+  }
+}
+
 export type ActiveOrderQueryVariables = Exact<{ [key: string]: never }>
 
 export type ActiveOrderQuery = { __typename?: 'Query' } & {

framework/vendure/utils/queries/get-all-facets-query.ts

@@ -0,0 +1,17 @@
+export const getAllFacetsQuery = /* GraphQL */ `
+query facets ($options: FacetListOptions) {
+  facets (options: $options){
+    totalItems,
+    items {
+      id
+      name
+      code
+      values {
+        id
+        name
+        code
+      }
+    }
+  }
+}
+`

pages/product/[slug].tsx

@@ -4,6 +4,7 @@ import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/compone
 import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
 export default function Slug() {
+
   return <>
     <ProductInfoDetail />
     <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />

pages/test.tsx

@@ -1,16 +1,40 @@
+import { QueryFacetsArgs } from '@framework/schema'
+import { useMemo, useState } from 'react'
 import { Layout } from 'src/components/common'
-import { useMessage } from 'src/components/contexts'
+import { useFacets } from 'src/components/hooks/facets'
 
 export default function Test() {
-  const { showMessageError } = useMessage()
+  const [keyword, setKeyword] = useState('c')
 
-  const handleClick = () => {
-    showMessageError("Create account successfully")
+  const optionsFilter = useMemo(() => {
+    console.log("change options")
+    return {
+      options: {
+        filter: {
+          name: {
+            contains: keyword
+          }
+        }
+      }
+    } as QueryFacetsArgs
+  }, [keyword])
+
+  const { items, totalItems } = useFacets(optionsFilter)
+
+  const changeQuery = () => {
+    setKeyword('ca')
   }
 
   return (
     <>
-    <button onClick={handleClick}>Click me</button>
+      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, praesentium.</div>
+      <div>
+        total: {totalItems}
+      </div>
+      <div>
+        ITEMS: {JSON.stringify(items)}
+      </div>
+      <button onClick={changeQuery}>change</button>
     </>
   )
 }

src/components/hooks/facets/index.ts

@@ -0,0 +1,3 @@
+export { default as useFacets } from './useFacets'
+
+

src/components/hooks/facets/useFacets.tsx

@@ -0,0 +1,12 @@
+import { GetAllFacetsQuery, QueryFacetsArgs } from '@framework/schema'
+import { getAllFacetsQuery } from '@framework/utils/queries/get-all-facets-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useFacets = (options: QueryFacetsArgs) => {
+  const { data, isValidating, ...rest } = useSWR<GetAllFacetsQuery>([getAllFacetsQuery, options], gglFetcher)
+  console.log("here", data)
+  return { items: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
+}
+
+export default useFacets