feat: Use Gatsby's file system routing API for product pages (#795)

packages/gatsby-theme-store/src/sdk/pixel/events.ts

@@ -1,5 +1,4 @@
 import type { ProductSummary_ProductFragment } from '../../components/ProductSummary/__generated__/ProductSummary_product.graphql'
-import type { ServerProductPageQueryQuery } from '../../{StoreProduct.slug}/__generated__/ServerProductPageQuery.graphql'
 import type { OrderFormFragment_OrderFormFragment } from '../orderForm/controller/__generated__/OrderFormFragment_orderForm.graphql'
 import type { OrderFormItem } from '../orderForm/types'
 
@@ -60,7 +59,7 @@ export type OrderPlacedData = Order
 export type OrderPlacedTrackedData = Order
 
 export interface ProductViewData {
-  product: ServerProductPageQueryQuery['product']
+  product: any
 }
 
 export interface ProductClickData {

packages/gatsby-theme-store/src/views/product/AboveTheFold.tsx

@@ -1,14 +1,12 @@
 import { Center, Text } from '@vtex/store-ui'
-import { graphql } from 'gatsby'
 import React from 'react'
-import type { FC } from 'react'
 
 import type { ProductViewProps } from './index'
 
 const format = (x: string) =>
   x.length > 100 ? `${x.slice(0, 100)} ...Truncated` : x
 
-const AboveTheFold: FC<ProductViewProps> = (props) => (
+const AboveTheFold = (props: ProductViewProps) => (
   <>
     <Center height="150px">
       <Text sx={{ width: '50%' }}>
@@ -48,44 +46,4 @@ const AboveTheFold: FC<ProductViewProps> = (props) => (
   </>
 )
 
-export const fragment = graphql`
-  fragment ProductDetailsTemplate_product on StoreProduct {
-    productReference
-    productName
-    linkText
-    items {
-      name
-      complementName
-      itemId
-      referenceId {
-        value: Value
-      }
-      images {
-        imageUrl
-        imageText
-      }
-      videos {
-        videoUrl
-      }
-      sellers {
-        commercialOffer: commertialOffer {
-          price: Price
-          listPrice: ListPrice
-          availableQuantity: AvailableQuantity
-          priceValidUntil: PriceValidUntil
-        }
-      }
-    }
-    productClusters {
-      id
-      name
-    }
-    properties {
-      name
-      originalName
-      values
-    }
-  }
-`
-
 export default AboveTheFold

packages/gatsby-theme-store/src/views/product/SEO/useBreadcrumbJsonLd.ts

@@ -5,7 +5,7 @@ import type { BreadcrumbJsonLd } from 'gatsby-plugin-next-seo'
 
 import type { ProductViewProps } from '../index'
 
-type Options = ProductViewProps
+type Options = ProductViewProps<any>
 
 type BreadcrumbJSONLD = ComponentPropsWithoutRef<typeof BreadcrumbJsonLd>
 

packages/gatsby-theme-store/src/views/product/SEO/useMetadata.ts

@@ -13,7 +13,7 @@ import type { ProductViewProps } from '../index'
 
 * This deduplicates pages so our pages rank higher in Google
 */
-type Options = ProductViewProps
+type Options = ProductViewProps<any>
 
 export const useMetadata = (
   options: Options

packages/gatsby-theme-store/src/views/product/SEO/useProductJsonLd.ts

@@ -7,7 +7,7 @@ import type { ProductJsonLd } from 'gatsby-plugin-next-seo'
 import { useCurrency } from '../../../sdk/localization/useCurrency'
 import type { ProductViewProps } from '../index'
 
-type Options = ProductViewProps
+type Options = ProductViewProps<any>
 
 type ProductJSONLD = ComponentPropsWithoutRef<typeof ProductJsonLd>
 
@@ -56,6 +56,8 @@ export const useProductJsonLd = (options: Options): ProductJSONLD | null => {
 
 export const fragment = graphql`
   fragment StructuredProductFragment_product on StoreProduct {
+    titleTag
+    metaTagDescription
     productName
     description
     brand

packages/gatsby-theme-store/src/views/product/index.tsx

@@ -1,22 +1,25 @@
 import { SuspenseViewport } from '@vtex/store-ui'
 import React, { lazy } from 'react'
-import type { FC } from 'react'
+import type { PropsWithChildren } from 'react'
 
 import { usePixelSendEvent } from '../../sdk/pixel/usePixelSendEvent'
 import AboveTheFold from './AboveTheFold'
 import BelowTheFoldPreview from './BelowTheFoldPreview'
 import SEO from './SEO'
-import type { ServerProductPageProps } from '../../pages/{StoreProduct.slug}/p'
 
 const belowTheFoldPreloader = () => import('./BelowTheFold')
 const BelowTheFold = lazy(belowTheFoldPreloader)
 
-export type ProductViewProps = {
-  product: ServerProductPageProps['data']['product']
+export type ProductViewProps<P = Product> = PropsWithChildren<{
+  product: P
   slug: string
+}>
+
+interface Product {
+  id: string
 }
 
-const ProductView: FC<ProductViewProps> = (props) => {
+const ProductView = <P extends Product>(props: ProductViewProps<P>) => {
   const { product } = props
 
   usePixelSendEvent(