Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SPIKE] URL Mapping - Asynchronous Configuration Method #1641

Draft
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

bendvc
Copy link
Collaborator

@bendvc bendvc commented Jan 15, 2024

Description

In this PR we investigate implementing the Shopper SEO "Url Mapping" API endpoint into the PWA-Kit platform. The primary strategy for this PR is to use the withReactQuery higher-order component to allow us to pre-populate the query client cache.

How does this PR work?

Server-Side: To make things work server-side we first need to know what type of page component we are rendering. Because the rendering is a 2-stage affair, aka we scan for queries to run then wait for them to complete and render again, it means we can't introduce a third blocking action as it would break rendering.

To solve this problem we update the API for the with-react-query hoc allowing the developer to pass an initial 'dehydratedState' that will be use as the initial value in the clients cache. This in effect means when it comes to determining what hooks are running we are back to the 2-stage rending working.

If it's not obvious the initial data that we'll be populating is the url mapping for the current url path if one exists. With this data we can update the rendering pipeline to see if we have a url map, and render a special page that will use that data to conditionally render either the category, product, page not found, redirect, or error pages.

Client-Side: As the PWA stands routing is a one shot snychronous event, you can't block it from happing. So we needed to solve how we could do this, as potentially any link/url on the website could be one that is either a redirect or custom, we just don't know it yet. This is where we introduced the useBlock hooks, this special hook will allow you to block transitions from one page to another, giving you time to make an API request for the desired page. We used this idea a little differently and simple redirect all transitions to that same special page that is used to determine what page type to render based on the url mapping data.

Issues

  1. This is a very complicated solution and will be prone to bugs over time.
  2. Might not completely work as we use links for things like swatch items, although its totally valid to have a redirect for a single variation, it will make things SLOOOWWW
  3. This will make everything slow and none PWA like.

We should not implement redirects and custom urls solely in the PWA, we need to be working with other systems like mrt to get things working smoothly and in a less complex way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant