FastStore Release Notes - August 2021

Full Changelog

Gather around, people! FastStore Release Notes are back for the 2nd edition. 🎊

Before we check out what our first-class team has prepared this past month (I really do mean it), Let's take a moment to praise you. Yes, you. Bold enough to be part of this transformation with us. Thank you!

Now, shall we started it? 🚀

Table of contents:

• Features 🚀
• Bug Fixes 🐛
• Breaking Changes 💥
• Improvements ✔️
• Documentation 📑

Features 🚀

• CHANGELOG.MD #790: Keep the changelog up-to-date does not need to be a roadblock in your routine. CHANGELOG.md is automatically generated from your commit message. For a better way to create an explicit commit history, the commit merge messages need to follow the conventional commits.

  For example, if your change is about a fix, create a commit with the following message:

  fix: describe what you are fixing here

  The PR title will become the merge commit message and will be used to generate the changelog.
  

• Product page incremental builds #793: Sourcing data does not need to be painful and brings problems when using Gatsby's incremental builds. Using gatsby-graphql-toolkit for sourcing data and using the declarative Gatsby File System API for declaratively create product pages can solve those issues.

  Also, If you want to refresh the products, run the following command to clear the cache with Gatsby's cache:

  yarn clean
  

  Do not hesitate to check out the Gatsby GraphQL Source Toolkit for more information.

• Product view - gatsby-theme-store ##803: We are one step closer to make gatsby-theme-store in gatsby-plugin-store since now it removes product view from gatsby-theme-store and create basic build blocks to drop shadow on product pages.

  Also, to understand better about shadowing, see the shadowing documentation.

Bug Fixes 🐛

• Using origin vtex #797: No data trust issues around here, folks! To source product changes with the right values, now we use productOriginVtex option in the search query

• Page size - gatsby-source-vtex #799: Weep no more for 404 errors while fetching products: we fix it! Also, gatsby-source-vtexadds an option to fetch fewer products for testing purposes.

• Zipcode persistence throughout the checkout flow#802: Setting the zip code on the order form requires creating a new address for the user. However, the isDIsposable field should be set to true for this use case. Otherwise the behavior is not well defined.

• Missing GraphQL error messages#804: An error like the one below does not say much.

That's why we fixed GraphQL error messages, so now you can see something like the following:

• Fix undefined host in canonical tags of product pages#814: to solve the problem of product pages having invalid canonicals, we generate relative canonical tags with /<pathname> during SSR and hydrate it with https://<host>/<pathname> once the React hydration kicks in.

• Fix proxy pass when toPath has port numbers on it#830: To avoid to broke a new test, this Nginx plugin is replacing port number and not only :splat or :* values.

-           "https://mylogs-proxy.endpoint.com:8088/logs$is_args$args",
+           "https://mylogs-proxy.endpoint.com$1/logs$is_args$args",

• Prevent building twice#872: This fix improves build time on the FastStore monorepo.

Breaking Changes 💥

• Add next/prev links in search page's infinite scroll. #811: Our Search page's template uses infinite scroll, which helps improve the UX. However, it can cause problems for machines. Now the template has a load more button element, as shown in the picture below:

To make search engines understand pagination and keep the page's relevance, we replace the load more button with an anchor tag <a/> linking to the next page in the infinite scroll. Also, add another anchor tag pointing to previous pages. As a final result, you have something similar to the next example:

Improvements ✔️

• Improve atoms pattern consistency #819: We are always improving Store UI and this time, We have added ComponentArgTypes type to improve the typescript check when typing argtypes from components:
  

Any other improvements in atoms pattern consistency? Yes, let's see the following:

-Input and TextArea atoms state to variant.
-Deprecated Checkbox export name to UICheckbox, also add new Checkbox atom.
-Molecules and Atoms argtypes to improve typescript errors.
-Checkbox export Prop name to CheckboxProps.

• Improve CMS GraphQL types generation [#865](#865. In other words, it improves GraphQL type generation for the cms plugin.

This is an architectural-only change. No feature on the website should be changed. For this, make sure all content on the website stays the same from master.

For example, we have the following contentType written in Json Schema:

{
  homePage: {
    blocks: {
      banner: {
        type: 'object',
        properties: {
          imageUrl: {
            type: "string",
          }
        }
      }
    },
    extraBlocks: {
      seo: {
        tags: {
          type: 'object'
          properties: {
            title: {
              type: 'string'
            },
            description: {
              type: 'string'
            }
          }
        }
      }
    }
  }
}

Which will generate the following type on the gatsby's graphql layer:

type Block = {
  name: string
  props: any
}

type CmsHomePage = {
  sections: Block[]
  seo: {
    tags: {
       title: string
       description: string
    }
  }
}

And then query this data on React components by writting the following graphql query:

query HomePageQuery {
  cmsHomePage {
    sections: {
      name
      props
    }
    seo {
      tags {
        title
        description
      }
    }
  }
}

Documentation 📑

• How to implement the Search Banner Feature #812
• Update - CONTRIBUTING.md #816

Now that you are up-to-date with the release notes, I hope you feel energized to keep up the good work! Make sure to star the repo, so you keep your eyes on our next Release Notes.
See you next month 👋