Merge pull request #2423 from graphcommerce-org/feature/magento-bare-2

Feature/magento bare 2

.changeset/four-ladybugs-nail.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-config': patch
+---
+
+Added graphql.config.ts to projects

.changeset/healthy-plums-rescue.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/graphql': patch
+---
+
+Added back ApolloClient caching for SSR requests to projects

examples/magento-graphcms/graphql.config.ts

@@ -0,0 +1,20 @@
+import type { IGraphQLConfig } from 'graphql-config'
+
+const config: IGraphQLConfig = {
+  schema: [
+    '.mesh/schema.graphql',
+    'node_modules/@graphcommerce/apollo-client.graphql',
+    'node_modules/@graphcommerce/graphql-codegen-near-operation-file/src/injectable.graphqls',
+  ],
+  documents: [
+    'components/**/*.graphql',
+    'graphql/**/*.graphql',
+    'node_modules/@graphcommerce/**/*.graphql',
+  ],
+  extensions: {
+    languageService: { useSchemaFileDefinitions: true },
+    endpoints: { default: { url: 'http://localhost:3000/api/graphql/' } },
+  },
+}
+
+export default config

examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts

@@ -10,6 +10,7 @@ import {
   FetchPolicy,
   DefaultOptions,
   PreviewConfig,
+  NormalizedCacheObject,
 } from '@graphcommerce/graphql'
 import { MeshApolloLink, getBuiltMesh } from '@graphcommerce/graphql-mesh'
 import { storefrontConfig, storefrontConfigDefault } from '@graphcommerce/next-ui'
@@ -50,7 +51,16 @@ export function graphqlSharedClient(context: GetStaticPropsContext) {
   return client(context, 'cache-first')
 }
 
+const ssrClient: {
+  [locale: string]: ApolloClient<NormalizedCacheObject>
+} = {}
+
 export function graphqlSsrClient(context: GetStaticPropsContext) {
-  i18nSsrLoader(context.locale)
-  return client(context, 'no-cache')
+  const locale = context.locale ?? storefrontConfigDefault().locale
+  i18nSsrLoader(locale)
+
+  // Create a client if it doesn't exist for the locale.
+  if (!ssrClient[locale]) ssrClient[locale] = client(context, 'no-cache')
+
+  return ssrClient[locale]
 }

examples/magento-graphcms/package.json

@@ -123,7 +123,7 @@
     "> 1% in alt-EU",
     "not IE 11"
   ],
-  "prettier": "@graphcommerce/prettier-config-pwa",
+  "prettier": "@graphcommerce/prettier-config-pwa/classic.js",
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {

examples/magento-open-source/.gitignore

@@ -0,0 +1,32 @@
+# dependencies
+node_modules
+
+# next.js
+.next/
+out/
+.vercel
+next-env.d.ts
+._tmp*
+.swc
+
+# misc
+.DS_Store
+.env*
+!.env.example
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# application
+**/public/workbox-*.js*
+**/public/sw.js*
+**/public/sitemap*.xml
+**/public/robots.txt
+
+*.gql.ts
+
+# application
+.mesh
+*.tsbuildinfo

examples/magento-open-source/.graphqlrc.yml

@@ -0,0 +1,17 @@
+projects:
+  Project:
+    schema:
+      - .mesh/schema.graphql
+      - node_modules/@graphcommerce/graphql/apollo-client.graphql
+      - node_modules/@graphcommerce/graphql-codegen-near-operation-file/src/directive/env.graphqls
+      - node_modules/@graphcommerce/graphql-codegen-near-operation-file/src/directive/injectable.graphqls
+    documents:
+      - ./components/**/*.graphql
+      - ./graphql/**/*.graphql
+      - node_modules/@graphcommerce/**/*.graphql
+    extensions:
+      languageService:
+        useSchemaFileDefinitions: true
+      endpoints:
+        default:
+          url: http://localhost:3000/api/graphql/

examples/magento-open-source/.meshrc.yml

@@ -0,0 +1,21 @@
+sources:
+  - name: m2
+    handler:
+      graphql:
+        endpoint: '{graphCommerce.magentoEndpoint}'
+        useGETForQueries: true
+        batch: false
+        operationHeaders:
+          Store: '{context.headers.store}'
+          Authorization: '{context.headers.authorization}'
+          X-ReCaptcha: "{context.headers['x-recaptcha']}"
+          Preview-Version: "{context.headers['preview-version']}"
+          Content-Currency: "{context.headers['content-currency']}"
+          X-Magento-Cache-Id: "{context.headers['x-magento-cache-id']}"
+          X-Forwarded-For: "{context.headers['x-forwarded-for']}"
+serve:
+  playground: true
+plugins:
+  - '@graphcommerce/graphql-mesh/plugin/forward-headers':
+      forwardHeaders:
+        - X-Magento-Cache-Id

examples/magento-open-source/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": "never" },
+  "editor.snippetSuggestions": "none",
+  "emmet.showExpandedAbbreviation": "never",
+  "editor.wordBasedSuggestions": "off",
+  "javascript.suggest.names": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/.next": true,
+    ".yarn": true,
+    "yarn.lock": true
+  },
+  "files.readonlyInclude": {
+    "**/*.interceptor.tsx": true,
+    "**/*.interceptor.ts": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

examples/magento-open-source/.yarnrc.yml

@@ -0,0 +1,3 @@
+enableImmutableInstalls: false
+
+nodeLinker: node-modules

examples/magento-open-source/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

examples/magento-open-source/README.md

@@ -0,0 +1,103 @@
+<p align="center">
+    <a href="https://www.graphcommerce.org/"><img src="https://graphcommerce.vercel.app/favicon.svg" alt="GraphCommerce Logo"/></a>
+</p>
+<p align="center">
+  <a aria-label="License" href="https://www.npmjs.com/package/@graphcommerce/magento-open-source">
+    <img alt="" src="https://img.shields.io/npm/v/@graphcommerce/magento-open-source?style=for-the-badge">
+  </a>
+  <a aria-label="License" href="https://github.com/graphcommerce-org/graphcommerce/blob/main/LICENSE.md">
+    <img alt="" src="https://img.shields.io/badge/License-ELv2-green?style=for-the-badge">
+  </a>
+  <a aria-label="Vercel logo" href="https://vercel.com?utm_source=graphcommerce&utm_campaign=oss">
+    <img src="https://img.shields.io/badge/POWERED%20BY%20Vercel-000000.svg?style=for-the-badge&logo=Vercel&labelColor=000">
+  </a>  
+</p>
+
+<div align="center">
+
+📚 [Docs](https://graphcommerce.org/docs) | 🗣
+[Slack](https://join.slack.com/t/graphcommerce/shared_invite/zt-11rmgq1ad-F~0daNtKcSvtcC4eQRzjeQ)
+| 📝
+[Release notes](https://github.com/graphcommerce-org/graphcommerce/releases)
+
+</div>
+
+GraphCommerce is a framework for building headless ecommerce storefronts in
+React and Next.js. It provides a best-in-class example, including components and
+utilities, to deliver a high-performance, high-quality ecommerce Progressive Web
+App (PWA).
+
+Explore the [GraphCommerce demo](https://graphcommerce.vercel.app/) or start
+building your custom GraphCommerce ecommerce frontend.
+
+https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4
+
+The GraphCommerce homepage, showcasing content from Magento through a variety of
+included UX components.
+
+---
+
+# Getting started with GraphCommerce
+
+In this guide, you will set up a GraphCommerce app locally, allowing you to
+start building.
+
+### Requirements
+
+- Install and use node 16/18: `nvm install 16` or `nvm use 16`
+- Install yarn: `corepack enable`
+
+## Step 1: Create a GraphCommerce app
+
+```bash
+git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
+# Clone repository
+```
+
+```bash
+mkdir my-project
+# Create project folder
+```
+
+```bash
+cp -R graphcommerce/examples/magento/. my-project && rm -rf graphcommerce && cd my-project
+# Copy example, delete repo, navigate to project folder
+```
+
+## Step 2: Configure API keys
+
+(Optional,
+[continue reading](https://www.graphcommerce.org/docs/getting-started/create))
+
+## Step 3: Start the app
+
+```bash
+yarn
+# Install the dependencies
+```
+
+```bash
+yarn codegen
+# Converts all .graphql files to typescript files
+```
+
+```bash
+yarn dev
+# Run the app
+```
+
+---
+
+🎉 Explore your GraphCommerce app running at http://localhost:3000
+
+(Explore the GraphQL Playground running at http://localhost:3000/api/graphql)
+
+> No success? Consult the
+> [troubleshooting guide](../../docs/framework/troubleshooting.md)
+
+## Next steps
+
+- The [Quick start](../../docs/getting-started/readme.md) guide covers about 80%
+  of the concepts you'll use, so it's a great place to start.
+- [Start customizing](../../docs/getting-started/start-building.md) to go from
+  "Hello World" to a fully built GraphCommerce custom storefront.

examples/magento-open-source/codegen.yml

@@ -0,0 +1,42 @@
+generates:
+  # Generate a types file
+  node_modules/@graphcommerce/graphql/generated/types.ts:
+    schema:
+      - .mesh/schema.graphql
+    plugins:
+      - typescript-apollo-client-helpers
+      - add
+    config:
+      enumsAsTypes: true
+      content: '/* eslint-disable */'
+  # Generate a fragments.json
+  node_modules/@graphcommerce/graphql/generated/fragments.json:
+    schema:
+      - .mesh/schema.graphql
+    plugins:
+      - fragment-matcher
+  # Generate .gql.ts files for each GraphQL file
+  .:
+    schema:
+      - .mesh/schema.graphql
+    documents:
+      - 'components/**/*.graphql'
+      - 'graphql/**/*.graphql'
+    plugins:
+      - '@graphcommerce/graphql-codegen-relay-optimizer-plugin'
+      - typed-document-node
+      - typescript-operations
+      - add
+    preset: '@graphcommerce/graphql-codegen-near-operation-file'
+    presetConfig:
+      extension: .gql.ts
+      baseTypesPath: ~@graphcommerce/graphql-mesh/.mesh
+      injectables: true
+    config:
+      skipTypename: true
+      namingConvention: 'keep'
+      dedupeOperationSuffix: true
+      arrayInputCoercion: false
+      content: /* eslint-disable */
+watchConfig:
+  usePolling: false

examples/magento-open-source/components/Layout/Footer.tsx

@@ -0,0 +1,69 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { Image } from '@graphcommerce/image'
+import { useCheckoutGuestEnabled } from '@graphcommerce/magento-cart'
+import { StoreConfigDocument, StoreSwitcherButton } from '@graphcommerce/magento-store'
+import { DateFormat, Footer as FooterBase } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Button, IconButton, Link } from '@mui/material'
+
+export function Footer() {
+  const cartEnabled = useCheckoutGuestEnabled()
+  const config = useQuery(StoreConfigDocument)
+
+  const websiteName = config.data?.storeConfig?.website_name
+  const year = <DateFormat dateStyle={undefined} year='numeric' date={new Date()} />
+
+  return (
+    <FooterBase
+      socialLinks={[
+        <IconButton
+          href='https://www.graphcommerce.org/'
+          color='inherit'
+          size='medium'
+          edge='start'
+        >
+          <Image
+            layout='fill'
+            src='https://www.graphcommerce.org/favicon.svg'
+            width={24}
+            height={24}
+            alt='GraphCommerce website'
+            unoptimized
+            sx={(theme) => ({
+              filter: theme.palette.mode === 'dark' ? 'invert(100%)' : 'invert(0%)',
+            })}
+          />
+        </IconButton>,
+      ]}
+      storeSwitcher={<StoreSwitcherButton />}
+      customerService={
+        <Button href='/service' variant='pill'>
+          <Trans>Customer Service</Trans>
+        </Button>
+      }
+      copyright={
+        <>
+          <span>
+            <Trans>
+              Copyright© {year} {websiteName}
+            </Trans>
+          </span>
+
+          {import.meta.graphCommerce.magentoVersion >= 247 && cartEnabled && (
+            <Link href='/guest/orderstatus' color='textPrimary' underline='always'>
+              <Trans>Order status</Trans>
+            </Link>
+          )}
+          {import.meta.graphCommerce.magentoVersion >= 247 && (
+            <Link href='/service/contact-us' color='textPrimary' underline='always'>
+              <Trans>Contact</Trans>
+            </Link>
+          )}
+          <Link href='/service/newsletter' color='textPrimary' underline='always'>
+            <Trans>Newletter</Trans>
+          </Link>
+        </>
+      }
+    />
+  )
+}