@graphcommerce/docs 6.2.0-canary.7 → 6.2.0-canary.71

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # Change Log
 
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+### Patch Changes
+
+- [`2f479c830`](https://github.com/graphcommerce-org/graphcommerce/commit/2f479c830e84137b739d83bc6dd1e36a6e299e3a) - Added advise about URL suffixes ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.50
+
+## 6.2.0-canary.49
+
+### Patch Changes
+
+- [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`d0809b132`](https://github.com/graphcommerce-org/graphcommerce/commit/d0809b132a0e4cbdfeb86164f6c16a89ebecd987) - Added support for default values in the Config.graphqls files for the documentation ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+### Patch Changes
+
+- [#1957](https://github.com/graphcommerce-org/graphcommerce/pull/1957) [`cb3c82163`](https://github.com/graphcommerce-org/graphcommerce/commit/cb3c82163c32768f977b85c21b029ead354847af) - Docs were directly applied to the config.md which is autogenerated ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+### Patch Changes
+
+- [#1933](https://github.com/graphcommerce-org/graphcommerce/pull/1933) [`e644887a7`](https://github.com/graphcommerce-org/graphcommerce/commit/e644887a75a3801a8b0dcf39558f56110a51d774) - Updated ReCAPTCHA docs ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.17
+
+## 6.2.0-canary.16
+
+## 6.2.0-canary.15
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
+## 6.2.0-canary.8
+
 ## 6.2.0-canary.7
 
 ## 6.2.0-canary.6

package/framework/config.md

@@ -90,6 +90,8 @@ Examples:
 
 The HyGraph endpoint.
 
+> Read-only endpoint that allows low latency and high read-throughput content delivery.
+
 Project settings -> API Access -> High Performance Read-only Content API
 
 #### `magentoEndpoint: String!`
@@ -109,6 +111,28 @@ Due to a limitation of the GraphQL API it is not possible to determine if a cart
 
 When Magento's StoreConfig adds this value, this can be replaced.
 
+#### `compare: Boolean`
+
+Use compare functionality
+
+#### `compareVariant: [CompareVariant](#CompareVariant) (default: ICON)`
+
+By default the compare feature is denoted with a 'compare ICON' (2 arrows facing one another).
+This may be fine for experienced users, but for more clarity it's also possible to present the compare feature as a CHECKBOX accompanied by the 'Compare' label
+
+#### `configurableVariantForSimple: Boolean (default: [object Object])`
+
+If a simple product is part of a Configurable product page, should the simple product be
+rendered as a configured option of the configurable product page?
+
+How does this work:
+
+When the `products(filters: { url_key: { eq: 'simple-product' } }) { ... }` query is ran,
+Magento also returns the Simple product and the Configurable product the simple belongs to.
+
+If that is the case we render the configurable product page instead of the simple product page but
+the options to select the simple product are pre-selected.
+
 #### `customerRequireEmailConfirmation: Boolean`
 
 Due to a limitation in the GraphQL API of Magento 2, we need to know if the
@@ -121,7 +145,7 @@ This value should match Magento 2's configuration value for
 
 Debug configuration for GraphCommerce
 
-#### `demoMode: Boolean`
+#### `demoMode: Boolean (default: true)`
 
 Enables some demo specific code that is probably not useful for a project:
 
@@ -139,9 +163,13 @@ To override the value for a specific locale, configure in i18n config.
 
 #### `googleRecaptchaKey: String`
 
-Google reCAPTCHA key, get from https://developers.google.com/recaptcha/docs/v3
+Google reCAPTCHA site key.
+When using reCAPTCHA, this value is required, even if you are configuring different values for each locale.
 
-This value is required even if you are configuring different values for each locale.
+Get a site key and a secret key from https://developers.google.com/recaptcha/docs/v3
+
+The secret key should be added in the Magento admin panel (Stores > Configuration > Security > Google ReCAPTCHA Storefront > reCAPTCHA v3 Invisible)
+ReCAPTCHA can then be enabled/disabled for the different forms, separately (Stores > Configuration > Security > Google ReCAPTCHA Storefront > Storefront)
 
 #### `googleTagmanagerId: String`
 
@@ -149,6 +177,40 @@ The Google Tagmanager ID to be used on the site.
 
 This value is required even if you are configuring different values for each locale.
 
+#### `hygraphWriteAccessEndpoint: String`
+
+Content API. **Only used for migrations.**
+
+> Regular read & write endpoint that allows querying and mutating data in your project.
+
+Project settings -> API Access -> Content API
+
+#### `hygraphWriteAccessToken: String`
+
+Hygraph Management SDK Authorization Token. **Only used for migrations.**
+
+Project settings -> API Access -> Permanent Auth Tokens
+
+1. Click  'Add token' and give it a name, something like 'GraphCommerce Write Access Token' and keep stage on 'Published'.
+2. Under 'Management API', click 'Yes, Initialize defaults'
+3. Click 'Edit Permissions' and enable: 'Update' and 'Delete' permissions for 'models', 'enumerations', 'fields', 'components' and 'sources'
+  - Update existing models
+  - Delete existing models
+  - Update existing fields
+  - Delete existing fields
+  - Update existing enumerations
+  - Delete existing enumerations
+  - Update existing components
+  - Delete existing components
+  - Update remote sources
+  - Delete remote sources
+
+```
+GC_HYGRAPH_WRITE_ACCESS_ENDPOINT="https://...hygraph.com/v2/..."
+GC_HYGRAPH_WRITE_ACCESS_TOKEN="AccessTokenFromHygraph"
+yarn graphcommerce hygraph-migrate
+```
+
 #### `legacyProductRoute: Boolean`
 
 On older versions of GraphCommerce products would use a product type specific route.
@@ -165,6 +227,12 @@ Limit the static generation of SSG when building
 
 To enable next.js' preview mode, configure the secret you'd like to use.
 
+#### `productFiltersLayout: [ProductFiltersLayout](#ProductFiltersLayout) (default: DEFAULT)`
+
+Layout how the filters are rendered.
+DEFAULT: Will be rendered as horzontal chips on desktop and mobile
+SIDEBAR: Will be rendered as a sidebar on desktop and horizontal chips on mobile
+
 #### `productFiltersPro: Boolean`
 
 Product filters with better UI for mobile and desktop.

package/framework/favicon.md

@@ -35,6 +35,20 @@ to simplify the process of making correct favicons.
  <figcaption>Favicon sketch template</figcaption>
 </figure>
 
+## Open Graph preview image
+
+The Open Graph image is automaticly set for product and category pages if
+possible. For product pages the first gallary image will be used and for
+category pages the image uploaded to the `Category Image` attribute. If these
+images are not availale or on any of the other other pages a preview image will
+not be added unless added as `ogImage` prop to the `PageMeta`, `, CategoryMeta`
+or `ProductPageMeta` components.
+
+It is possible to enable a fallback image per route by setting the
+`ogImageUseFallback` prop to `true` on either the `PageMeta`, `, CategoryMeta`
+or `ProductPageMeta` components. The image used as fallback can be found at
+`/public/open-graph-image.jpg`
+
 ## Next steps
 
 - Lear more about [Static file serving](../framework/static-file-serving.md)

package/framework/plugins-react.md

@@ -152,7 +152,7 @@ work for other things such as:
 - Googletagmanager
 - Googleanalytics
 - Google recaptcha
-- Compare functionality?
+- Compare functionality
 - Wishlist functionality?
 - Abstraction between GraphCommerce and Backends? (Magento, BigCommerce,
   CommerceTools, etc.)

package/getting-started/graphcms-component.md

@@ -155,7 +155,7 @@ fragment Banner on Banner {
 - In /components/GraphCMS/RowRenderer.graphql, add the fragment:
 
 ```graphql
-fragment RowRenderer on Page {
+fragment RowRenderer on Page @inject(into: ["HygraphPage"]) {
   content {
     __typename
     ... on Node {

package/magento/readme.md

@@ -50,6 +50,20 @@ For Magento Open Source:
 For Adobe Commerce:
 `Stores -> Attributes -> Customer Address -> street -> Lines Count`
 
+### Remove URL suffixes from products and categorories (optional)
+
+GraphCommerce does not support URL suffixes, because Next.js can not handle urls
+ending in `.html`. When migrating from an existing shop, GraphCommerce will
+automatically redirect to the suffix-less URL. However, GraphCommerce will need
+to do an additional query to Magento to find the route.
+
+If you are starting out from a new project, we recommend to remove the URL
+suffixes from products and categories.
+
+Remove the URL suffixes from products and categories. (default is `.html`)
+`Stores -> Configuration -> Catalog -> Catalog -> Search Engine Optimization -> Product URL Suffix`
+`Stores -> Configuration -> Catalog -> Catalog -> Search Engine Optimization -> Category URL Suffix`
+
 ## Optional packages
 
 - [Store Pickup / MSI](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-cart-pickup)

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "6.2.0-canary.7",
+  "version": "6.2.0-canary.71",
   "sideEffects": true,
   "devDependencies": {
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.7"
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.71"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/roadmap.md

@@ -15,14 +15,27 @@ The following overview contains the status of items on the GraphCommerce roadmap
 
 ## In progress
 
-- [ ] Redesigned layered navigation for mobile and desktop
-- [ ] GA4 datalayer implementation
-- [ ] Paypal Express payment service (Multisafepay, Braintree, Mollie already
-      implemented)
-- [ ] Adyen payment service
+- [ ] Better authorization handling
+- [ ] Hygraph schema migrations
+- [ ] Edge runtime for GraphQL Mesh and Streaming SSR rendering
+- [ ] Global store messages
 
 ## Just released
 
+[See all releases](https://github.com/graphcommerce-org/graphcommerce/releases?q=prerelease%3Afalse+&expanded=true)
+
+- [x] [Algolia Search (beta)](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/algolia-search)
+- [x] [Dynamic Rows (beta)](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/hygraph-dynamic-rows)
+- [x] [Product compare](https://github.com/graphcommerce-org/graphcommerce/blob/main/packages/magento-compare/Config.graphqls)
+- [x] Google Tagmanager 4 datalayer implementation
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/googleanalytics)
+- [x] Paypal Express payment service
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-payment-paypal)
+- [x] Adyen payment service
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-payment-adyen)
+- [x] Postcode check integration
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/address-fields-nl)
+- [x] Redesigned layered navigation for mobile and desktop
 - [x] Crosssells overlay after adding a product to cart
 - [x] Bundle product
       [example ↗](https://graphcommerce.vercel.app/nl/p/giftcard-bundle-gc-570)
@@ -40,15 +53,16 @@ The following overview contains the status of items on the GraphCommerce roadmap
 
 ## Planned
 
-- [ ] Store locator
-- [ ] Adyen payment service
-- [ ] Buckaroo payment service
-- [ ] Fetch Magento image sizes (probe-image-size)
-- [ ] Postcode check integration
-- [ ] Windows support
+- [ ] Redesigned cart
+- [ ] Product thumbnail carousel
+- [ ] React Server Components integration
 
 ## Future
 
+- [ ] Fetch Magento image sizes (probe-image-size)
+- [ ] Windows support
+- [ ] Store locator
+- [ ] Buckaroo payment service
 - [ ] `magento` example without Hygraph
 - [ ] PageBuilder support
 

package/upgrading/graphcommerce-6-1-to-6-2.md

@@ -0,0 +1,89 @@
+# Upgrading from GraphCommerce 6.1 to 6.2
+
+Upgrading from GraphCommerce 6.1 to 6.2 is minor update. Depending on the
+amounts of customisations you've made, there are some manual steps. Please
+follow the regular [upgrade steps first](./readme.md).
+
+1. [Add `fetchPolicy: cache-first` to LayoutDocument](#add-cache-first-fetchpolicy-to-layoutdocument)
+2. [Translation file updates](#translation-file-updates)
+
+## Add `fetchPolicy: cache-first` to LayoutDocument queries
+
+🟠 Only required if you've added custom pages
+
+All occurences of LayoutDocument should get a `fetchPolicy: 'cache-first'`
+option.
+
+```tsx
+// Find all occurences of
+staticClient.query({ query: LayoutDocument })
+
+// Replace with
+staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+```
+
+## Use thew new `hygraphPageContent` function instead of DefaultPageQuery
+
+🟠 Only required if you've added custom pages
+
+The `DefaultPageDocument` is removed in favor of the new `hygraphPageContent`
+query. This function handles caching better and allows for (currently in beta)
+DynamicRows feature.
+
+```tsx
+// DefaultPageDocument
+const page = staticClient.query({
+  query: DefaultPageDocument,
+  variables: { url: `blog/${urlKey}` },
+})
+
+// Becomes hygraphPageContent
+const page = hygraphPageContent(staticClient, `blog/${urlKey}`)
+```
+
+## Translation file updates
+
+🟠 Only required if you've added custom translations
+
+All locales files now require a `msgid` comment. All translations need to have a
+`#. js-lingui-explicit-id` comment added. This could be done with a
+find-and-replace:
+
+Find (including the empty line)
+
+```
+
+msgid
+```
+
+Replace with (including the empty line)
+
+```
+
+#. js-lingui-explicit-id
+msgid
+```
+
+To validate your translations run `yarn lingui` to extract everything.
+
+## All @graphql-mesh/\* should be set to latest.
+
+🟠 Only required if you've added custom @graphql-mesh/\* packages
+
+All @graphql-mesh packages are using a 0.x.x versioning schema. This means that
+each minor change is considered a major change by yarn. This causes lots of
+issues with version mismatches. Since `@graphql-mesh` isn't making any major
+breaking before releasing 1.x this is the safest course of action for now. Once
+1.x is released we'll switch to "^1.0.0" as a version constraint.
+
+In your package.json
+
+```json
+// Replace
+    "@graphql-mesh/json-schema": "^0.37.6",
+    "@graphql-mesh/transform-filter-schema": "^0.15.8",
+
+// With
+    "@graphql-mesh/json-schema": "latest",
+    "@graphql-mesh/transform-filter-schema": "latest",
+```

package/upgrading/readme.md

@@ -107,6 +107,7 @@ find . -type f -name '*.rej' -delete
 After resolving the diff issues, manually process upgrade instructions:
 
 - [Upgrading to GraphCommerce 5 to 6](../upgrading/graphcommerce-5-to-6.md)
+- [Upgrading to GraphCommerce 6.1 to 6.2](../upgrading/graphcommerce-6-1-to-6-2.md)
 
 Run and validate your local environment: