use portal slugs

@generated/graphql/index.ts

@@ -2799,18 +2799,17 @@ export type ProductPageQueryQuery = {
 }
 
 export type ServerProductPageQueryQueryVariables = Exact<{
-  id: Scalars['String']
+  slug: Scalars['String']
 }>
 
 export type ServerProductPageQueryQuery = {
   product: {
-    slug: string
     sku: string
     gtin: string
     name: string
     description: string
     id: string
-    seo: { title: string; description: string }
+    seo: { title: string; description: string; canonical: string }
     brand: { name: string }
     breadcrumbList: {
       itemListElement: Array<{ item: string; name: string; position: number }>

@generated/graphql/persisted.json

@@ -3,7 +3,7 @@
   "CollectionPageQuery": "query CollectionPageQuery {\n  site {\n    siteMetadata {\n      titleTemplate\n      title\n      description\n    }\n  }\n}\n",
   "ServerCollectionPageQuery": "query ServerCollectionPageQuery($slug: String!) {\n  collection(slug: $slug) {\n    seo {\n      title\n      description\n    }\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    meta {\n      selectedFacets {\n        key\n        value\n      }\n    }\n  }\n}\n",
   "ProductPageQuery": "query ProductPageQuery {\n  site {\n    siteMetadata {\n      title\n      description\n      titleTemplate\n      siteUrl\n    }\n  }\n}\n",
-  "ServerProductPageQuery": "query ServerProductPageQuery($id: String!) {\n  product(locator: [{key: \"id\", value: $id}]) {\n    id: productID\n    slug\n    seo {\n      title\n      description\n    }\n    brand {\n      name\n    }\n    sku\n    gtin\n    name\n    description\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    image {\n      url\n      alternateName\n    }\n    offers {\n      lowPrice\n      highPrice\n      priceCurrency\n      offers {\n        availability\n        price\n        priceValidUntil\n        priceCurrency\n        itemCondition\n        seller {\n          identifier\n        }\n        listPrice\n      }\n    }\n    isVariantOf {\n      productGroupID\n      name\n    }\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n  }\n}\n",
+  "ServerProductPageQuery": "query ServerProductPageQuery($slug: String!) {\n  product(locator: [{key: \"slug\", value: $slug}]) {\n    id: productID\n    seo {\n      title\n      description\n      canonical\n    }\n    brand {\n      name\n    }\n    sku\n    gtin\n    name\n    description\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    image {\n      url\n      alternateName\n    }\n    offers {\n      lowPrice\n      highPrice\n      priceCurrency\n      offers {\n        availability\n        price\n        priceValidUntil\n        priceCurrency\n        itemCondition\n        seller {\n          identifier\n        }\n        listPrice\n      }\n    }\n    isVariantOf {\n      productGroupID\n      name\n    }\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n  }\n}\n",
   "HomePageQuery": "query HomePageQuery {\n  site {\n    siteMetadata {\n      title\n      description\n      titleTemplate\n    }\n  }\n}\n",
   "SearchPageQuery": "query SearchPageQuery {\n  site {\n    siteMetadata {\n      titleTemplate\n      title\n      description\n    }\n  }\n}\n",
   "ValidateCartMutation": "mutation ValidateCartMutation($cart: IStoreCart!) {\n  validateCart(cart: $cart) {\n    order {\n      orderNumber\n      acceptedOffer {\n        seller {\n          identifier\n        }\n        quantity\n        price\n        listPrice\n        itemOffered {\n          sku\n          name\n          image {\n            url\n            alternateName\n          }\n          brand {\n            name\n          }\n          isVariantOf {\n            productGroupID\n            name\n          }\n          gtin\n          additionalProperty {\n            propertyID\n            name\n            value\n            valueReference\n          }\n        }\n      }\n    }\n    messages {\n      text\n      status\n    }\n  }\n}\n",

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- 301 redirects when visiting old VTEX product routes ([#87](https://github.com/vtex-sites/gatsby.store/pull/87))
 
 ### Changed
 

cypress/integration/seo.test.js

@@ -7,7 +7,7 @@
  */
 
 import { options } from '../global'
-import { cypress } from '../../store.config'
+import { cypress, storeUrl } from '../../store.config'
 
 const { pages } = cypress
 
@@ -35,7 +35,7 @@ describe('Home Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(`https://${window.location.host}/`)
+        expect($link.attr('href')).to.eq(storeUrl)
       })
   })
 
@@ -101,9 +101,7 @@ describe('Product Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(
-          `https://${window.location.host}${pages.pdp}`
-        )
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.pdp}`)
       })
   })
 
@@ -193,9 +191,7 @@ describe('Collection Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(
-          `https://${window.location.host}${pages.collection}/`
-        )
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
       })
   })
 
@@ -250,9 +246,7 @@ describe('Filtered Collection Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(
-          `https://${window.location.host}${pages.collection}/`
-        )
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
       })
   })
 

package.json

@@ -30,7 +30,7 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^1.9.6",
+    "@faststore/api": "^1.9.7",
     "@faststore/sdk": "^1.9.4",
     "@faststore/ui": "^1.9.4",
     "@vtex/graphql-utils": "^1.8.42",

src/pages/[slug]/p.tsx

@@ -17,6 +17,8 @@ import type {
 } from '@generated/graphql'
 import { ITEMS_PER_SECTION } from 'src/constants'
 
+import storeConfig from '../../../store.config'
+
 import 'src/styles/pages/pdp.scss'
 
 export type Props = PageProps<
@@ -31,22 +33,21 @@ function Page(props: Props) {
   const {
     data: { site },
     serverData,
-    location: { host },
-    slug,
   } = props
 
   // No data was found
   if (serverData === null) {
     return null
   }
 
-  const { product } = serverData
-  const title = product?.seo.title ?? site?.siteMetadata?.title ?? ''
-  const description =
-    product?.seo.description ?? site?.siteMetadata?.description ?? ''
+  const {
+    product,
+    product: { seo },
+  } = serverData
 
-  const canonical =
-    host !== undefined ? `https://${host}/${slug}/p` : `/${slug}/p`
+  const title = seo.title || site?.siteMetadata?.title || ''
+  const description = seo.description || site?.siteMetadata?.description || ''
+  const canonical = `https://${storeConfig.storeUrl}${seo.canonical}`
 
   return (
     <>
@@ -58,7 +59,7 @@ function Page(props: Props) {
         language={locale}
         openGraph={{
           type: 'og:product',
-          url: `${site?.siteMetadata?.siteUrl}${slug}`,
+          url: canonical,
           title,
           description,
           images: product.image.map((img) => ({
@@ -131,21 +132,20 @@ export const querySSG = graphql`
 `
 
 export const querySSR = gql`
-  query ServerProductPageQuery($id: String!) {
-    product(locator: [{ key: "id", value: $id }]) {
+  query ServerProductPageQuery($slug: String!) {
+    product(locator: [{ key: "slug", value: $slug }]) {
       id: productID
-      slug
 
       seo {
         title
         description
+        canonical
       }
 
       brand {
         name
       }
 
-      slug
       sku
       gtin
       name
@@ -191,13 +191,11 @@ export const getServerData = async ({
   params: Record<string, string>
 }) => {
   const ONE_YEAR_CACHE = `s-maxage=31536000, stale-while-revalidate`
-  const id = slug.split('-').pop()
-
   const { isNotFoundError } = await import('@faststore/api')
   const { execute } = await import('src/server/index')
   const { data, errors = [] } = await execute({
     operationName: querySSR,
-    variables: { id },
+    variables: { slug },
   })
 
   const notFound = errors.find(isNotFoundError)

src/server/index.ts

@@ -1,17 +1,17 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   envelop,
+  useAsyncSchema,
   useExtendContext,
   useMaskedErrors,
-  useAsyncSchema,
 } from '@envelop/core'
-import type { FormatErrorHandler } 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 { Options as APIOptions } from '@faststore/api'
 import { GraphQLError } from 'graphql'
+import type { FormatErrorHandler } from '@envelop/core'
+import type { Options as APIOptions } from '@faststore/api'
 
 import persisted from '../../@generated/graphql/persisted.json'
 import storeConfig from '../../store.config'

store.config.js

@@ -25,7 +25,7 @@ module.exports = {
     server: process.env.BASE_SITE_URL || 'http://localhost:9000',
     pages: {
       home: '/',
-      pdp: '/apple-magic-mouse-99988212/p',
+      pdp: '/apple-magic-mouse/p',
       collection: '/office',
     },
   },
@@ -34,7 +34,7 @@ module.exports = {
   cypress: {
     pages: {
       home: '/',
-      pdp: '/apple-magic-mouse-99988212/p',
+      pdp: '/apple-magic-mouse/p',
       collection: '/office',
       collection_filtered:
         '/office/?category-1=office&marca=acer&facets=category-1%2Cmarca',

yarn.lock

@@ -1974,10 +1974,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@faststore/api@^1.9.6":
-  version "1.9.6"
-  resolved "https://registry.yarnpkg.com/@faststore/api/-/api-1.9.6.tgz#c94c32fc2fb2098d6016914475b508e3f9afcf42"
-  integrity sha512-J3zi7g+szhQBLU9jgYgFDwP4oQFJB+4BpFx/Qvtn6voRsScRoP1Sz9Yk/1lZ2t1T5IZFTn4Qw/oudK2ii5+hMA==
+"@faststore/api@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/@faststore/api/-/api-1.9.7.tgz#00c2ecad235a273860035c87e4be3b9c3dea4115"
+  integrity sha512-khpdJ7J4W2P9SZdF9cesfceEjrK0E0Z6xLd6hZmZEJXba2vhuvNHP1zgUYpFVkEawT1IBN7y0akLp7EygqPp5w==
   dependencies:
     "@graphql-tools/schema" "^8.2.0"
     "@rollup/plugin-graphql" "^1.0.0"