[BUG] 🪳 Fix unwanted re-fetching of data on first page load

[bendvc]

Description

Currently the template-retail-react-app uses a staleTime of 10 seconds for React Query. We use this value, in part, to avoid re-fetching data on the first page load.

Unfortunately we have not accounted for cached pages. This means a cached response can be up to 10 minutes old (by default) and the data within the cached responses is almost always stale unless the cached pages is less that 10 seconds old.

This isn't the behaviour we want or had intended. We want the data to be fresh for the 10 seconds as defined in the stale time prop. Meaning the data's dataUpdatedAt should always be the same time the app loads.

In this PR we ensure that we "fudge" the data's timestamp and assign it the datetime that the app of loaded, not the value it was initially fetched.

NOTE: This isn't a great solution so I'm looking for some feedback, below are some alternative solutions that I've looked in to or considered.

1. Ensure the stale time is longer than the ssr page cache time. (This should effect the user experience after page load as data would stay fresh longer)
2. Instead of deleting the timestamp we set it to the current time. (This works, but is finicky as it takes time from hydration of the provider to the time the plp requests data, so we almost need a buffer time to add to it)
3. Use APIs in ReactQuery like prefetchData or initialData and initialDataUpdatedAt (none seemed to do exactly what we wanted)

Screen.Recording.2024-07-19.at.11.47.54.AM.-.2.mov

Lighthouse Scores

Before:

After:

Note: Score values seemed to be more unpredictable on the pre-fix and were all over the place (probably as sometimes the loading skeleton was shown and sometimes not) on the fixed version they were more consistent.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Changes

• Overwrite time stamp for all serialized queries and mutations in the withReactQuery HOC.
• Added tests.

How to Test-Drive This PR

• Run dev-server
• Goto http://localhost:3000/global/en-GB/category/mens
• Open the chrome inspector and set your network speed to fast 3g (maybe even slow 3g)
• Refresh the page.
• Notice that you don't see loading skeletons (you would have see them on https://pwa-kit.mobify-storefront.com/global/en-GB/category/mens)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

[vmarta]

This comment is no longer true.

Suggested change

// Helper for removing the data timestamp.

[bendvc]

I've updated the comment

[vmarta]

Let's have the namespace match our convention... more code like (e.g. no spaces, but can have dots). For example, see

pwa-kit/packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

Line 72 in 777b7d6

logger.error(cause, {namespace: 'react-rendering.render'})

[bendvc]

I've updated the logger to use with-react-query.render

[vmarta]

We have tests for the beforeHydrate. Can we also have a test on the retail-react-app too?

Say for a page like PLP, have a test to verify that there is no skeleton and no productSearch refetch. Otherwise, if there's a regression in this behaviour, we can only detect it manually.

[bendvc]

So we currently have unit test for our a page components, and how those are done is purely run in a client-side manner (e.g. the server side data fetching and rendering is not built into the unit tests). We do have E2E tests that would probably be a better place to home the requests test. Unfortunately all our E2E tests don't access the PLP directly, they simply do things like guest flow and registered flow, meaning the PLP is always a soft navigation.

How married are you to having a one off e2e test to check that skeletons don't show up. It's not a bad idea, but I know we have been talking about having a separate push for uplifting out e2e tests and that might be a goos AC for that work.

[bendvc]

I've created a ticket to create e2e on a broader scope for testing hydration state across the template.