@faststore/core 2.1.84 → 2.2.0-alpha.0

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])
+}

package/src/sdk/product/useProductsQuery.ts

@@ -1,26 +1,23 @@
 import { gql } from '@faststore/graphql-utils'
-import { useCallback, useMemo } from 'react'
-import { useSWRConfig } from 'swr'
 
-import { ITEMS_PER_SECTION } from 'src/constants'
 import type {
-  ProductsQueryQuery,
-  ProductsQueryQueryVariables,
+  ClientProductsQueryQuery,
+  ClientProductsQueryQueryVariables,
 } from '@generated/graphql'
 
-import { prefetchQuery } from '../graphql/prefetchQuery'
-import { useQuery } from '../graphql/useQuery'
-import { useSession } from '../session'
 import type { QueryOptions } from '../graphql/useQuery'
+import { useQuery } from '../graphql/useQuery'
+import { useLocalizedVariables } from './useLocalizedVariables'
 
 export const query = gql`
-  query ProductsQuery(
+  query ClientProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
+    ...ClientProducts
     search(
       first: $first
       after: $after
@@ -42,66 +39,23 @@ export const query = gql`
   }
 `
 
-const toArray = <T>(x: T[] | T | undefined) =>
-  Array.isArray(x) ? x : x ? [x] : []
-
-export const useLocalizedVariables = ({
-  first,
-  after,
-  sort,
-  term,
-  selectedFacets,
-}: Partial<ProductsQueryQueryVariables>) => {
-  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])
-}
-
 /**
- * Use this hook for fetching a list of products, like in search results and shelves
+ * Use this hook for fetching a list of products, like shelves and tiles
  */
 export const useProductsQuery = (
-  variables: Partial<ProductsQueryQueryVariables>,
+  variables: Partial<ClientProductsQueryQueryVariables>,
   options?: QueryOptions
 ) => {
   const localizedVariables = useLocalizedVariables(variables)
 
-  const { data } = useQuery<ProductsQueryQuery, ProductsQueryQueryVariables>(
-    query,
-    localizedVariables,
-    {
-      fallbackData: null,
-      suspense: true,
-      ...options,
-    }
-  )
-
-  return data?.search?.products
-}
-
-export const useProductsQueryPrefetch = (
-  variables: ProductsQueryQueryVariables,
-  options?: QueryOptions
-) => {
-  const localizedVariables = useLocalizedVariables(variables)
-  const { cache } = useSWRConfig()
+  const { data } = useQuery<
+    ClientProductsQueryQuery,
+    ClientProductsQueryQueryVariables
+  >(query, localizedVariables, {
+    fallbackData: null,
+    suspense: true,
+    ...options,
+  })
 
-  return useCallback(
-    () => prefetchQuery(query, localizedVariables, { cache, ...options }),
-    [localizedVariables, cache, options]
-  )
+  return data
 }

package/src/server/generator/generateGraphQLSchemaFile.ts

@@ -0,0 +1,3 @@
+import { writeGraphqlSchemaFile, getMergedSchema } from './schema'
+
+writeGraphqlSchemaFile(getMergedSchema())

package/src/server/generator/schema.ts

@@ -0,0 +1,82 @@
+import { writeFileSync } from 'fs-extra'
+import { getSchema, getTypeDefs } from '@faststore/api'
+import { printSchemaWithDirectives } from '@graphql-tools/utils'
+import { loadFilesSync } from '@graphql-tools/load-files'
+import { mergeTypeDefs } from '@graphql-tools/merge'
+import { buildASTSchema } from 'graphql'
+import type { GraphQLSchema } from 'graphql'
+import type { TypeSource } from '@graphql-tools/utils'
+
+import { apiOptions } from '../options'
+
+export function getTypeDefsFromFolder(
+  customPath: string | string[]
+): TypeSource {
+  const basePath = ['src', 'customizations', 'graphql']
+
+  const pathArray = Array.isArray(customPath) ? customPath : [customPath]
+
+  return (
+    loadFilesSync([...basePath, ...pathArray, 'typeDefs'], {
+      extensions: ['graphql'],
+    }) ??
+    loadFilesSync([...basePath, ...pathArray, 'typedefs'], {
+      extensions: ['graphql'],
+    })
+  )
+}
+
+export function getCustomSchema(typeDefs: TypeSource[]) {
+  try {
+    const mergedTypeDefs = mergeTypeDefs(typeDefs)
+
+    const schema = buildASTSchema(mergedTypeDefs)
+
+    return schema
+  } catch (e) {
+    console.error(
+      'An error occurred while attempting to merge the GraphQL Schema Extensions. Check the custom typeDefs and resolvers located in the "customizations/graphql/" directory. The changes since the last successful schema merge will be ignored.'
+    )
+
+    throw e
+  }
+}
+
+export function getNativeTypeDefs() {
+  return getTypeDefs() as TypeSource
+}
+
+export function getVTEXExtensionsTypeDefs() {
+  return getTypeDefsFromFolder('vtex')
+}
+
+export function getThirdPartyExtensionsTypeDefs() {
+  return getTypeDefsFromFolder('thirdParty')
+}
+
+export const nativeApiSchema = getSchema(apiOptions)
+
+// Schema with no resolvers - used to generate schema.graphql file
+export const getMergedSchema = (): GraphQLSchema =>
+  getCustomSchema(
+    [
+      getNativeTypeDefs(),
+      getVTEXExtensionsTypeDefs(),
+      getThirdPartyExtensionsTypeDefs(),
+    ].filter(Boolean)
+  )
+
+export function writeGraphqlSchemaFile(apiSchema: GraphQLSchema) {
+  try {
+    writeFileSync(
+      [process.cwd(), '@generated', 'graphql', 'schema.graphql'].join('/'),
+      printSchemaWithDirectives(apiSchema)
+    )
+
+    console.log('Schema GraphQL file generated successfully')
+  } catch (e) {
+    console.error('An error occurred while generating the GraphQL schema file')
+
+    throw e
+  }
+}

package/src/server/index.ts

@@ -1,20 +1,32 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import path from 'path'
 import type { FormatErrorHandler } from '@envelop/core'
 import {
   envelop,
-  useAsyncSchema,
+  useSchema,
   useExtendContext,
   useMaskedErrors,
 } from '@envelop/core'
 import { useGraphQlJit } from '@envelop/graphql-jit'
 import { useParserCache } from '@envelop/parser-cache'
 import { useValidationCache } from '@envelop/validation-cache'
-import { getContextFactory, getSchema, isFastStoreError } from '@faststore/api'
+import type { CacheControl, Maybe } from '@faststore/api'
+import {
+  getContextFactory,
+  getResolvers,
+  isFastStoreError,
+} from '@faststore/api'
 import { GraphQLError } from 'graphql'
-import type { Maybe, Options as APIOptions, CacheControl } from '@faststore/api'
+import { makeExecutableSchema } from '@graphql-tools/schema'
+import { loadFilesSync } from '@graphql-tools/load-files'
+import type { TypeSource } from '@graphql-tools/utils'
 
 import persisted from '../../@generated/graphql/persisted.json'
-import storeConfig from '../../faststore.config'
+
+import vtexExtensionsResolvers from '../customizations/graphql/vtex/resolvers'
+import thirdPartyResolvers from '../customizations/graphql/thirdParty/resolvers'
+
+import { apiOptions } from './options'
 
 interface ExecuteOptions<V = Record<string, unknown>> {
   operationName: string
@@ -24,21 +36,6 @@ interface ExecuteOptions<V = Record<string, unknown>> {
 
 const persistedQueries = new Map(Object.entries(persisted))
 
-const apiOptions: APIOptions = {
-  platform: storeConfig.platform as APIOptions['platform'],
-  account: storeConfig.api.storeId,
-  environment: storeConfig.api.environment as APIOptions['environment'],
-  hideUnavailableItems: storeConfig.api.hideUnavailableItems,
-  incrementAddress: storeConfig.api.incrementAddress,
-  channel: storeConfig.session.channel,
-  locale: storeConfig.session.locale,
-  flags: {
-    enableOrderFormSync: true,
-  },
-}
-
-export const apiSchema = getSchema(apiOptions)
-
 const apiContextFactory = getContextFactory(apiOptions)
 
 const formatError: FormatErrorHandler = (err) => {
@@ -51,10 +48,26 @@ const formatError: FormatErrorHandler = (err) => {
   return new GraphQLError('Sorry, something went wrong.')
 }
 
-const getEnvelop = async () =>
+function loadGeneratedSchema(): TypeSource {
+  return loadFilesSync(path.join(process.cwd(), '@generated', 'graphql'), {
+    extensions: ['graphql'],
+  })
+}
+
+function getFinalAPISchema() {
+  const generatedSchema = loadGeneratedSchema()
+  const nativeResolvers = getResolvers(apiOptions)
+
+  return makeExecutableSchema({
+    typeDefs: generatedSchema,
+    resolvers: [nativeResolvers, vtexExtensionsResolvers, thirdPartyResolvers],
+  })
+}
+
+export const getEnvelop = async () =>
   envelop({
     plugins: [
-      useAsyncSchema(apiSchema),
+      useSchema(getFinalAPISchema()),
       useExtendContext(apiContextFactory),
       useMaskedErrors({ formatError }),
       useGraphQlJit(),

package/src/server/options.ts

@@ -0,0 +1,16 @@
+import type { Options as APIOptions } from '@faststore/api'
+
+import storeConfig from '../../faststore.config'
+
+export const apiOptions: APIOptions = {
+  platform: storeConfig.platform as APIOptions['platform'],
+  account: storeConfig.api.storeId,
+  environment: storeConfig.api.environment as APIOptions['environment'],
+  hideUnavailableItems: storeConfig.api.hideUnavailableItems,
+  incrementAddress: storeConfig.api.incrementAddress,
+  channel: storeConfig.session.channel,
+  locale: storeConfig.session.locale,
+  flags: {
+    enableOrderFormSync: true,
+  },
+}

package/test/server/index.test.ts

@@ -0,0 +1,146 @@
+import { assertValidSchema } from 'graphql'
+
+import { execute, getEnvelop } from '../../src/server'
+import {
+  getTypeDefsFromFolder,
+  getMergedSchema,
+} from '../../src/server/generator/schema'
+import storeConfig from '../../faststore.config'
+
+const TYPES = [
+  'StoreAggregateOffer',
+  'StoreAggregateRating',
+  'StoreAuthor',
+  'StoreBrand',
+  'StoreListItem',
+  'StoreBreadcrumbList',
+  'StoreCartMessage',
+  'StoreCart',
+  'IStoreCart',
+  'StoreCollectionType',
+  'StoreCollectionFacet',
+  'StoreCollectionMeta',
+  'StoreCollection',
+  'StoreFacet',
+  'StoreFacetRange',
+  'StoreFacetBoolean',
+  'StoreFacetValueRange',
+  'StoreFacetValueBoolean',
+  'StoreImage',
+  'IStoreImage',
+  'StoreOffer',
+  'IStoreOffer',
+  'StoreOrder',
+  'IStoreOrder',
+  'StoreOrganization',
+  'IStoreOrganization',
+  'StorePageInfo',
+  'StoreProduct',
+  'IStoreProduct',
+  'StoreProductGroup',
+  'StorePropertyValue',
+  'StoreProductEdge',
+  'StoreProductConnection',
+  'StoreCollectionEdge',
+  'StoreCollectionConnection',
+  'StoreSort',
+  'IStoreSelectedFacet',
+  'StoreSearchResult',
+  'StoreReviewRating',
+  'StoreReview',
+  'StoreSeo',
+  'StoreStatus',
+  'IShippingItem',
+  'ShippingData',
+  'LogisticsItem',
+  'LogisticsInfo',
+  'ShippingSLA',
+  'DeliveryIds',
+  'PickupStoreInfo',
+  'PickupAddress',
+  'MessageInfo',
+  'MessageFields',
+]
+
+const QUERIES = [
+  'product',
+  'collection',
+  'search',
+  'allProducts',
+  'allCollections',
+  'shipping',
+  'redirect',
+  'sellers',
+]
+
+const MUTATIONS = ['validateCart', 'validateSession', 'subscribeToNewsletter']
+
+describe('FastStore GraphQL Layer', () => {
+  describe('@faststore/api', () => {
+    const nativeSchema = getMergedSchema()
+
+    it('should return a valid GraphQL schema', async () => {
+      // `assertValidSchema()` will throw an error if the schema is invalid, and
+      // return nothing if it is valid. That's why we're checking for `undefined`.
+      expect(assertValidSchema(nativeSchema)).toBeUndefined()
+    })
+
+    it('should return a valid GraphQL schema contain all expected types', async () => {
+      TYPES.forEach((typeName) => {
+        expect(nativeSchema.getType(typeName)).toBeDefined()
+      })
+    })
+
+    it('should return a valid GraphQL schema contain all expected queries', async () => {
+      const queryFields = nativeSchema.getQueryType()?.getFields() ?? {}
+
+      expect(Object.keys(queryFields)).toEqual(QUERIES)
+    })
+
+    it('should return a valid GraphQL schema contain all expected mutations', async () => {
+      const mutationFields = nativeSchema.getMutationType()?.getFields() ?? {}
+
+      expect(Object.keys(mutationFields)).toEqual(MUTATIONS)
+    })
+  })
+
+  describe('VTEX API Extension', () => {
+    it('getTypeDefsFromFolder function should return an Array', () => {
+      const typeDefs = getTypeDefsFromFolder('vtex')
+      expect(typeDefs).toBeInstanceOf(Array)
+    })
+  })
+
+  describe('Third Party API Extension', () => {
+    it('getTypeDefsFromFolder function should return an Array', () => {
+      const typeDefs = getTypeDefsFromFolder('thirdParty')
+      expect(typeDefs).toBeInstanceOf(Array)
+    })
+  })
+
+  describe('Final Schema after merging', () => {
+    it('should return a valid merged GraphQL schema', async () => {
+      const schema = getMergedSchema()
+
+      // `assertValidSchema()` will throw an error if the schema is invalid, and
+      // return nothing if it is valid. That's why we're checking for `undefined`.
+      expect(assertValidSchema(schema)).toBeUndefined()
+    })
+  })
+
+  describe('Envelop', () => {
+    it('should exist with its plugins', async () => {
+      const envelop = await getEnvelop()
+      expect(envelop).toBeDefined()
+      expect(envelop._plugins).toHaveLength(6)
+    })
+
+    it('should handle options and execute', async () => {
+      const result = await execute({
+        variables: { slug: storeConfig.cypress.pages.collection.slice(1) },
+        operationName: 'ServerCollectionPageQuery',
+      })
+      expect(result.data).toBeDefined()
+    })
+  })
+})

package/.next/BUILD_ID

@@ -1 +0,0 @@
-UFCNzAvjHLcTNmP8sQK5l

package/.next/build-manifest.json

@@ -1,129 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/UFCNzAvjHLcTNmP8sQK5l/_buildManifest.js",
-    "static/UFCNzAvjHLcTNmP8sQK5l/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/chunks/548-4ee971bf7bdb3e81.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/20e4a3a45cdd65f4.css",
-      "static/chunks/238-39630714f5d70169.js",
-      "static/css/a2eefb25a4608343.css",
-      "static/chunks/pages/index-73110361a184aa10.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/404-af78f7cd1d3c1f60.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/500-f6346ca5f9dc4fef.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/chunks/548-4ee971bf7bdb3e81.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/20e4a3a45cdd65f4.css",
-      "static/chunks/238-39630714f5d70169.js",
-      "static/css/f0e2d1b8832e935d.css",
-      "static/chunks/603-072c8fb73ac35775.js",
-      "static/css/a2eefb25a4608343.css",
-      "static/css/527e334fa69cf40a.css",
-      "static/chunks/pages/[...slug]-3f4e5f74ff9436ec.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/chunks/548-4ee971bf7bdb3e81.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/20e4a3a45cdd65f4.css",
-      "static/chunks/238-39630714f5d70169.js",
-      "static/css/4b7138899cd07c63.css",
-      "static/chunks/pages/[slug]/p-8e20c206fb84d184.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/9e76fef1c9ca89af.css",
-      "static/chunks/pages/_app-895781b1c7b5bf56.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/chunks/pages/account-05bd79fb78365e88.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/chunks/pages/checkout-c973786e68f25a39.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/login-8deb9243376b6aa1.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-504557a0a7373460.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-b4f8e506d156ee41.js",
-      "static/css/f0e2d1b8832e935d.css",
-      "static/chunks/603-072c8fb73ac35775.js",
-      "static/chunks/pages/s-94691e1fdc9521a4.js"
-    ]
-  },
-  "ampFirstPages": []
-}