@faststore/core 2.1.83 → 2.2.0-alpha.0

package/src/pages/[slug]/p.tsx

@@ -4,8 +4,10 @@ import type { Locator } from '@vtex/client-cms'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
+import deepmerge from 'deepmerge'
 
 import type {
+  ClientProductQueryQuery,
   ServerProductPageQueryQuery,
   ServerProductPageQueryQueryVariables,
 } from '@generated/graphql'
@@ -26,6 +28,8 @@ import GlobalSections, {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 import storeConfig from '../../../faststore.config'
+import { useProductQuery } from 'src/sdk/product/useProductQuery'
+import PageProvider, { PDPContext } from 'src/sdk/overrides/PageProvider'
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
@@ -39,19 +43,36 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-type Props = ServerProductPageQueryQuery &
-  PDPContentType & {
-    globalSections: GlobalSectionsData
-    meta: {
-      title: string
-      description: string
-      canonical: string
-    }
+type Props = PDPContentType & {
+  data: ServerProductPageQueryQuery
+  globalSections: GlobalSectionsData
+  meta: {
+    title: string
+    description: string
+    canonical: string
   }
+}
 
-function Page({ product, sections, globalSections, offers, meta }: Props) {
+// Array merging strategy from deepmerge that makes client arrays overwrite server array
+// https://www.npmjs.com/package/deepmerge
+const overwriteMerge = (_, sourceArray) => sourceArray
+
+function Page({ data: server, sections, globalSections, offers, meta }: Props) {
+  const { product } = server
   const { currency } = useSession()
 
+  // Stale while revalidate the product for fetching the new price etc
+  const { data: client, isValidating } = useProductQuery(product.id, {
+    product: product,
+  })
+
+  const context = {
+    data: {
+      ...deepmerge(server, client, { arrayMerge: overwriteMerge }),
+      isValidating,
+    },
+  } as PDPContext
+
   return (
     <GlobalSections {...globalSections}>
       {/* SEO */}
@@ -105,18 +126,17 @@ function Page({ product, sections, globalSections, offers, meta }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections
-        context={product}
-        sections={sections}
-        components={COMPONENTS}
-      />
+      <PageProvider context={context}>
+        <RenderSections sections={sections} components={COMPONENTS} />
+      </PageProvider>
     </GlobalSections>
   )
 }
 
 const query = gql`
-  query ServerProductPageQuery($slug: String!) {
-    product(locator: [{ key: "slug", value: $slug }]) {
+  query ServerProductPageQuery($locator: [IStoreSelectedFacet!]!) {
+    ...ServerProductPage
+    product(locator: $locator) {
       id: productID
 
       seo {
@@ -181,7 +201,7 @@ export const getStaticProps: GetStaticProps<
   const slug = params?.slug ?? ''
   const [searchResult, cmsPage, globalSections] = await Promise.all([
     execute<ServerProductPageQueryQueryVariables, ServerProductPageQueryQuery>({
-      variables: { slug },
+      variables: { locator: [{ key: 'slug', value: slug }] },
       operationName: query,
     }),
     getPage<PDPContentType>({
@@ -228,7 +248,7 @@ export const getStaticProps: GetStaticProps<
 
   return {
     props: {
-      ...data,
+      data,
       ...cmsPage,
       meta,
       offers,

package/src/pages/s.tsx

@@ -1,15 +1,15 @@
 import type { SearchState } from '@faststore/sdk'
-import { parseSearchState, SearchProvider } from '@faststore/sdk'
+import {
+  formatSearchState,
+  parseSearchState,
+  SearchProvider,
+} from '@faststore/sdk'
 import { SROnly as UISROnly } from '@faststore/ui'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
-import type { ComponentType } from 'react'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 
-import Breadcrumb from 'src/components/sections/Breadcrumb'
-import ProductGallery from 'src/components/sections/ProductGallery'
 import { ITEMS_PER_PAGE } from 'src/constants'
-import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 
@@ -19,19 +19,9 @@ import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import RenderSections from 'src/components/cms/RenderSections'
 import { getPage, SearchContentType } from 'src/server/cms'
 import storeConfig from '../../faststore.config'
-
-/**
- * Sections: Components imported from each store's custom components and '../components/sections' only.
- * Do not import or render components from any other folder in here.
- */
-const COMPONENTS: Record<string, ComponentType<any>> = {
-  Breadcrumb,
-  ProductGallery,
-  ...CUSTOM_COMPONENTS,
-}
+import SearchPage from 'src/components/templates/SearchPage/SearchPage'
 
 type Props = {
   page: SearchContentType
@@ -48,10 +38,9 @@ type UseSearchParams = {
 }
 
 const useSearchParams = ({ sort: defaultSort }: UseSearchParams) => {
-  const [params, setParams] = useState<SearchState | null>(null)
   const { asPath } = useRouter()
 
-  useEffect(() => {
+  return useMemo(() => {
     const url = new URL(asPath, 'http://localhost')
 
     const shouldUpdateDefaultSort = defaultSort && !url.searchParams.has('sort')
@@ -59,13 +48,14 @@ const useSearchParams = ({ sort: defaultSort }: UseSearchParams) => {
       url.searchParams.set('sort', defaultSort)
     }
 
-    setParams(parseSearchState(url))
+    const newState = parseSearchState(url)
+    const hrefState = formatSearchState(newState).href
+    return parseSearchState(new URL(hrefState))
   }, [asPath, defaultSort])
-
-  return params
 }
 
-function Page({ page: { sections, settings }, globalSections }: Props) {
+function Page({ page: searchContentType, globalSections }: Props) {
+  const { settings } = searchContentType
   const searchParams = useSearchParams({
     sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
   })
@@ -73,15 +63,22 @@ function Page({ page: { sections, settings }, globalSections }: Props) {
   const title = 'Search Results'
   const { description, titleTemplate } = storeConfig.seo
 
+  const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
+
   if (!searchParams) {
     return null
   }
 
+  const server = {
+    title,
+    searchTerm: searchParams.term ?? undefined,
+  } as SearchPageContextType
+
   return (
     <GlobalSections {...globalSections}>
       <SearchProvider
         onChange={applySearchState}
-        itemsPerPage={settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE}
+        itemsPerPage={itemsPerPage}
         {...searchParams}
       >
         {/* SEO */}
@@ -110,16 +107,7 @@ function Page({ page: { sections, settings }, globalSections }: Props) {
           If needed, wrap your component in a <Section /> component
           (not the HTML tag) before rendering it here.
         */}
-        <RenderSections
-          sections={sections}
-          components={COMPONENTS}
-          context={
-            {
-              title,
-              searchTerm: searchParams.term ?? undefined,
-            } as SearchPageContextType
-          }
-        />
+        <SearchPage page={searchContentType} data={server}></SearchPage>
       </SearchProvider>
     </GlobalSections>
   )

package/src/sdk/graphql/useQuery.ts

@@ -4,7 +4,8 @@ import type { SWRConfiguration } from 'swr'
 import { request } from './request'
 import type { RequestOptions } from './request'
 
-export type QueryOptions = SWRConfiguration & RequestOptions
+export type QueryOptions = SWRConfiguration &
+  RequestOptions & { doNotRun?: boolean }
 
 export const getKey = <Variables>(
   operationName: string,
@@ -25,16 +26,19 @@ export const useQuery = <Data, Variables = Record<string, unknown>>(
   variables: Variables,
   options?: QueryOptions
 ) =>
-  useSWR<Data>(getKey(operationName, variables), {
-    fetcher: () => {
-      return new Promise((resolve) => {
-        setTimeout(async () => {
-          resolve(
-            await request<Data, Variables>(operationName, variables, options)
-          )
+  useSWR<Data>(
+    () => (options?.doNotRun ? null : getKey(operationName, variables)),
+    {
+      fetcher: () => {
+        return new Promise((resolve) => {
+          setTimeout(async () => {
+            resolve(
+              await request<Data, Variables>(operationName, variables, options)
+            )
+          })
         })
-      })
-    },
-    ...DEFAULT_OPTIONS,
-    ...options,
-  })
+      },
+      ...DEFAULT_OPTIONS,
+      ...options,
+    }
+  )

package/src/sdk/overrides/PageProvider.tsx

@@ -0,0 +1,78 @@
+import {
+  ClientProductGalleryQueryQuery,
+  ClientProductQueryQuery,
+  ClientProductsQueryQuery,
+  ServerCollectionPageQueryQuery,
+  ServerProductPageQueryQuery,
+} from '@generated/graphql'
+import type { PropsWithChildren } from 'react'
+import { createContext, useContext, useMemo } from 'react'
+import { SearchPageContextType } from 'src/pages/s'
+
+export interface PDPContext {
+  data?: ServerProductPageQueryQuery &
+    ClientProductQueryQuery['product'] & { isValidating?: boolean }
+}
+
+export interface PLPContext {
+  data?: ServerCollectionPageQueryQuery &
+    ClientProductGalleryQueryQuery & { pages: ClientProductsQueryQuery[] }
+}
+
+export interface SearchPageContext {
+  data?: SearchPageContextType &
+    ClientProductGalleryQueryQuery & { pages: ClientProductsQueryQuery[] }
+}
+
+export const isPDP = (x: any): x is PDPContext =>
+  x?.data?.product?.sku != undefined && x?.data?.product?.sku != null
+
+export const isPLP = (x: any): x is PLPContext =>
+  x?.data?.collection?.seo != undefined &&
+  x?.data?.collection?.seo != null &&
+  x?.data?.collection?.sku == undefined
+
+export const isSearchPage = (x: any): x is SearchPageContext =>
+  x === undefined ||
+  x?.data?.title != undefined ||
+  x?.data?.searchTerm != undefined
+
+export interface PageProviderContextValue {
+  context?: PDPContext | PLPContext | SearchPageContext
+}
+
+const PageContext = createContext<PageProviderContextValue | null>(null)
+
+function PageProvider({
+  context,
+  children,
+}: PropsWithChildren<PageProviderContextValue>) {
+  const value = useMemo(
+    () => ({
+      context,
+    }),
+    [context]
+  )
+
+  return <PageContext.Provider value={value}>{children}</PageContext.Provider>
+}
+
+export function usePage<
+  T extends PLPContext | SearchPageContext | PDPContext
+>(): T {
+  const { context } = useContext(PageContext)
+
+  if (context == null) {
+    throw new Error('Missing Overrides context on React tree')
+  }
+
+  return context as T
+}
+
+export const usePDP = () => usePage<PDPContext>()
+
+export const usePLP = () => usePage<PLPContext>()
+
+export const useSearchPage = () => usePage<SearchPageContext>()
+
+export default PageProvider

package/src/sdk/product/useLocalizedVariables.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import { useSession } from '../session'
+import { ITEMS_PER_SECTION } from 'src/constants'
+
+const toArray = <T>(x: T[] | T | undefined) =>
+  Array.isArray(x) ? x : x ? [x] : []
+
+export const useLocalizedVariables = ({
+  first,
+  after,
+  sort,
+  term,
+  selectedFacets,
+}: Partial<ClientProductsQueryQueryVariables>) => {
+  const { channel, locale } = useSession()
+
+  return useMemo(() => {
+    const facets = toArray(selectedFacets)
+
+    return {
+      first: first ?? ITEMS_PER_SECTION,
+      after: after ?? '0',
+      sort: sort ?? ('score_desc' as const),
+      term: term ?? '',
+      selectedFacets: [
+        ...facets,
+        { key: 'channel', value: channel ?? '' },
+        { key: 'locale', value: locale },
+      ],
+    }
+  }, [selectedFacets, first, after, sort, term, channel, locale])
+}

package/src/sdk/product/usePageProductsQuery.ts

@@ -0,0 +1,139 @@
+import { gql } from '@faststore/graphql-utils'
+import { useSearch } from '@faststore/sdk'
+import {
+  ClientProductsQueryQuery,
+  ClientProductsQueryQueryVariables,
+} from '@generated/graphql'
+import {
+  useEffect,
+  useCallback,
+  createContext,
+  useContext,
+  useRef,
+  useMemo,
+  useState,
+} from 'react'
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import { useLocalizedVariables } from './useLocalizedVariables'
+
+export const UseGalleryPageContext = createContext<
+  ReturnType<typeof useCreateUseGalleryPage>['useGalleryPage']
+>((_: number) => {
+  return { data: null }
+})
+
+export const useGalleryPage = (page: number) => {
+  const useGalleryPageCallback = useContext(UseGalleryPageContext)
+  if (!useGalleryPageCallback) {
+    throw new Error('Missing UseGalleryPageContext on React tree')
+  }
+  return useGalleryPageCallback(page)
+}
+
+export const query = gql`
+  query ClientProductsQuery(
+    $first: Int!
+    $after: String
+    $sort: StoreSort!
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]!
+  ) {
+    ...ClientProducts
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+        edges {
+          node {
+            ...ProductSummary_product
+          }
+        }
+      }
+    }
+  }
+`
+
+const getKey = (object: any) => JSON.stringify(object)
+
+/**
+ * Use this hook for managed pages state and creating useGalleryPage hook that will be used for fetching a list of products per pages in PLP or Search
+ */
+export const useCreateUseGalleryPage = () => {
+  const [pages, setPages] = useState<ClientProductsQueryQuery[]>([])
+  // We create pagesRef as a mirror of the pages state so we don't have to add pages as a dependency of the useGalleryPage hook
+  const pagesRef = useRef<ClientProductsQueryQuery[]>([])
+  const pagesCache = useRef<string[]>([])
+
+  const useGalleryPage = useCallback(function useGalleryPage(page: number) {
+    const {
+      state: { sort, term, selectedFacets },
+      itemsPerPage,
+    } = useSearch()
+
+    const localizedVariables = useLocalizedVariables({
+      first: itemsPerPage,
+      after: (itemsPerPage * page).toString(),
+      sort,
+      term: term ?? '',
+      selectedFacets,
+    })
+
+    const hasSameVariables =
+      pagesCache.current[page] === getKey(localizedVariables)
+
+    const { data } = useQuery<
+      ClientProductsQueryQuery,
+      ClientProductsQueryQueryVariables
+    >(query, localizedVariables, {
+      fallbackData: null,
+      suspense: true,
+      doNotRun: hasSameVariables,
+    })
+
+    const shouldUpdatePages = !hasSameVariables && data !== null
+
+    if (shouldUpdatePages) {
+      pagesCache.current[page] = getKey(localizedVariables)
+
+      // Update refs
+      const newPages = [...pagesRef.current]
+      newPages[page] = data
+      pagesRef.current = newPages
+    }
+
+    // Prevents error: Cannot update a component (`ProductListing`) while rendering a different component (`ProductGalleryPage`).
+    useEffect(() => {
+      if (shouldUpdatePages) {
+        // Update state
+        setPages((oldPages) => {
+          const newPages = [...oldPages]
+          newPages[page] = data
+          return newPages
+        })
+      }
+    }, [data, page, shouldUpdatePages])
+
+    return useMemo(() => {
+      if (hasSameVariables) {
+        return { data: pagesRef.current[page] }
+      }
+
+      return { data }
+    }, [hasSameVariables, data, page])
+  }, [])
+
+  return useMemo(
+    () => ({
+      pages,
+      useGalleryPage,
+    }),
+    [pages, useGalleryPage]
+  )
+}

package/src/{components/sections/ProductGallery/useGalleryQuery.ts → sdk/product/useProductGalleryQuery.ts}

@@ -1,26 +1,25 @@
-import { useSearch } from '@faststore/sdk'
 import { gql } from '@faststore/graphql-utils'
 
-import { useQuery } from 'src/sdk/graphql/useQuery'
 import type {
-  ProductGalleryQueryQuery as Query,
-  ProductGalleryQueryQueryVariables as Variables,
+  ClientProductGalleryQueryQuery as Query,
+  ClientProductGalleryQueryQueryVariables as Variables,
 } from '@generated/graphql'
-
-import { useLocalizedVariables } from '../../../sdk/product/useProductsQuery'
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import { useLocalizedVariables } from './useLocalizedVariables'
 
 /**
  * This query is run on the browser and contains
  * the current search state of the user
  */
 export const query = gql`
-  query ProductGalleryQuery(
+  query ClientProductGalleryQuery(
     $first: Int!
     $after: String!
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
+    ...ClientProductGallery
     search(
       first: $first
       after: $after
@@ -40,12 +39,12 @@ export const query = gql`
   }
 `
 
-export const useGalleryQuery = () => {
-  const {
-    state: { term, sort, selectedFacets },
-    itemsPerPage,
-  } = useSearch()
-
+export const useProductGalleryQuery = ({
+  term,
+  sort,
+  selectedFacets,
+  itemsPerPage,
+}) => {
   const localizedVariables = useLocalizedVariables({
     first: itemsPerPage,
     after: '0',

package/src/sdk/product/{useProduct.ts → useProductQuery.ts}

@@ -2,29 +2,32 @@ import { gql } from '@faststore/graphql-utils'
 import { useMemo } from 'react'
 
 import type {
-  BrowserProductQueryQuery,
-  BrowserProductQueryQueryVariables,
+  ClientProductQueryQuery,
+  ClientProductQueryQueryVariables,
 } from '@generated/graphql'
 
 import { useQuery } from '../graphql/useQuery'
 import { useSession } from '../session'
 
 const query = gql`
-  query BrowserProductQuery($locator: [IStoreSelectedFacet!]!) {
+  query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {
+    ...ClientProduct
     product(locator: $locator) {
       ...ProductDetailsFragment_product
     }
   }
 `
 
-export const useProduct = <T extends BrowserProductQueryQuery>(
+export const useProductQuery = <T extends ClientProductQueryQuery>(
   productID: string,
   fallbackData?: T
 ) => {
   const { channel, locale } = useSession()
   const variables = useMemo(() => {
     if (!channel) {
-      throw new Error(`useProduct: 'channel' from session is an empty string.`)
+      throw new Error(
+        `useProductQuery: 'channel' from session is an empty string.`
+      )
     }
 
     return {
@@ -37,8 +40,8 @@ export const useProduct = <T extends BrowserProductQueryQuery>(
   }, [channel, locale, productID])
 
   return useQuery<
-    BrowserProductQueryQuery & T,
-    BrowserProductQueryQueryVariables
+    ClientProductQueryQuery & T,
+    ClientProductQueryQueryVariables
   >(query, variables, {
     fallbackData,
     revalidateOnMount: true,

package/src/sdk/product/useProductsPrefetch.ts

@@ -0,0 +1,72 @@
+import { gql } from '@faststore/graphql-utils'
+import { useSearch } from '@faststore/sdk'
+import { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import { useEffect, useCallback } from 'react'
+import type { QueryOptions } from '../graphql/useQuery'
+import { useSWRConfig } from 'swr'
+import { prefetchQuery } from '../graphql/prefetchQuery'
+import { useLocalizedVariables } from './useLocalizedVariables'
+
+export const query = gql`
+  query ClientProductsQuery(
+    $first: Int!
+    $after: String
+    $sort: StoreSort!
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]!
+  ) {
+    ...ClientProducts
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+        edges {
+          node {
+            ...ProductSummary_product
+          }
+        }
+      }
+    }
+  }
+`
+
+export const useProductsQueryPrefetch = (
+  variables: ClientProductsQueryQueryVariables,
+  options?: QueryOptions
+) => {
+  const localizedVariables = useLocalizedVariables(variables)
+  const { cache } = useSWRConfig()
+
+  return useCallback(
+    () => prefetchQuery(query, localizedVariables, { cache, ...options }),
+    [localizedVariables, cache, options]
+  )
+}
+
+export const useProductsPrefetch = (page: number | null) => {
+  const {
+    itemsPerPage,
+    state: { sort, term, selectedFacets },
+  } = useSearch()
+
+  const prefetch = useProductsQueryPrefetch({
+    first: itemsPerPage,
+    after: (itemsPerPage * (page ?? 0)).toString(),
+    sort,
+    term: term ?? '',
+    selectedFacets,
+  })
+
+  useEffect(() => {
+    if (page !== null) {
+      prefetch()
+    }
+  }, [page, prefetch])
+}