@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/lib/graphql/client.ts

@@ -1,109 +1,32 @@
 'use client';
 
-import { GraphQLClient } from 'graphql-request';
-import { getCurrencyFromCookie } from '@/lib/currency/';
-
-// Import config - will be injected by CLI during template generation
-let config: {
-  shop: { slug: string };
-  api: { url: string };
-} | null = null;
-
-try {
-  // Dynamic import to handle cases where config doesn't exist yet
-  const configModule = require('@/doswiftly.config');
-  config = configModule.default || configModule;
-} catch (error) {
-  // Fallback to environment variables if config file doesn't exist
-  config = {
-    shop: {
-      slug: process.env.NEXT_PUBLIC_SHOP_SLUG || 'demo-shop',
-    },
-    api: {
-      url: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
-    },
-  };
-}
-
-/**
- * Create a GraphQL client with dynamic currency header
- * 
- * This factory creates a new client instance that reads the current
- * preferred currency from cookies on each request, ensuring SSR compatibility.
- * 
- * The client injects:
- * - X-Shop-Slug: Shop identifier for multi-tenancy
- * - X-Preferred-Currency: User's preferred currency (from cookie, SSR-safe)
- * 
- * @returns GraphQL client configured for client-side usage with currency support
- * 
- * @example
- * ```typescript
- * const client = createGraphQLClient();
- * const data = await client.request(ProductDocument, { handle: 'my-product' });
- * ```
- */
-export function createGraphQLClient(): GraphQLClient {
-  return new GraphQLClient(`${config!.api.url}/storefront/graphql`, {
-    headers: () => {
-      // Read current currency from cookie (SSR-safe, always fresh)
-      const currency = getCurrencyFromCookie();
-      
-      return {
-        'X-Shop-Slug': config!.shop.slug,
-        // Dynamic currency header - reads from cookie on each request
-        ...(currency && { 'X-Preferred-Currency': currency }),
-      };
-    },
-  });
-}
+import { useStorefrontClient } from '@doswiftly/storefront-sdk/react';
+import { useCallback } from 'react';
 
 /**
- * Singleton GraphQL client instance
- * 
- * Reuses the same client instance across the application to avoid
- * creating multiple connections. The client's headers are evaluated
- * dynamically on each request, so currency changes are reflected
- * automatically.
- */
-let clientInstance: GraphQLClient | null = null;
-
-/**
- * Get or create the singleton GraphQL client
- * 
- * Returns a cached client instance that automatically includes
- * the current preferred currency in request headers.
- * 
- * The client is currency-aware and will include the user's
- * preferred currency in the X-Preferred-Currency header on
- * every request.
- * 
- * @returns Singleton GraphQL client instance
- * 
+ * Execute GraphQL operations using SDK's StorefrontClient from Context.
+ * Includes auth + currency middleware automatically.
+ *
+ * Replaces the old module-level singleton client which was incompatible
+ * with the Context-based store pattern.
+ *
  * @example
  * ```typescript
- * // In a Client Component
- * 'use client';
- * import { getGraphQLClient } from '@/lib/graphql/client';
- * import { ProductDocument } from '@/generated/graphql';
- * 
- * export function ProductPrice({ handle }) {
- *   const client = getGraphQLClient();
- *   
- *   const fetchProduct = async () => {
- *     return client.request(ProductDocument, { handle });
- *   };
- *   
- *   // Product will be fetched with current preferred currency
- *   const { data } = useQuery(['product', handle], fetchProduct);
- *   
- *   return <div>{data.product.priceRange.minVariantPrice.amount}</div>;
+ * function useMyQuery() {
+ *   const execute = useExecute();
+ *   return useQuery({
+ *     queryKey: ['my-query'],
+ *     queryFn: () => execute<MyQueryResult>(MyDocument.toString(), variables),
+ *   });
  * }
  * ```
  */
-export function getGraphQLClient(): GraphQLClient {
-  if (!clientInstance) {
-    clientInstance = createGraphQLClient();
-  }
-  return clientInstance;
+export function useExecute() {
+  const client = useStorefrontClient();
+
+  return useCallback(
+    <TResult>(query: string, variables?: Record<string, unknown>): Promise<TResult> =>
+      client.query<TResult>(query, variables),
+    [client],
+  );
 }

package/templates/storefront-nextjs-shadcn/lib/graphql/config.ts

@@ -0,0 +1,33 @@
+/**
+ * Centralized GraphQL configuration.
+ *
+ * Single source of truth for API URL and shop slug.
+ * Used by both client.ts (browser) and server.ts (SSR).
+ *
+ * Resolution order:
+ * 1. doswiftly.config.ts (CLI-injected, highest priority)
+ * 2. Environment variables (NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SHOP_SLUG)
+ * 3. Defaults (localhost:8000, demo-shop)
+ */
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || 'demo-shop';
+
+let configApiUrl = apiUrl;
+let configShopSlug = shopSlug;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const configModule = require('@/doswiftly.config');
+  const config = configModule.default || configModule;
+  configApiUrl = config.api?.url || apiUrl;
+  configShopSlug = config.shop?.slug || shopSlug;
+} catch {
+  // doswiftly.config.ts not available — use env vars
+}
+
+export const graphqlConfig = {
+  apiUrl: configApiUrl,
+  shopSlug: configShopSlug,
+} as const;
+

package/templates/storefront-nextjs-shadcn/lib/graphql/fragments.ts

@@ -0,0 +1,34 @@
+/**
+ * Fragment type re-exports for component data contracts.
+ *
+ * Import fragment types from here instead of @/generated/graphql.
+ * Each fragment maps to a colocated .fragment.graphql file next to its component.
+ *
+ * @example
+ * import type { ProductCardFields } from '@/lib/graphql/fragments';
+ * interface Props { product: ProductCardFields }
+ */
+
+// Template-local component fragments (colocated at components/)
+export type { ProductCardFieldsFragment as ProductCardFields } from '@/generated/graphql';
+export type { ProductDetailFieldsFragment as ProductDetailFields } from '@/generated/graphql';
+export type { ProductVariantFieldsFragment as ProductVariantFields } from '@/generated/graphql';
+export type { CollectionCardFieldsFragment as CollectionCardFields } from '@/generated/graphql';
+export type { CartLineFieldsFragment as CartLineFields } from '@/generated/graphql';
+export type { OrderSummaryFieldsFragment as OrderSummaryFields } from '@/generated/graphql';
+export type { CustomerInfoFieldsFragment as CustomerInfoFields } from '@/generated/graphql';
+export type { CategoryNodeFieldsFragment as CategoryNodeFields } from '@/generated/graphql';
+
+// Backend SSOT fragments — lightweight price for listing views
+export type { PriceFragment as Price } from '@/generated/graphql';
+
+// Backend SSOT fragments (used by loyalty domain components)
+// Same naming convention — clean names without Fragment suffix
+export type { LoyaltyPointsSummaryFragment as LoyaltyPointsSummary } from '@/generated/graphql';
+export type { LoyaltyTierFragment as LoyaltyTier } from '@/generated/graphql';
+export type { TierProgressFragment as TierProgress } from '@/generated/graphql';
+export type { LoyaltyMemberFragment as LoyaltyMember } from '@/generated/graphql';
+export type { LoyaltyRewardFragment as LoyaltyReward } from '@/generated/graphql';
+export type { LoyaltyTransactionFragment as LoyaltyTransaction } from '@/generated/graphql';
+export type { LoyaltySettingsFragment as LoyaltySettings } from '@/generated/graphql';
+export type { ReferralStatsFragment as ReferralStats } from '@/generated/graphql';