@faststore/core 2.2.78 → 3.0.1

package/src/customizations/src/fragments/ServerCollectionPage.ts

@@ -1,9 +1,9 @@
-import { gql } from '@faststore/graphql-utils'
+import { gql } from '@generated'
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ServerCollectionPage on Query {
     collection(slug: $slug) {
       id
     }
   }
-`
+`)

package/src/customizations/src/fragments/ServerProduct.ts

@@ -1,9 +1,9 @@
-import { gql } from '@faststore/graphql-utils'
+import { gql } from '@generated'
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ServerProduct on Query {
     product(locator: $locator) {
       id: productID
     }
   }
-`
+`)

package/src/pages/404.tsx

@@ -1,48 +1,44 @@
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
-import { useRouter } from 'next/router'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { GetStaticProps } from 'next'
-import { Locator } from '@vtex/client-cms'
-
-import { Icon as UIIcon } from '@faststore/ui'
-import EmptyState from 'src/components/sections/EmptyState'
+import type { ComponentType } from 'react'
 
-const useErrorState = () => {
-  const router = useRouter()
-  const { pathname, asPath } = router
+import RenderSections from 'src/components/cms/RenderSections'
+import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { PageContentType, getPage } from 'src/server/cms'
 
-  return {
-    fromUrl: asPath ?? pathname,
-  }
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  EmptyState,
+  ...CUSTOM_COMPONENTS,
 }
 
 type Props = {
+  page: PageContentType
   globalSections: GlobalSectionsData
 }
 
-function Page({ globalSections }: Props) {
-  const { fromUrl } = useErrorState()
-
+function Page({ page: { sections }, globalSections }: Props) {
   return (
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
 
-      <EmptyState
-        title="Not Found: 404"
-        titleIcon={
-          <UIIcon
-            name="CircleWavyWarning"
-            width={56}
-            height={56}
-            weight="thin"
-          />
-        }
-      >
-        <p>This app could not find url {fromUrl}</p>
-      </EmptyState>
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+      <RenderSections sections={sections} components={COMPONENTS} />
     </GlobalSections>
   )
 }
@@ -52,10 +48,16 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const globalSections = await getGlobalSectionsData(previewData)
+  const [page, globalSections] = await Promise.all([
+    getPage<PageContentType>({
+      ...(previewData?.contentType === '404' && previewData),
+      contentType: '404',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   return {
-    props: { globalSections },
+    props: { page, globalSections },
   }
 }
 

package/src/pages/500.tsx

@@ -1,53 +1,45 @@
 import { Locator } from '@vtex/client-cms'
 import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
-import { useRouter } from 'next/router'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
+import type { ComponentType } from 'react'
 
-import { Icon as UIIcon } from '@faststore/ui'
-import EmptyState from 'src/components/sections/EmptyState'
+import RenderSections from 'src/components/cms/RenderSections'
+import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { PageContentType, getPage } from 'src/server/cms'
 
-type Props = {
-  globalSections: GlobalSectionsData
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  EmptyState,
+  ...CUSTOM_COMPONENTS,
 }
 
-const useErrorState = () => {
-  const router = useRouter()
-  const { errorId, fromUrl } = router.query
-
-  return {
-    errorId,
-    fromUrl,
-  }
+type Props = {
+  page: PageContentType
+  globalSections: GlobalSectionsData
 }
 
-function Page({ globalSections }: Props) {
-  const { errorId, fromUrl } = useErrorState()
-
+function Page({ page: { sections }, globalSections }: Props) {
   return (
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <EmptyState
-        title="500"
-        titleIcon={
-          <UIIcon
-            name="CircleWavyWarning"
-            width={56}
-            height={56}
-            weight="thin"
-          />
-        }
-      >
-        <h2>Internal Server Error</h2>
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
 
-        <div>
-          The server errored with id {errorId} when visiting page {fromUrl}
-        </div>
-      </EmptyState>
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+      <RenderSections sections={sections} components={COMPONENTS} />
     </GlobalSections>
   )
 }
@@ -57,10 +49,16 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const globalSections = await getGlobalSectionsData(previewData)
+  const [page, globalSections] = await Promise.all([
+    getPage<PageContentType>({
+      ...(previewData?.contentType === '500' && previewData),
+      contentType: '500',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   return {
-    props: { globalSections },
+    props: { page, globalSections },
   }
 }
 

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

@@ -1,7 +1,7 @@
 import { isNotFoundError } from '@faststore/api'
-import { gql } from '@faststore/graphql-utils'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 
+import { gql } from '@generated'
 import type {
   ServerCollectionPageQueryQuery,
   ServerCollectionPageQueryQueryVariables,
@@ -52,7 +52,7 @@ function Page({ globalSections, type, ...otherProps }: Props) {
   )
 }
 
-const query = gql`
+const query = gql(`
   query ServerCollectionPageQuery($slug: String!) {
     ...ServerCollectionPage
     collection(slug: $slug) {
@@ -75,7 +75,7 @@ const query = gql`
       }
     }
   }
-`
+`)
 
 export const getStaticProps: GetStaticProps<
   Props,
@@ -106,7 +106,7 @@ export const getStaticProps: GetStaticProps<
       ServerCollectionPageQueryQuery
     >({
       variables: { slug },
-      operationName: query,
+      operation: query,
     }),
     getPage<PLPContentType>({
       ...(previewData?.contentType === 'plp' ? previewData : null),

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

@@ -1,14 +1,14 @@
 import { isNotFoundError } from '@faststore/api'
-import { gql } from '@faststore/graphql-utils'
 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 {
-  ServerProductQueryQuery,
-  ServerProductQueryQueryVariables,
+import { gql } from '@generated'
+import {
+  type ServerProductQueryQuery,
+  type ServerProductQueryQueryVariables,
 } from '@generated/graphql'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
@@ -134,7 +134,7 @@ function Page({ data: server, sections, globalSections, offers, meta }: Props) {
   )
 }
 
-const query = gql`
+const query = gql(`
   query ServerProductQuery($locator: [IStoreSelectedFacet!]!) {
     ...ServerProduct
     product(locator: $locator) {
@@ -192,7 +192,7 @@ const query = gql`
       ...ProductDetailsFragment_product
     }
   }
-`
+`)
 
 export const getStaticProps: GetStaticProps<
   Props,
@@ -203,7 +203,7 @@ export const getStaticProps: GetStaticProps<
   const [searchResult, cmsPage, globalSections] = await Promise.all([
     execute<ServerProductQueryQueryVariables, ServerProductQueryQuery>({
       variables: { locator: [{ key: 'slug', value: slug }] },
-      operationName: query,
+      operation: query,
     }),
     getPage<PDPContentType>({
       ...(previewData?.contentType === 'pdp' ? previewData : null),

package/src/pages/api/graphql.ts

@@ -23,11 +23,12 @@ const replaceSetCookieDomain = (request: NextApiRequest, setCookie: string) => {
 }
 
 const parseRequest = (request: NextApiRequest) => {
-  const { operationName, variables, query } =
+  const { operationName, operationHash, variables, query } =
     request.method === 'POST'
       ? request.body
       : {
           operationName: request.query.operationName,
+          operationHash: request.query.operationHash,
           variables: JSON.parse(
             typeof request.query.variables === 'string'
               ? request.query.variables
@@ -37,7 +38,12 @@ const parseRequest = (request: NextApiRequest) => {
         }
 
   return {
-    operationName,
+    operation: {
+      __meta__: {
+        operationName,
+        operationHash,
+      },
+    },
     variables,
     // Do not allow queries in production, only for devMode so we can use graphql tools
     // like introspection etc. In production, we only accept known queries for better
@@ -53,12 +59,12 @@ const handler: NextApiHandler = async (request, response) => {
     return
   }
 
-  const { operationName, variables, query } = parseRequest(request)
+  const { operation, variables, query } = parseRequest(request)
 
   try {
     const { data, errors, extensions } = await execute(
       {
-        operationName,
+        operation,
         variables,
         query,
       },

package/src/pages/login.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
 
 import storeConfig from '../../faststore.config'
 import GlobalSections, {
@@ -8,15 +9,23 @@ import GlobalSections, {
 } from 'src/components/cms/GlobalSections'
 import { GetStaticProps } from 'next'
 import { Locator } from '@vtex/client-cms'
+import RenderSections from 'src/components/cms/RenderSections'
+import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { PageContentType, getPage } from 'src/server/cms'
 
-import { Loader as UILoader } from '@faststore/ui'
-import EmptyState from 'src/components/sections/EmptyState'
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  EmptyState,
+  ...CUSTOM_COMPONENTS,
+}
 
 type Props = {
+  page: PageContentType
   globalSections: GlobalSectionsData
 }
 
-function Page({ globalSections }: Props) {
+function Page({ page: { sections }, globalSections }: Props) {
   useEffect(() => {
     const loginUrl = new URL(storeConfig.loginUrl)
     const incomingParams = new URLSearchParams(window.location.search)
@@ -31,10 +40,18 @@ function Page({ globalSections }: Props) {
   return (
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
 
-      <EmptyState title="Loading">
-        <UILoader />
-      </EmptyState>
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+      <RenderSections sections={sections} components={COMPONENTS} />
     </GlobalSections>
   )
 }
@@ -44,10 +61,16 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const globalSections = await getGlobalSectionsData(previewData)
+  const [page, globalSections] = await Promise.all([
+    getPage<PageContentType>({
+      ...(previewData?.contentType === 'login' && previewData),
+      contentType: 'login',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   return {
-    props: { globalSections },
+    props: { page, globalSections },
   }
 }
 

package/src/sdk/cart/index.ts

@@ -1,8 +1,8 @@
-import { gql } from '@faststore/graphql-utils'
 import type { Cart as SDKCart, CartItem as SDKCartItem } from '@faststore/sdk'
 import { createCartStore } from '@faststore/sdk'
 import { useMemo } from 'react'
 
+import { gql } from '@generated'
 import type {
   CartItemFragment,
   CartMessageFragment,
@@ -23,7 +23,7 @@ export interface Cart extends SDKCart<CartItem> {
   shouldSplitItem?: boolean
 }
 
-export const ValidateCartMutation = gql`
+export const ValidateCartMutation = gql(`
   mutation ValidateCartMutation($cart: IStoreCart!, $session: IStoreSession!) {
     validateCart(cart: $cart, session: $session) {
       order {
@@ -82,7 +82,7 @@ export const ValidateCartMutation = gql`
       valueReference
     }
   }
-`
+`)
 
 const isGift = (item: CartItem) => item.price === 0
 

package/src/sdk/graphql/prefetchQuery.ts

@@ -4,17 +4,18 @@ import type { Cache } from 'swr'
 import { request } from './request'
 import { getKey } from './useQuery'
 import type { RequestOptions } from './request'
+import { TypedDocumentString } from '@generated/graphql'
 
 export const prefetchQuery = <Data, Variables = Record<string, unknown>>(
-  operationName: string,
+  operation: TypedDocumentString<any, any>,
   variables: Variables,
   { cache, ...options }: Partial<RequestOptions> & { cache: Cache }
 ) => {
-  const key = getKey(operationName, variables)
+  const key = getKey(operation['__meta__']['operationName'], variables)
 
   if (cache.get(key)) {
     return
   }
 
-  mutate(key, request<Data, Variables>(operationName, variables, options))
+  mutate(key, request<Data, Variables>(operation, variables, options))
 }

package/src/sdk/graphql/request.ts

@@ -1,20 +1,33 @@
-import { request as baseRequest } from '@faststore/graphql-utils'
-import type { RequestOptions as GraphQLRequestOptions } from '@faststore/graphql-utils'
+import { TypedDocumentString } from '@generated/graphql'
 
-export type RequestOptions = Omit<
-  GraphQLRequestOptions,
-  'operationName' | 'variables'
->
+export type RequestOptions = Omit<BaseRequestOptions, 'operation' | 'variables'>
+
+export interface GraphQLResponse<D = any> {
+  data: D
+  errors: any[]
+}
+
+export interface BaseRequestOptions<V = any> {
+  operation: TypedDocumentString<any, any>
+  variables: V
+  fetchOptions?: RequestInit
+}
+
+const DEFAULT_HEADERS_BY_VERB: Record<string, Record<string, string>> = {
+  POST: {
+    'Content-Type': 'application/json',
+  },
+}
 
 export const request = async <Query = unknown, Variables = unknown>(
-  operationName: string,
+  operation: TypedDocumentString<any, any>,
   variables: Variables,
   options?: RequestOptions
 ) => {
   const { data, errors } = await baseRequest<Variables, Query>('/api/graphql', {
     ...options,
     variables,
-    operationName,
+    operation,
   })
 
   if (errors?.length) {
@@ -23,3 +36,49 @@ export const request = async <Query = unknown, Variables = unknown>(
 
   return data
 }
+
+/* This piece of code was taken out of @faststore/graphql-utils */
+const baseRequest = async <V = any, D = any>(
+  endpoint: string,
+  { operation, variables, fetchOptions }: BaseRequestOptions<V>
+): Promise<GraphQLResponse<D>> => {
+  const { operationName, operationHash } = operation['__meta__']
+
+  // Uses method from fetchOptions.
+  // If no one is passed, figure out with via heuristic
+  const method =
+    fetchOptions?.method !== undefined
+      ? fetchOptions.method.toUpperCase()
+      : operationName.endsWith('Query')
+      ? 'GET'
+      : 'POST'
+
+  const params = new URLSearchParams({
+    operationName,
+    operationHash,
+    ...(method === 'GET' && { variables: JSON.stringify(variables) }),
+  })
+
+  const body =
+    method === 'POST'
+      ? JSON.stringify({
+          operationName,
+          operationHash,
+          variables,
+        })
+      : undefined
+
+  const url = `${endpoint}?${params.toString()}`
+
+  const response = await fetch(url, {
+    method,
+    body,
+    ...fetchOptions,
+    headers: {
+      ...DEFAULT_HEADERS_BY_VERB[method],
+      ...fetchOptions?.headers,
+    },
+  })
+
+  return response.json()
+}

package/src/sdk/graphql/useLazyQuery.ts

@@ -3,21 +3,22 @@ import useSWR from 'swr'
 import { request } from './request'
 import { DEFAULT_OPTIONS, getKey } from './useQuery'
 import type { QueryOptions } from './useQuery'
+import { TypedDocumentString } from '@generated/graphql'
 
 export const useLazyQuery = <Data, Variables = Record<string, unknown>>(
-  operationName: string,
+  operation: TypedDocumentString<any, any>,
   variables: Variables,
   options?: QueryOptions
 ) => {
   const response = useSWR<Data | null>(
-    getKey(operationName, variables),
+    getKey(operation['__meta__']['operationName'], variables),
     () => null,
     DEFAULT_OPTIONS
   )
 
   const execute = async (queryVariables: Variables) => {
     const data = await request<Data, Variables>(
-      operationName,
+      operation,
       queryVariables,
       options
     )

package/src/sdk/graphql/useQuery.ts

@@ -3,6 +3,7 @@ import type { SWRConfiguration } from 'swr'
 
 import { request } from './request'
 import type { RequestOptions } from './request'
+import { TypedDocumentString } from '@generated/graphql'
 
 export type QueryOptions = SWRConfiguration &
   RequestOptions & { doNotRun?: boolean }
@@ -22,18 +23,21 @@ export const DEFAULT_OPTIONS = {
 }
 
 export const useQuery = <Data, Variables = Record<string, unknown>>(
-  operationName: string,
+  operation: TypedDocumentString<any, any>,
   variables: Variables,
   options?: QueryOptions
 ) =>
   useSWR<Data>(
-    () => (options?.doNotRun ? null : getKey(operationName, variables)),
+    () =>
+      options?.doNotRun
+        ? null
+        : getKey(operation['__meta__']['operationName'], variables),
     {
       fetcher: () => {
         return new Promise((resolve) => {
           setTimeout(async () => {
             resolve(
-              await request<Data, Variables>(operationName, variables, options)
+              await request<Data, Variables>(operation, variables, options)
             )
           })
         })

package/src/sdk/newsletter/useNewsletter.ts

@@ -1,18 +1,18 @@
-import { gql } from '@faststore/graphql-utils'
+import { gql } from '@generated'
 
 import type {
   SubscribeToNewsletterMutation as Mutation,
   SubscribeToNewsletterMutationVariables as Variables,
-} from '../../../@generated/graphql/index'
+} from '../../../@generated/graphql'
 import { useLazyQuery } from '../graphql/useLazyQuery'
 
-export const mutation = gql`
+export const mutation = gql(`
   mutation SubscribeToNewsletter($data: IPersonNewsletter!) {
     subscribeToNewsletter(data: $data) {
       id
     }
   }
-`
+`)
 
 export const useNewsletter = () => {
   const [subscribeUser, { data, error, isValidating: loading }] = useLazyQuery<

package/src/sdk/product/usePageProductsQuery.ts

@@ -1,5 +1,5 @@
-import { gql } from '@faststore/graphql-utils'
 import { useSearch } from '@faststore/sdk'
+import { gql } from '@generated'
 import {
   ClientManyProductsQueryQuery,
   ClientManyProductsQueryQueryVariables,
@@ -30,7 +30,7 @@ export const useGalleryPage = (page: number) => {
   return useGalleryPageCallback(page)
 }
 
-export const query = gql`
+export const query = gql(`
   query ClientManyProductsQuery(
     $first: Int!
     $after: String
@@ -58,7 +58,7 @@ export const query = gql`
       }
     }
   }
-`
+`)
 
 const getKey = (object: any) => JSON.stringify(object)