Skip to main content

August, 2021

· 5 min read

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! You who is bold enough to be part of this transformation with us. Thank you!

Now, shall we started it? 🚀

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. ie-generated-changelog

  • Product page incremental builds #793: Sourcing data does not need to be painful and bring 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 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.

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

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

before-error

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

  • 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 broke 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 can cause problems for machines. Now the template has a load more button element as shown in the picture below:

load-more-button

To make search engines understand pagination and keep the page's relevance we replace the load more button by 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:

final-result

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: argtypes

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, 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 writing the following graphql query:

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

Documentation 📑​

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 👋

ON THIS PAGE