Skip to content

GraphCommerce 9.0.0

Latest
Latest
Compare
Choose a tag to compare
@paales paales released this 19 Dec 08:54
· 64 commits to canary since this release
9.0.0
82d6af1
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Patch releases: 9.0.1, 9.0.2, 9.0.3

🚀 New Features

  • Added <CompanyFields/> with <CompanyName /> and <CompanyVAT /> to shipping and billing forms. (@Giovanni-Schroevers)
    magento-cart magento-cart-billing-address magento-cart-shipping-address magento-customer next-config magento-graphcms

  • Add permissions configuration to disable functionalities.

    • Added new permissions configuration for GraphCommerce
    • Added permissions.cart: ENABLED | CUSTOMER_ONLY | DISABLED
    • Added permissions.checkout: ENABLED | CUSTOMER_ONLY | DISABLED
    • Added permissions.customerAccount: ENABLED | DISABLE_REGISTRATION | DISABLE (@Giovanni-Schroevers)

  • INP improvements: Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders. (@FrankHarland)
    magento-cart magento-cart-payment-method magento-cart-shipping-address magento-cart-shipping-method magento-compare magento-customer magento-newsletter magento-payment-adyen magento-payment-multisafepay mollie-magento-payment

  • Added the ability to edit cart items with full support for all product types and custom options (@Jessevdpoel)
    magento-cart-items

  • Add a 'Save in address book' checkbox to the shipping address form. (@Giovanni-Schroevers)
    magento-cart-shipping-address magento-graphcms

  • Add the customerNote field to the shipping and customer address forms. Added configuration customerAddressNoteEnable to enable or disable the field. (@Giovanni-Schroevers)
    magento-cart-shipping-address next-config

  • Added support for real <Breadcrumbs/> on the frontend. (@Jessevdpoel)
    magento-category magento-product next-ui

  • Show category siblings if a category has no children, will be shown in location where children are located. (@Jessevdpoel)
    magento-category

  • Added option to change sort order (ASC / DESC) for sort options (Name, price, position etc) on catalog and search pages. (@FrankHarland)
    magento-category magento-product next-config magento-graphcms

  • Magento 2.4.7: Implemented cancelOrder mutation and added a cancel order overlay to the account section. (@Giovanni-Schroevers)
    magento-customer magento-store magento-graphcms

  • Magento 2.4.7: Imlemented deleteCustomer mutation to the account section. Disabled by default and can be enabled through the config. (@Giovanni-Schroevers)
    magento-customer next-ui next-config magento-graphcms

  • Add reorderItems mutation, add reorder button to order detail page. (@Giovanni-Schroevers)
    magento-customer

  • Magento 2.4.7: Implement the contactUs mutation, add contact us overlay. (@Giovanni-Schroevers)
    magento-customer magento-graphcms

  • Added support X-Magento-Cache-Id to allow Varnish to cache requests that are made in the browser while users are logged in. For example the products query can now be cached for logged in users. Functionality can be disabled by setting customerXMagentoCacheIdDisable: true in your configuration. (@paales)
    magento-customer

  • Magento 2.4.7: Add guestOrder functionality. (@Giovanni-Schroevers)
    magento-customer graphql next-ui magento-graphcms

  • Magento 2.4.7: implement confirmEmail mutation (@Giovanni-Schroevers)
    magento-customer magento-store magento-graphcms

  • Magento 2.4.7: Created a GraphQL query field for products: custom_attribute(attribute_code: "attribute_code") to retrieve attribute option value labels. This is different from the custom_attributes endpoint (note the plural) and allows for retrieving singular attribute values, like brand or any other select or multiselect attribute. (@paales)
    magento-graphql

  • Magento 2.4.7: Added a magentoVersion configuration value to be able to differentiate features based on the Magento version. GraphCommerce will automatically load any schema's that are defined in later version of Magento, allowing GraphCommerce to be forward compatible. See schema-246 and schema-247 directories for the changes made to the schema. This is only for compatibility and doesn't make the functionality work. (@paales)
    magento-graphql

  • Created a new @graphcommerce/magento-graphql-rest package to integrate with Magento's REST API. By default allows you to retrieve the customer with m2rest_GetV1CustomersMe and only provides the group_id additionally on the customer. (@Renzovh)
    magento-graphql-rest

  • Add option to show an extended version of the pagination component. Configurable via the productListPaginationVariant key in your graphcommerce.config.js. COMPACT means: < Page X of Y > and EXTENDED means: < 1 2 ... [5] ... 10 11 > (@FrankHarland)
    magento-product next-ui next-config docs

  • Magento 2.4.7: Use custom_attributesV2 for product specs. (@Giovanni-Schroevers)
    magento-product magento-graphcms

  • Added functionality to constrain the container sizing of the frontend. Added a new configuration containerSizingShell and containerSizingContent configuration options. Actual sizing can be configured in the theme.ts. (@StefanAngenent)
    magento-product magento-graphcms

  • Completely new SearchOverlay package this is compatible with Magento's default search as well as any other implementation like Algolia and Adobe Sensei. (@paales)
    magento-search magento-search-overlay

  • Algolia: Enables Algolia category search in GraphQL Mesh. Integrated Algolia category search into the categories type within the Mesh. This will only be used on search pages. (@Renzovh)
    algolia-categories

  • Algolia: Integrated algolia personalisation and algolia analytics into GraphQL Mesh. Built user profiles and gives user personalised results. Keep track of the user data and view in algolia analytics dashboard. (@Renzovh)
    algolia-personalization

  • Algolia: Added search suggestions (@Renzovh)
    algolia-products

  • Algolia: Magento 2 implemented as a GraphQL Mesh resolver: Allows full integration without modying any frontend components. (@Renzovh)
    algolia-products

  • Algolia: Integrated product queries into graphql-mesh. Provides fast and accurate searches, that can be personalised via magento-algolia and its algolia dashboard (@Renzovh)
    algolia-products

  • Algolia: Integrated algolia recommend queries into graphql mesh. Provide accurate upsells and related products on pdp pages (@Renzovh)
    algolia-recommend

  • Update manifest for app store submission (@ErwinOtten)
    google-playstore

  • Added Draft Mode support. When enabled it will be shown. (@paales)
    graphcms-ui graphql hygraph-dynamic-rows-ui

  • Created a new @graphql-mesh plugin to forward headers from backends as forwardedHeaders in extensions. (@paales)
    graphql-mesh

  • Added <MediaQuery/> Component: Render (and hydrate) a Component based on a media query given.

    <MediaQuery query={(theme) => theme.breakpoints.up('md')}>
  <MyExpensiveDesktopComponent>
    Only visisble on desktop
  </MyExpensiveDesktopComponent>
</MediaQuery>

    When to use, replacement for:

    1. useMediaQuery: When you are now using useMediaQuery to conditionally render content for mobile or desktop. a. Is very slow as it has to wait for the JS to initialize on pageload. b. Can cause CLS problems if the useMediaQuery is used to render elements in the viewport. c. Can cause LCP issues if useMediaQuery is used to render the LCP element. d. Causes TBT problems as a component always needs to be rerendered. (And bad TBT can cause INP problems) e. HTML isn't present in the DOM, which can cause SEO issues.
    2. CSS Media query: When you are using CSS to show or hide content based on media queries. a. Causes TBT problems as both code paths need to be rendered. (And bad TBT can cause INP problems)

    It wraps the component in a div that has 'display: contents;' when shown and 'display: none;' when hidden so it should not interfere with other styling. It conditionally hydrates the component if the query matches. If it doesn't match, it will NOT hydrate the component (and thus not execute the JS). (@bramvanderholst)
    next-ui

  • Created a cssFlags functionality which allows showing content based on a value in the local storage. This allows hiding/showing small things (is logged in / light or darkmode) (@Giovanni-Schroevers)
    next-ui

  • Big INP improvments: Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders. (@FrankHarland)
    react-hook-form

  • Moved to serwist for service workers. (@paales)
    service-worker docs

  • All fragments are now @injectable by default and the @injectable directive isn't required anymore. Always accept @inject directives. (@paales)
    graphql-codegen-near-operation-file

  • Migrated to next.config.ts (@paales)
    next-config

  • Big improvements to the plugin system: Typescript validated, deeper resolution, new configuration object, replace plugins, and more ifConfig options.

    1. Plugins now use TypeScript's "moduleSuffixes": [".interceptor", ""] functionality which means that plugins now correctly resolve via TypeScript. So if you go to reference in VSCode (or any other editor), you go to the interceptor directly and see which plugins are applied there. This also means that plugins are automatically checked during build (and will fail if there are errors).

    2. The exported type of an intercepted component now has the types of all plugins applied. This means that plugins can modify the props of components (and is still validated with TypeScript). To make this work a plugin must always forward props to the <Prev> to ensure that values are correctly passed on.

    3. Plugins will now always be applied to deepest resolved path. This means that a plugin automatically applies to internal usages as well. This thus means that plugins do not need to be written with an internal path, but can keep the parent path. Istead of writing @graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab you can now write @graphcommerce/magento-cart-items.

    4. A new configuration object for plugins is created instead of separate exports (the legacy format is still supported though):

      export const config: PluginConfig = {
  type: 'component'
  module: '@graphcommerce/magento-product',
  ifConfig: 'demoMode',
}

      This also means that the name of the export dictates the name of the component/function the plugin is applied.

    5. We now support replace plugins (type: 'replace'), which allow you to replace the original component/function/const completely (and type checked of course).

      import { ProductPageNameProps } from '@graphcommerce/magento-product'
import { PluginConfig } from '@graphcommerce/next-config'

export const config: PluginConfig = {
  type: 'replace',
  module: '@graphcommerce/magento-product',
}

export function ProductPageName(props: ProductPageNameProps) {
  const { product } = props
  return <div>REPLACEMENT {product.url_key}</div>
}

      Plugin files can now have multiple exports for the same configuration. So next to the ProductPageName you can also have a ProductPagePrice export for example in the same file.

    6. We now support ifConfig tuple which allows you to apply a plugin only if a certain configuration is set.

      export const config: PluginConfig = {
  type: 'replace',
  module: '@graphcommerce/magento-product',
  ifConfig: ['theme', 'my-theme'],
}

      This allows you to support multiple builds with different plugins applied. For example one build with GC_THEME=my-theme and another with GC_THEME=my-other-theme. (@paales)

  • Fully replaced the sitemap and robots.txt generation. We previously relied on next-sitemap to generate the sitemap based on static generated pages. However with bigger shops the SSG woudn't be complete. Full support for multi domain setups. (@bramvanderholst)
    magento-graphcms docs

  • Play store publishing to be able to submit to the playstore. (@ErwinOtten)
    magento-graphcms

✨ Small Improvements

  • Created a new <EmailElement/> component to make re-use easier. (@Giovanni-Schroevers)
    magento-cart magento-cart-email magento-customer ecommerce-ui

  • Created a new <TelephoneElement /> component to make re-use easier. (@Giovanni-Schroevers)
    magento-cart-billing-address magento-cart-shipping-address magento-customer ecommerce-ui

  • Replace deprecated updateCustomer mutations with updateCustomerV2. (@Giovanni-Schroevers)
    magento-customer magento-newsletter

  • Magento 2.4.7: To make the custom_attribute field more valueable, we've added an attribute-field to the AttributeValueInterface to be able to retrieve attribute metadata from the value of an attribute. To be able
    magento-graphql

  • Created a new `
    magento-newsletter

  • Allow Lingui to use linguiLocale with country identifiers like en-us, it would always load en in this case. Introduced a new useLocale hook to use the correct locale string to use in Intl methods. (@paales)
    magento-product magento-product-configurable lingui-next next-ui next-config docs

  • When generating the mesh the configuration is passed through @graphcommerce/graphql-mesh/meshConfig allowing plugins to modify the mesh configuration without having to change the .meshrc.yaml itself. (@Renzovh)
    cli graphql-mesh

  • Added separate sitemap for Hygraph pages (@bramvanderholst)
    hygraph-ui magento-graphcms

  • Added Intl components, deprecated useNumberFormat and useDateTimeFormatter, and replaced usage sites. New components and hooks:

    • <DisplayNames /> and useIntlDisplayNames
    • <DateTimeFormat />, <DateFormat/>, <TimeFormat /> and useIntlDateTimeFormat
    • <ListFormat /> and useIntlListFormat
    • <CurrencyFormat />, <NumberFormat />, <UnitFormat />, <PercentFormat/> and useIntlNumberFormat (@paales)

  • Add props to <DarkLightModeThemeProvider /> to disable dark/light mode or to change the default ssr mode. Save user chosen mode in localStorage. (@Giovanni-Schroevers)
    next-ui

  • Added a new <OverlayHeader /> component to be used in combination with the <Overlay /> component. (@JoshuaS98)
    next-ui

  • The <LazyHydrate /> component now accepts a height prop that allows deferring of rendering of the child component when initially rendered on the client. This improves performance when used. (@paales)
    next-ui

  • Added <RelativeTimeFormat/> and <RelativeToTimeFormat/> and useIntlRelativeTimeFormat to display relative dates in all locales. (@paales)
    next-ui

  • Added new plugin insertion points: <DocumentHeadStart/>, <DocumentHeadEnd/>, <DocumentBodyEnd/>, <DocumentBodyStart/> for the _document.app to allow creating plugins for those locations to insert scripts etc. (@paales)
    next-ui

  • Added a functionality to copy directories from packages to the project and keep them managed by the package. This allows for injecting additional routes etc. (@paales)
    next-config

  • Added PRIVATE_ADDITIONAL_DEPENDENCIES env variable support to enable packages that we do not want to have in the examples directory but we do want to be able to demo. (@paales)
    next-config

  • Added PRIVATE_PACKAGE_NAMESPACES env variable to have additional namespaces to be considered to be a graphcommerce package. (@paales)
    next-config

  • Created dedicated sitemap route for categories so it isn't dependend on static generation. (@bramvanderholst)
    next-config magento-graphcms

  • Created dedicated sitemap route for products so it isn't dependend on static generation. (@bramvanderholst)
    next-config magento-graphcms

🐛 Fixes

Packages

Contributors

hnsr, paales, and 15 other contributors
Assets 2
Loading