Merge pull request #96 from nestjs-shopify/migrate-to-express-package

feat(): migrate to nestjs-shopify/express

Author: tolgap

apps/api/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { MikroOrmModule } from '@mikro-orm/nestjs';
 import { ShopifyAuthModule } from '@nestjs-shopify/auth';
-import { ShopifyCoreModule } from '@nestjs-shopify/core';
+import { ShopifyExpressModule } from '@nestjs-shopify/express';
 import { ShopifyGraphqlProxyModule } from '@nestjs-shopify/graphql';
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
@@ -25,7 +25,7 @@ import { WebhooksModule } from './shopify/webhooks/webhooks.module';
       isGlobal: true,
     }),
     MikroOrmModule.forRootAsync(databaseConfig.asProvider()),
-    ShopifyCoreModule.forRootAsync({
+    ShopifyExpressModule.forRootAsync({
       imports: [ConfigModule.forFeature(shopifyCoreConfig), SessionModule],
       useClass: ShopifyCoreConfigService,
     }),

apps/api/src/app/products/products.controller.ts

@@ -1,16 +1,16 @@
 import { CurrentSession, UseShopifyAuth } from '@nestjs-shopify/auth';
-import { SHOPIFY_API_CONTEXT } from '@nestjs-shopify/core';
-import { Controller, Get, Inject } from '@nestjs/common';
-import { Shopify } from '@shopify/shopify-api';
+import { InjectShopify } from '@nestjs-shopify/core';
+import { Controller, Get } from '@nestjs/common';
+import { ConfigParams, Shopify } from '@shopify/shopify-api';
 import { restResources } from '@shopify/shopify-api/rest/admin/2023-07';
 import { SessionEntity } from '../session/session.entity';
 
 @UseShopifyAuth()
 @Controller('products')
 export class ProductsController {
   constructor(
-    @Inject(SHOPIFY_API_CONTEXT)
-    private readonly shopifyApi: Shopify<typeof restResources>
+    @InjectShopify()
+    private readonly shopifyApi: Shopify<ConfigParams<typeof restResources>>
   ) {}
 
   @Get('count')

apps/web/components/ProductsCard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react';
 import { VerticalStack, Button, LegacyCard, Text } from '@shopify/polaris';
-import { Toast, useAppBridge } from '@shopify/app-bridge-react';
+import { useAppBridge } from '@shopify/app-bridge-react';
 import { gql, useMutation } from '@apollo/client';
 import { userLoggedInFetch } from '../utils/userLoggedInFetch';
 
@@ -32,16 +32,19 @@ export function ProductsCard() {
     updateProductCount();
   }, [updateProductCount]);
 
-  const toastMarkup = hasResults && (
-    <Toast
-      content="1 product created!"
-      onDismiss={() => setHasResults(false)}
-    />
-  );
+  const showToast = useCallback(() => {
+    if (hasResults) {
+      app.toast.show('1 product created!', {
+        onDismiss() {
+          setHasResults(false);
+        },
+      });
+    }
+  }, [app, hasResults, setHasResults]);
 
   return (
     <>
-      {toastMarkup}
+      {showToast()}
       <LegacyCard title="Product Counter" sectioned>
         <VerticalStack gap="4">
           <p>

apps/web/pages/_app.tsx

@@ -4,10 +4,7 @@ import {
   HttpLink,
   InMemoryCache,
 } from '@apollo/client';
-import {
-  Provider as AppBridgeProvider,
-  useAppBridge,
-} from '@shopify/app-bridge-react';
+import { useAppBridge } from '@shopify/app-bridge-react';
 import { AppProvider as PolarisProvider } from '@shopify/polaris';
 import translations from '@shopify/polaris/locales/en.json';
 import '@shopify/polaris/build/esm/styles.css';
@@ -42,15 +39,7 @@ class MyApp extends App {
 
     return (
       <PolarisProvider i18n={translations}>
-        <AppBridgeProvider
-          config={{
-            apiKey: process.env.SHOPIFY_API_KEY,
-            host,
-            forceRedirect: true,
-          }}
-        >
-          <MyProvider Component={Component} host={host} {...pageProps} />
-        </AppBridgeProvider>
+        <MyProvider Component={Component} host={host} {...pageProps} />
       </PolarisProvider>
     );
   }

apps/web/pages/_document.tsx

@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <meta name="shopify-api-key" content={process.env.SHOPIFY_API_KEY} />
+        <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

apps/web/utils/userLoggedInFetch.ts

@@ -1,11 +1,8 @@
-import { authenticatedFetch } from '@shopify/app-bridge-utils';
 import { Redirect } from '@shopify/app-bridge/actions';
 
 export function userLoggedInFetch(app) {
-  const fetchFunction = authenticatedFetch(app);
-
   return async (uri, options?: RequestInit) => {
-    const response = await fetchFunction(uri, options);
+    const response = await fetch(uri, options);
 
     if (
       response.headers.get('X-Shopify-API-Request-Failure-Reauthorize') === '1'