DEV Community: Jordan Eisenburger

Refetch active Apollo queries in PWA Studio on user action

Jordan Eisenburger — Thu, 11 Feb 2021 13:39:33 +0000

In some use cases you need to refetch your GraphQL queries on a user action. To do this you need to tell your <query> component to refetch the data. Triggering this can be hard to do from a different part of your code base.

As an example:
I have a B2B webshop. The customer is on the product page and can see regular/general prices. But when he logs in the product info/prices need to update to reflect his special info/prices.

There is no easy way to do this besides either doing a page reload that will force reload the whole page and queries or use Apollo's client.resetStore() but this will reset the whole store and refetch all active queries.

To do this more surgical we can use something like this snippet.

// refetchQueriesByName.js

const findQueries = (manager, names) => {
    const matching = [];
    manager.queries.forEach(q => {
        if (q.observableQuery && names.includes(q.observableQuery.queryName)) {
            matching.push(q);
        }
    });
    return matching;
};

export const refetchQueriesByName = (names, client) => {
    return Promise.all(
        findQueries(client.queryManager, names).map(q =>
            q.observableQuery.refetch(),
        ),
    );
};

Implementation

// packages/peregrine/lib/talons/SignIn/useSignIn.js

import { refetchQueriesByName } from 'PATH_TO/refetchQueriesByName';

    const handleSubmit = useCallback(
        async ({ email, password }) => {
            setIsSigningIn(true);
            try {

                ...

                // Place somewhere after 'const destinationCartId = await retrieveCartId();'


                // These names are the actual names you declared in your graphql files
                await refetchQueriesByName(
                    [
                        'productDetail',
                        'relatedProducts',
                    ],
                    apolloClient
                ); 

                ...

})

Enhanced eCommerce in PWA Studio

Jordan Eisenburger — Mon, 18 Jan 2021 21:24:20 +0000

This blog post is mainly aimed at Magento agencies building a mono-repo around PWA Studio and having a need to make an easy yet extensible way to add Enhanced eCommerce.

Note that if you don't have a mono repo setup like PWA Studio you won't need the React Context

Overview:

Adding Google Tag Manager
Creating a React Context
Setting up a basic data layer file
Implementing the data layer methods

Adding Google Tag Manager

Add the code below, make sure to add your own GTM code.
I'd advice you to make the GTM code variable so you can connect to multiple containers based on your build/pipeline etc.

//template.html (the inside your storefront)
<script>
    dataLayer = [];
</script>
<!-- Google Tag Manager -->
<script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
<!-- End Google Tag Manager -->

Creating a React Context

Since we are working inside a mono-repo we want to be able to customise what data we send to the data layer per customer that's build upon the mono-repo.

So firstly locate the position where you'd normally would create context's inside your project.

Add the following files:
context/dataLayer/index.js
context/dataLayer/dataLayer.js
context/dataLayer/data.js

//context/dataLayer/index.js
export { DataLayerProvider, useDataLayerConfig } from './dataLayer';

//context/dataLayer/dataLayer.js

import React, { useContext } from 'react';
import { node, object } from 'prop-types';
import { merge } from 'lodash-es';
import { dataLayerConfig } from './data';

export const DataLayer = React.createContext(null);

const defaultDataLayer = dataLayerConfig;

export const DataLayerProvider = ({ children, additionalDataLayer = {} }) => {
    return (
        <DataLayer.Provider
            value={merge({}, defaultDataLayer, additionalDataLayer)}
        >
            {children}
        </DataLayer.Provider>
    );
};

export const useDataLayerConfig = () => useContext(DataLayer);

DataLayerProvider.propTypes = {
    children: node.isRequired,
    query: object,
    additionalDataLayer: object,
};

//context/dataLayer/data.js
export const dataLayerConfig = {
    reset: {
        product: () => ({
            ecommerce: undefined,
            items: undefined,
        }),
        category: () => ({
            ecommerce: undefined,
            items: undefined,
        }),
    },
    product: data => ({
        event: 'virtualPageview',
        pagePath: window.location.href,
        pageTitle: `${data.name} - ${STORE_NAME}`,
        pageType: 'product',
        items: [
            {
                id: data.sku,
            },
        ],
        ecommerce: {
            detail: {
                products: [
                    {
                        name: data.name,
                        id: data.sku,
                    },
                ],
            },
        },
    }),
    cms: data => ({
        event: 'virtualPageview',
        pagePath: window.location.href,
        pageTitle: `${data.title} - ${STORE_NAME}`,
        pageType: 'cms',
    }),
    category: data => ({
        event: 'virtualPageview',
        pagePath: window.location.href,
        pageTitle: `${data.category.name} - ${STORE_NAME}`,
        pageType: 'category',
    }),
    removeFromCart: data => ({
        event: 'removeFromCart',
        ecommerce: {
            remove: {
                products: [
                    {
                        name: data.product.name,
                        id: data.product.sku,
                        quantity: data.quantity,
                    },
                ],
            },
        },
    }),
    addToCart: data => ({
        event: 'addToCart',
        items: [
            {
                id: data.sku,
            },
        ],
        ecommerce: {
            add: {
                products: [
                    {
                        name: data.name,
                        id: data.sku,
                        quantity: data.quantity,
                    },
                ],
            },
        },
    }),
};

Note that this a really small example file, you should add more methods like submitOrder, checkoutSuccess, checkout, notFound etc etc

Make sure to import the Context into the storefront and add it to the provider tree.

//index.js (the on in your storefront)
<AppContextProvider>
  <DataLayerProvider>
    ...
  </DataLayerProvider>
</AppContextProvider>

Implementing the data layer methods

So we've set up the basic of this solution

How to setup Sirv for PWA Studio

Jordan Eisenburger — Wed, 12 Aug 2020 15:27:27 +0000

This blog will show you the steps to setup Sirv with a PWA Studio 7.0.0 environment. This post expects you to already have an Sirv account ready.

Step 1: Configuring Magento

Go to your magento backend and navigate to "Store -> General -> web"
Change both "Base URL for User Media Files" and "Secure Base URL for User Media Files" to use your Sirv media url. For example: https://static.your-webshops.com/media/

Step 2: Change your `.env` file

Go to your .env file located in the root of your pwa studio project
Change IMAGE_OPTIMIZING_ORIGIN to IMAGE_OPTIMIZING_ORIGIN=backend

This will tell PWA Studio that we are going to use another image optimisation tool instead of the onboard image optimisation

Step 3: Prepare the makeUrl file

Open @magento/venia-ui/lib/util/makeUrl.js
We need to export useBackendForImgs change it so we get the following: export const useBackendForImgs = imageOptimizingOrigin === 'backend';
Find the following code block:

    const params = new URLSearchParams(baseURL.search);
    params.set('auto', 'webp'); // Use the webp format if available

    const imageFileType = getFileType(baseURL);
    if (imageFileType === 'png') {
        params.set('format', 'png'); // use png if webp is not available
    } else {
        params.set('format', 'pjpg'); // Use progressive JPG if webp is not available
    }

And change it like shown below:

    const params = new URLSearchParams(baseURL.search);

    if (!useBackendForImgs) {
        params.set('auto', 'webp'); // Use the webp format if available

        const imageFileType = getFileType(baseURL);
        if (imageFileType === 'png') {
            params.set('format', 'png'); // use png if webp is not available
        } else {
            params.set('format', 'pjpg'); // Use progressive JPG if webp is not available
        }
    }

Step 4: Change the url params to be compliant with Sirv's format

Open @magento/venia-ui/lib/drivers/index.js
Change export { default as resourceUrl } from '../util/makeUrl'; to export { default as resourceUrl, useBackendForImgs } from '../util/makeUrl';
Open @magento/venia-ui/lib/util/images.js
on line 1 import useBackendForImgs like so: import { resourceUrl, useBackendForImgs } from '@magento/venia-drivers';
Replace the generateUrl function with the code below:

export const generateUrl = (imageURL, mediaBase) => (width, height) => {
    if (useBackendForImgs) {
        const regex = /cache\/.+?(?=\/)\//;
        const imageURLWithoutCacheKey = imageURL.replace(regex, '');
        return resourceUrl(imageURLWithoutCacheKey, {
            type: mediaBase,
            'scale.width': width,
            'scale.height': height,
        });
    }

    return resourceUrl(imageURL, {
        type: mediaBase,
        width,
        height,
        fit: 'cover',
    });
};

NOTE: if the imageUrl doesn't has the cache key included you can remove the regex part. Also the regex is a dirty fix because the urls should come back from the API without the cache key. We only care about originals.

That's it you've done it!

Well not quite yet :( if you open up chrome dev tools and open the 'Application -> Cache Storage' you should see (must have SW enabled) an entry called 'catalog - https://yourwebshop.com' this holds all catalog images.

The Response-Type for images will probably say opaque this will result in an extremely large sw storage size most likely it shows an error in the chrome console saying something like "the quota is exceeded". When the Response-Type is opaque it will reserve 7MB per image.

To fix this problem we need to make the following changes:

Add crossorigin="anonymous" to all custom img elements like so: <img crossorigin="anonymous" src="blabla" />
Open src/ServiceWorker/Utilities/imageCacheHandler.js and change line 98 from mode: 'no-cors' to mode: 'anonymous'
Open @magento/venia-ui/lib/components/Image/image.js
Add the prop crossOrigin="anonymous" to the <SimpleImage and <ResourceImage component.

Congratulations! You now have Sirv working with PWA studio

Feasibility report for implementing PWA Studio v7.0.0

Jordan Eisenburger — Wed, 05 Aug 2020 14:52:00 +0000

Before you start working with Studio it's important to know if you are a one-time implementer or an agency hoping to do multiple projects with Studio. As far as I see it there are two ways of implementing Studio:

You use the scaffolding command @magento/create-pwa
You create a mono-repo that depends on the packages from Studio that serves as your core product

A merchant with in-house developers

When you are a merchant and want to make the transition to PWA Studio and you don’t have a partner agency. It makes a lot of sense for your developers (in-house or freelance) to use the scaffolding tool since there’s probably only one webshop going to be built upon the system this route gives you a flying start into your project.

Feature support:

Before start development examine your current webshops and create a list of features that you actually use (not the once you have but never use) this will keep the PWA lightweight, reduce development time and thus keep costs lower.

Development team:

Studio is fully API driven which means that besides a front-end developer with Javascript/react experience you also need a back-end developer preferably with GraphQL experience to create new endpoints that can interpret by the PWA

3rth party module support:

If your curated list of features include a lot of 3rth party modules then most likely you are going to have to put development time into adding API support for these modules. But before you do so check their websites, with PWA/headless becoming more of a household name 3rth party extension developers slowly start adding API support.

Note that at this point in time there are no 3rth party extensions that I’m aware of that deliver both API Support and Studio compatible front-end components. This means that you are going to create those yourself. Let’s say you make use of a module that has 8 functionalities but you only really use 2, just create a frontend that supports just those two. This will keep the costs lower and functionalities tailored to your webshop.

An Agency

When you are an agency like Experius and are planning to implement multiple projects for different customers you’d want to go with the mono-repo approach. This way gives you a lot of freedom in terms of what packages you use from Studio but also a solid base product that can easily be upgraded to a newer version of Studio to keep all you customers up-to-date with the latest development by Magento.

Feature support:

When you start working on your first project make sure to backport all functionalities to your mono-repo. For example when you need to add bundled product support for your customer build it in your mono-repo as generic as possible and tweak it to the customers needs in their project that’s built with the mono-repo. When you start doing this for all features and new projects your mono-repo will grow really fast and before you know it you will have a full repo of packages ready to rapidly develop any project

Development team:

Studio is fully API driven which means that besides a front-end developer with Javascript/react experience you also need a back-end developer preferably with GraphQL/Rest experience to create new endpoints that can be interpreted by the PWA.

3rth party module support:

This is basically the same workflow as “Feature support” above.

Pain points:

Would love to see more feature / bugfix releases instead of only major version releases.
Not all basic shop features are implemented yet by the Studio team.
At the moment you need to do a lot of overwriting instead of a possibility to extend files/functionalities, in 7.0.0 the new extensibility framework made it's debut. This is a huge improvement but the PWA Studio core still needs to be prepared for overwrites.
No full SEO support so you need to use something like SeoSnap.io like we do over at Experius.
If you are an agency with “traditional” Magento developers (little to no reactjs/javascript) you will need to put time into learning.
You need to make sure your PSP supports headless environments, if not they will have to add support for it.

Wins:

If done right you need less development time in the long run.
An awesome community / Studio team.
Lots of development joy for your developers.
Easy to implement new techniques from the always evolving front-end space.
A future proof webshop

Recommendations:

Start simple, don't try to build everything before launch go with the essentials first.
Make sure to have you components/utilities covered with unit tests
Setup a pipeline (GitHub, Bitbucket etc) and run E2E tests in the pipeline before your new code reaches an environment. We use Cypress.io over at Experius
Join the #pwa slack channel

Final note:

Having created 3 pwa studio projects that run in production and more projects in the making I’ve seen both the pwa community and PWA Studio as a product make major jumps forward. My main tip would be: Ship, learn and then iterate

DEV Community: Jordan Eisenburger

Refetch active Apollo queries in PWA Studio on user action

Enhanced eCommerce in PWA Studio

Adding Google Tag Manager

Creating a React Context

Implementing the data layer methods

How to setup Sirv for PWA Studio

Step 1: Configuring Magento

Step 2: Change your .env file

Step 3: Prepare the makeUrl file

Step 4: Change the url params to be compliant with Sirv's format

That's it you've done it!

Congratulations! You now have Sirv working with PWA studio

Feasibility report for implementing PWA Studio v7.0.0

A merchant with in-house developers

Feature support:

Development team:

3rth party module support:

An Agency

Feature support:

Development team:

3rth party module support:

Pain points:

Wins:

Recommendations:

Final note:

Step 2: Change your `.env` file