From 6b7b8e4ad154f22c715ae7af541a6b289f16efe0 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 4 Oct 2021 11:17:30 +0700 Subject: [PATCH] :raising_hand: test getStaticProps with revalidate --- framework/commerce/api/operations.ts | 18 ++++ framework/commerce/types/facet.ts | 85 +++++++++++++++++++ framework/vendure/api/index.ts | 16 ++-- .../vendure/api/operations/get-all-facets.ts | 46 ++++++++++ pages/index.tsx | 2 +- src/components/hooks/facets/useFacets.tsx | 2 +- 6 files changed, 160 insertions(+), 9 deletions(-) create mode 100644 framework/commerce/types/facet.ts create mode 100644 framework/vendure/api/operations/get-all-facets.ts diff --git a/framework/commerce/api/operations.ts b/framework/commerce/api/operations.ts index 2910a2d82..8e5137c40 100644 --- a/framework/commerce/api/operations.ts +++ b/framework/commerce/api/operations.ts @@ -23,6 +23,8 @@ export const OPERATIONS = [ 'getAllProductPaths', 'getAllProducts', 'getProduct', + 'getAllFacets', + ] as const export const defaultOperations = OPERATIONS.reduce((ops, k) => { @@ -156,6 +158,22 @@ export type Operations

= { } } +// getAllFacets: { +// (opts: { +// variables?: T['variables'] +// config?: P['config'] +// preview?: boolean +// }): Promise + +// ( +// opts: { +// variables?: T['variables'] +// config?: P['config'] +// preview?: boolean +// } & OperationOptions +// ): Promise +// } + export type APIOperations

= { [K in keyof Operations

]?: (ctx: OperationContext

) => Operations

[K] } diff --git a/framework/commerce/types/facet.ts b/framework/commerce/types/facet.ts new file mode 100644 index 000000000..d1ae5b382 --- /dev/null +++ b/framework/commerce/types/facet.ts @@ -0,0 +1,85 @@ + +export type FacetOption = { + __typename?: 'MultipleChoiceOption' + id: string + displayName: string + values: FacetOptionValues[] +} + +export type FacetOptionValues = { + label: string + hexColors?: string[] +} + +export type FacetVariant = { + id: string | number + options: FacetOption[] + availableForSale?: boolean +} + +export type Facet = { + id: string + name: string + description: string + descriptionHtml?: string + sku?: string + slug?: string + path?: string + images: FacetImage[] + variants: FacetVariant[] + price: FacetPrice + options: FacetOption[] +} + +export type SearchFacetsBody = { + search?: string + categoryId?: string | number + brandId?: string | number + sort?: string + locale?: string +} + +export type FacetTypes = { + facet: Facet + searchBody: SearchFacetsBody +} + +export type SearchFacetsHook = { + data: { + facets: T['facet'][] + found: boolean + } + body: T['searchBody'] + input: T['searchBody'] + fetcherInput: T['searchBody'] +} + +export type FacetsSchema = { + endpoint: { + options: {} + handlers: { + getFacets: SearchFacetsHook + } + } +} + +export type GetAllFacetPathsOperation< + T extends FacetTypes = FacetTypes +> = { + data: { facets: Pick[] } + variables: { first?: number } +} + +export type GetAllFacetsOperation = { + data: { facets: T['facet'][] } + variables: { + relevance?: 'featured' | 'best_selling' | 'newest' + ids?: string[] + first?: number + } +} + +export type GetFacetOperation = { + data: { facet?: T['facet'] } + variables: { path: string; slug?: never } | { path?: never; slug: string } +} diff --git a/framework/vendure/api/index.ts b/framework/vendure/api/index.ts index 6762ee6aa..7e49d6c1f 100644 --- a/framework/vendure/api/index.ts +++ b/framework/vendure/api/index.ts @@ -1,15 +1,16 @@ -import type { APIProvider, CommerceAPIConfig } from '@commerce/api' +import type { CommerceAPIConfig } from '@commerce/api' import { CommerceAPI, getCommerceApi as commerceApi } from '@commerce/api' -import fetchGraphqlApi from './utils/fetch-graphql-api' - -import login from './operations/login' +import getAllFacets from './operations/get-all-facets' import getAllPages from './operations/get-all-pages' -import getPage from './operations/get-page' -import getSiteInfo from './operations/get-site-info' -import getCustomerWishlist from './operations/get-customer-wishlist' import getAllProductPaths from './operations/get-all-product-paths' import getAllProducts from './operations/get-all-products' +import getCustomerWishlist from './operations/get-customer-wishlist' +import getPage from './operations/get-page' import getProduct from './operations/get-product' +import getSiteInfo from './operations/get-site-info' +import login from './operations/login' +import fetchGraphqlApi from './utils/fetch-graphql-api' + export interface VendureConfig extends CommerceAPIConfig {} @@ -40,6 +41,7 @@ const operations = { getAllProductPaths, getAllProducts, getProduct, + getAllFacets, } export const provider = { config, operations } diff --git a/framework/vendure/api/operations/get-all-facets.ts b/framework/vendure/api/operations/get-all-facets.ts new file mode 100644 index 000000000..9187525d3 --- /dev/null +++ b/framework/vendure/api/operations/get-all-facets.ts @@ -0,0 +1,46 @@ +import { Facet } from '@commerce/types/facet' +import { Provider, VendureConfig } from '../' +import { GetAllFacetsQuery } from '../../schema' +import { normalizeSearchResult } from '../../utils/normalize' +import { getAllFacetsQuery } from '../../utils/queries/get-all-facets-query' +import { OperationContext } from '@commerce/api/operations' + +export type FacetVariables = { first?: number } + +export default function getAllFacetsOperation({ + commerce, +}: OperationContext) { + async function getAllFacets(opts?: { + variables?: FacetVariables + config?: Partial + preview?: boolean + }): Promise<{ facets: Facet[] }> + + async function getAllFacets({ + query = getAllFacetsQuery, + variables: { ...vars } = {}, + config: cfg, + }: { + query?: string + variables?: FacetVariables + config?: Partial + preview?: boolean + } = {}): Promise<{ facets: Facet[] | any[] }> { + const config = commerce.getConfig(cfg) + const variables = { + input: { + take: vars.first, + groupByFacet: true, + }, + } + const { data } = await config.fetch(query, { + variables, + }) + + return { + facets: data.search.items.map((item) => normalizeSearchResult(item)), + } + } + + return getAllFacets +} diff --git a/pages/index.tsx b/pages/index.tsx index aabbb1f94..371922e59 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -60,7 +60,7 @@ export async function getStaticProps({ return { props: { products }, - revalidate: 20, + revalidate: 60, } } diff --git a/src/components/hooks/facets/useFacets.tsx b/src/components/hooks/facets/useFacets.tsx index 94630b868..c9a4e85ab 100644 --- a/src/components/hooks/facets/useFacets.tsx +++ b/src/components/hooks/facets/useFacets.tsx @@ -3,7 +3,7 @@ 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 useFacets = (options?: QueryFacetsArgs) => { const { data, isValidating, ...rest } = useSWR([getAllFacetsQuery, options], gglFetcher) return { items: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest } }