feat: Add product model caching

frontend/.env.production

@@ -3,8 +3,11 @@
 
 NEXT_PUBLIC_ALGOLIA_APP_ID=XQEP3AD9ZT
 # Overridden in prod
-NEXT_PUBLIC_IFIXIT_ORIGIN=https://www.cominor.com # IFIXIT_ORIGIN should point to cominor in dev (e.g. use for iFixit PHP API)
-NEXT_PUBLIC_APP_ORIGIN=https://${VERCEL_URL} # APP_ORIGIN should point to localhost:3000 in dev (e.g. use for Next.js API)
+
+# IFIXIT_ORIGIN should point to cominor in dev (e.g. use for iFixit PHP API)
+NEXT_PUBLIC_IFIXIT_ORIGIN=https://www.cominor.com 
+# APP_ORIGIN should point to localhost:3000 in dev (e.g. use for Next.js API)
+NEXT_PUBLIC_APP_ORIGIN=https://${VERCEL_URL} 
 
 # Overridden in prod
 NEXT_PUBLIC_STRAPI_ORIGIN=https://$NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF.govinor.com

frontend/components/common/CompatibleDevice.tsx

@@ -1,5 +1,5 @@
 import { Flex, Img, Text } from '@chakra-ui/react';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import * as React from 'react';
 
 export type CompatibleDeviceProps = {

frontend/next.config.js

@@ -139,12 +139,13 @@ const moduleExports = {
       });
       return config;
    },
-   ...(!SENTRY_AUTH_TOKEN && {
-      sentry: {
+   sentry: {
+      ...(!SENTRY_AUTH_TOKEN && {
          disableServerWebpackPlugin: true,
          disableClientWebpackPlugin: true,
-      },
-   }),
+      }),
+      autoInstrumentServerFunctions: false,
+   },
 };
 
 // Make sure adding Sentry options is the last code to run before exporting, to

frontend/pages/api/nextjs/cache/product.ts

@@ -1,7 +1,30 @@
-import type { NextApiHandler } from 'next';
+import { Duration } from '@lib/duration';
+import { withCache } from '@lib/swr-cache';
+import { ProductSchema } from '@models/product/schema';
+import { findProduct } from '@models/product/server';
+import { z } from 'zod';
 
-const handler: NextApiHandler = async (req, res) => {
-   res.status(200).json({ model: 'product' });
-};
+export type {
+   Product,
+   ProductImage,
+   ProductVariant,
+   ProductVariantImage,
+} from '@models/product/schema';
 
-export default handler;
+export default withCache({
+   endpoint: 'api/nextjs/cache/product',
+   variablesSchema: z.object({
+      handle: z.string(),
+      storeCode: z.string(),
+   }),
+   valueSchema: ProductSchema.nullable(),
+   async getFreshValue({ handle, storeCode }) {
+      return findProduct({
+         handle,
+         storeCode,
+      });
+   },
+   ttl: Duration(1).minute,
+   staleWhileRevalidate: Duration(1).day,
+   log: true,
+});

frontend/templates/product/MetaTags.tsx

@@ -1,6 +1,6 @@
 import { useAppContext } from '@ifixit/app';
 import { parseItemcode } from '@ifixit/helpers';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import Head from 'next/head';
 import React from 'react';
 import { jsonLdScriptProps } from 'react-schemaorg';

frontend/templates/product/hooks/useInternationalBuyBox.tsx

@@ -1,7 +1,7 @@
 import { useIFixitApiClient } from '@ifixit/ifixit-api-client';
 import { useExpiringLocalPreference } from '@ifixit/ui';
 import { getBuyBoxForProduct } from '@lib/ifixit-api/international-buy-box';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import { useQuery } from '@tanstack/react-query';
 import { useSelectedVariant } from './useSelectedVariant';
 

frontend/templates/product/hooks/useIsProductForSale.ts

@@ -1,5 +1,5 @@
 import { useAuthenticatedUser } from '@ifixit/auth-sdk';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 
 export function useIsProductForSale(product: Product): boolean {
    const user = useAuthenticatedUser();

frontend/templates/product/hooks/useProductReviews.ts

@@ -1,6 +1,6 @@
 import { useIFixitApiClient } from '@ifixit/ifixit-api-client';
 import { fetchProductReviews } from '@models/product/reviews';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import { useQuery } from '@tanstack/react-query';
 
 const productReviewsKeys = {

frontend/templates/product/hooks/useProductTemplateProps.ts

@@ -1,7 +1,7 @@
 import { WithProvidersProps } from '@components/common';
 import type { WithLayoutProps } from '@layouts/default/server';
 import { useServerSideProps } from '@lib/server-side-props';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 
 export type ProductTemplateProps = WithProvidersProps<
    WithLayoutProps<{

frontend/templates/product/hooks/useSelectedVariant.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@ifixit/helpers';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 

frontend/templates/product/sections/CompatibilitySection/index.tsx

@@ -1,7 +1,7 @@
 import { Box, chakra, Heading, SimpleGrid } from '@chakra-ui/react';
 import { CompatibleDevice } from '@components/common/CompatibleDevice';
 import { PageContentWrapper } from '@ifixit/ui';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import NextLink from 'next/link';
 
 export type CompatibilitySectionProps = {

frontend/templates/product/sections/CrossSellSection/index.tsx

@@ -29,7 +29,7 @@ import {
    useCartDrawer,
    useGetUserPrice,
 } from '@ifixit/ui';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import NextLink from 'next/link';
 import React from 'react';
 

frontend/templates/product/sections/FeaturedProductsSection/index.tsx

@@ -23,7 +23,7 @@ import {
    ProductVariantPrice,
    ResponsiveImage,
 } from '@ifixit/ui';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import { ImagePlaceholder } from '@templates/product/components/ImagePlaceholder';
 import NextLink from 'next/link';
 import * as React from 'react';

frontend/templates/product/sections/LifetimeWarrantySection/index.tsx

@@ -3,7 +3,7 @@ import { Box, Button, Flex, Heading, Icon, Text } from '@chakra-ui/react';
 import { useAppContext } from '@ifixit/app';
 import { isLifetimeWarranty } from '@ifixit/helpers';
 import { PageContentWrapper } from '@ifixit/ui';
-import type { ProductVariant } from '@models/product/server';
+import type { ProductVariant } from '@pages/api/nextjs/cache/product';
 import backgroundImage from '@public/images/lifetime-guarantee-background.jpg';
 import Image from 'next/image';
 

frontend/templates/product/sections/ProductSection/AddToCart/index.tsx

@@ -19,7 +19,7 @@ import {
 import { useAddToCart, useCartLineItem } from '@ifixit/cart-sdk';
 import { FaIcon } from '@ifixit/icons';
 import { useCartDrawer, useUserPrice } from '@ifixit/ui';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import * as React from 'react';
 import { NotifyMeForm } from './NotifyMeForm';
 

frontend/templates/product/sections/ProductSection/CompatibleDevices.tsx

@@ -1,6 +1,6 @@
 import { chakra, Link } from '@chakra-ui/react';
 import { CompatibleDevice } from '@components/common';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import NextLink from 'next/link';
 
 export type CompatibleDevicesProps = {

frontend/templates/product/sections/ProductSection/GenuinePartBanner.tsx

@@ -12,7 +12,7 @@ import {
    Vive,
 } from '@assets/svg/files/partners';
 import { Flex, Link, Text, useTheme } from '@chakra-ui/react';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import React from 'react';
 
 export type GenuinePartBannerProps = {

frontend/templates/product/sections/ProductSection/ProductDescription.tsx

@@ -5,7 +5,7 @@ import {
    faTriangleExclamation,
 } from '@fortawesome/pro-solid-svg-icons';
 import { FaIcon } from '@ifixit/icons';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 
 export type ProductDescriptionProps = {
    product: Product;

frontend/templates/product/sections/ProductSection/ProductGallery.tsx

@@ -7,7 +7,7 @@ import type {
    Product,
    ProductImage,
    ProductVariant,
-} from '@models/product/server';
+} from '@pages/api/nextjs/cache/product';
 import { useSwiper } from '@templates/product/hooks/useSwiper';
 import * as React from 'react';
 import ReactDOM from 'react-dom';

frontend/templates/product/sections/ProductSection/ProductOptions.tsx

@@ -13,7 +13,7 @@ import {
 import { faImageSlash } from '@fortawesome/pro-duotone-svg-icons';
 import { FaIcon } from '@ifixit/icons';
 import { ResponsiveImage } from '@ifixit/ui';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import * as React from 'react';
 
 export type ProductOptionsProps = {

frontend/templates/product/sections/ProductSection/ProductRating.tsx

@@ -1,7 +1,7 @@
 import { Box, HStack, Link, Text } from '@chakra-ui/react';
 import { Rating } from '@components/ui';
 import { shouldShowProductRating } from '@ifixit/helpers';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 
 type ProductRatingProps = {
    product: Product;

frontend/templates/product/sections/ProductSection/ProductVideos.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 import { LiteYoutubeEmbed } from 'react-lite-yt-embed';
 
 export function ProductVideos({ product }: { product: Product }) {

frontend/templates/product/sections/ProductSection/index.tsx

@@ -23,7 +23,7 @@ import { useAppContext } from '@ifixit/app';
 import { isLifetimeWarranty } from '@ifixit/helpers';
 import { FaIcon } from '@ifixit/icons';
 import { PageContentWrapper, ProductVariantPrice } from '@ifixit/ui';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import { useIsProductForSale } from '@templates/product/hooks/useIsProductForSale';
 import * as React from 'react';
 import { BuyBoxPropositionSection } from '../ServiceValuePropositionSection';

frontend/templates/product/sections/ReplacementGuidesSection/index.tsx

@@ -21,7 +21,7 @@ import {
    faGaugeMin,
 } from '@fortawesome/pro-solid-svg-icons';
 import { IconBadge, PageContentWrapper, ResponsiveImage } from '@ifixit/ui';
-import type { Product } from '@models/product/server';
+import type { Product } from '@pages/api/nextjs/cache/product';
 
 export type ReplacementGuidesSectionProps = {
    product: Product;

frontend/templates/product/sections/ReviewsSection/index.tsx

@@ -22,7 +22,7 @@ import { useAppContext } from '@ifixit/app';
 import { FaIcon } from '@ifixit/icons';
 import { PageContentWrapper } from '@ifixit/ui';
 import type { ProductReview } from '@models/product/reviews';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import { useProductReviews } from '@templates/product/hooks/useProductReviews';
 import React from 'react';
 

frontend/templates/product/sections/ServiceValuePropositionSection/index.tsx

@@ -1,4 +1,4 @@
-import type { ProductVariant } from '@models/product/server';
+import type { ProductVariant } from '@pages/api/nextjs/cache/product';
 import { Heading, Stack, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { List, ListIcon, ListItem } from '@chakra-ui/react';

frontend/templates/product/server.tsx

@@ -5,7 +5,7 @@ import { ifixitOriginFromHost } from '@helpers/path-helpers';
 import { invariant } from '@ifixit/helpers';
 import { urlFromContext } from '@ifixit/helpers/nextjs';
 import { getLayoutServerSideProps } from '@layouts/default/server';
-import { findProduct } from '@models/product/server';
+import Product from '@pages/api/nextjs/cache/product';
 import compose from 'lodash/flowRight';
 import { GetServerSideProps } from 'next';
 import { ProductTemplateProps } from './hooks/useProductTemplateProps';
@@ -23,7 +23,7 @@ export const getServerSideProps: GetServerSideProps<ProductTemplateProps> =
       const { stores, ...otherLayoutProps } = await getLayoutServerSideProps({
          storeCode: DEFAULT_STORE_CODE,
       });
-      const product = await findProduct({
+      const product = await Product.get({
          handle,
          storeCode: DEFAULT_STORE_CODE,
       });

frontend/tests/jest/__mocks__/products.ts

@@ -6,7 +6,7 @@ import type {
    Product,
    ProductVariant,
    ProductVariantImage,
-} from '@models/product/server';
+} from '@pages/api/nextjs/cache/product';
 import { ProductTemplateProps } from '@templates/product/hooks/useProductTemplateProps';
 
 const productImages: ProductVariantImage[] = [

frontend/tests/jest/utils.tsx

@@ -2,7 +2,7 @@ import { AppProviders } from '@components/common';
 import { CurrencyCode } from '@lib/shopify-storefront-sdk';
 import { ProductReview, ProductReviewData } from '@models/product/reviews';
 import { ProductSearchHit } from '@models/product-list';
-import type { Product, ProductVariant } from '@models/product/server';
+import type { Product, ProductVariant } from '@pages/api/nextjs/cache/product';
 import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import {
    mockedBatteryProduct,