Make `commerce-sdk-react` Work Server-Side 💪🏻 #734

bendvc · 2022-09-22T18:29:26Z

Description

This the server-side support for react-query being merged into the SDK in this #724. It was important that we prove that the commerce-sdk-react hooks work was compatible. In this PR I make the required changes to ensure that any hooks used via the commerce-sdk-react module are executed server side.

I have left comments on part of this PR that I would like feedback on. So please pay special attention to those.

Why didn't this work after imply updating the sdk?

The reason this didn't work, is the commerce-sdk-react provider was itself using a react query provider. This provider was in conflict with the one supplied by the SDK. This meant that any hooks that we used used the client in the first provider it could find in its component hierarchy. This was the one defined in the commerce-sdk-react. Unfortunately the SDK does not know anything about this one and isn't able to track and execute the queries made by the hooks within it. This is the reason that it was required to be removed.

Changes

Remove the interfering ReactQueryProvider and client that was being defined in the SCAPI hooks provider.
Updated the test application to use the new withReactQuery HoC from the SDK
Added a section to the commerce-sdk-react readme on how its used in and out of a PWA-Kit application.
Updated SDK to allow the withReactQuery to consume options for setting the clients configuration.
Added default client configuration to never retry on the server. <-- Need feedback on this.

How to Test-Drive This PR

Checkout this branch.
Run npm ci
Run npm start
Your browser will open, once it's loaded goto this url --> http://localhost:3000/products?mobify_server_only=1
You shouldn't see a loading screen as you previously did, but instead you'll see the JSON data for the products requested immediately.

General

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

TODOs

Fix failing tests in commerce-sdk-react

- Updated the readme - Updated the commerce sdk react to not include a provider - Fixed the test app - Allow config setting for client in sdk provider

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js

packages/commerce-sdk-react/README.md

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js

Also clean up the warning logic

Since we plan to remove the QueryClientProvider in our commerce hooks. See PR #734

packages/test-commerce-sdk-react/app/components/_app-config/index.tsx

packages/commerce-sdk-react/README.md

vmarta · 2022-09-27T23:41:31Z

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js


-export const withReactQuery = (Wrapped) => {
+export const withReactQuery = (Wrapped, options = {}) => {


Let's add some jsdoc comment here to document the HOC, since it's gonna be public facing.

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js

packages/pwa-kit-react-sdk/src/utils/warnings.js

vmarta · 2022-09-28T00:29:14Z

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.test.js

+        windowSpy.mockRestore()
+    })
+
+    test('Renders correctly', () => {


It's a duplicate test

Idea isn't fully baked yet

Co-authored-by: Vincent Marta <[email protected]>

vmarta

From my end, there are a few remaining minor comments that have not been resolved yet. But overall, this PR looks good to me now.

adamraya · 2022-09-29T22:24:10Z

packages/commerce-sdk-react/README.md

+            queries: {
+                retry: !server // Only retry when on the client.
+            },
+            mutations: {
+                retry: !server // Only retry when on the client.
+            }


Bad example, this means never retry on the server, infinite retry on the client.

@adamraya yeah, let's fix this readme next week.

…CommerceCloud/pwa-kit into server-side-sdk-hooks

* 1st attempt at disabling retry when seeing validation error * Make sure the retries would stop * Add todos * Add comment * Some refactoring and typing * Remove some guards * Add comments * Remove comments * Demonstrate user error * React Query's retries are now done only for 5xx server errors * For easier debugging * Revert change Since we plan to remove the QueryClientProvider in our commerce hooks. See PR #734 * Disable retries And set the option at the individual query level. * Revert adding query options on individual queries * Remove todo We can't use ResponseError yet, since it's not exported by the isomorphic sdk. * Create a new page to see the errors * Test validation error

First go

fd26031

- Updated the readme - Updated the commerce sdk react to not include a provider - Fixed the test app - Allow config setting for client in sdk provider

bendvc requested a review from a team as a code owner September 22, 2022 18:29

bendvc added the wip Work in process label Sep 22, 2022

bendvc commented Sep 22, 2022

View reviewed changes

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js Outdated Show resolved Hide resolved

Lint

9517bca

bendvc changed the title ~~Make commerce-sdk-reack Work Server-Side 💪🏻~~ Make commerce-sdk-react Work Server-Side 💪🏻 Sep 22, 2022

adamraya reviewed Sep 22, 2022

View reviewed changes

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js Outdated Show resolved Hide resolved

vmarta reviewed Sep 22, 2022

View reviewed changes

packages/commerce-sdk-react/README.md Outdated Show resolved Hide resolved

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js Outdated Show resolved Hide resolved

vmarta reviewed Sep 23, 2022

View reviewed changes

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js Outdated Show resolved Hide resolved

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js Show resolved Hide resolved

bendvc added 3 commits September 26, 2022 14:45

Add sample config setting

589b48a

Tests

9d32fa4

Lint

aeba404

bendvc added ready for review PR is ready to be reviewed and removed wip Work in process labels Sep 26, 2022

bendvc added 7 commits September 26, 2022 16:13

Fix config structure.

491afd0

Added ideal config options in projects and readme

8a793eb

Also clean up the warning logic

Lint

d36ca1b

Merge branch 'develop' into server-side-sdk-hooks

2131531

Lint

a44767a

Update index.tsx

84fac33

Update CHANGELOG.md

8298a25

vmarta added a commit that referenced this pull request Sep 27, 2022

Revert change

9d2d6cc

Since we plan to remove the QueryClientProvider in our commerce hooks. See PR #734

vmarta mentioned this pull request Sep 27, 2022

Handle validation error from commerce-sdk-isomorphic #718

Merged

8 tasks

vmarta reviewed Sep 28, 2022

View reviewed changes

bendvc and others added 6 commits September 28, 2022 09:07

Remove refetchOnMount option

5db964d

Idea isn't fully baked yet

Update packages/commerce-sdk-react/README.md

59eaaa0

Co-authored-by: Vincent Marta <[email protected]>

Update packages/commerce-sdk-react/README.md

fb7676b

Co-authored-by: Vincent Marta <[email protected]>

Update packages/commerce-sdk-react/README.md

3f6dbbe

Co-authored-by: Vincent Marta <[email protected]>

Update packages/commerce-sdk-react/README.md

476c2a8

Co-authored-by: Vincent Marta <[email protected]>

Update packages/pwa-kit-react-sdk/src/utils/warnings.js

e50ae9b

Co-authored-by: Vincent Marta <[email protected]>

vmarta approved these changes Sep 28, 2022

View reviewed changes

bendvc and others added 4 commits September 29, 2022 14:32

Go with simple default configuration solution

cde9751

Remove duplicate test

b4ed673

Update CHANGELOG.md

ef89935

Merge branch 'develop' into server-side-sdk-hooks

5d177d7

adamraya reviewed Sep 29, 2022

View reviewed changes

bendvc added 2 commits September 29, 2022 15:27

Update warnings.test.js

406d2d9

Merge branch 'server-side-sdk-hooks' of https://github.com/Salesforce…

26fd1b4

…CommerceCloud/pwa-kit into server-side-sdk-hooks

bendvc merged commit f25ef92 into develop Sep 29, 2022

bendvc deleted the server-side-sdk-hooks branch September 29, 2022 23:01

vmarta mentioned this pull request Oct 5, 2022

Readme: fix example on customizing React Query #751

Merged

12 tasks

This was referenced Oct 17, 2022

Queries on hydration #767

Closed

Explore having react-query config be on user land #791

Merged

This was referenced Feb 29, 2024

[Snyk] Security upgrade archiver from 1.3.0 to 7.0.0 #1680

Closed

[Snyk] Security upgrade archiver from 1.3.0 to 7.0.0 #1681

Closed

[Snyk] Security upgrade archiver from 1.3.0 to 7.0.0 #1682

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make `commerce-sdk-react` Work Server-Side 💪🏻 #734

Make `commerce-sdk-react` Work Server-Side 💪🏻 #734

bendvc commented Sep 22, 2022 •

edited

Loading

vmarta Sep 27, 2022

vmarta Sep 28, 2022

vmarta left a comment

adamraya Sep 29, 2022

vmarta Sep 30, 2022


		export const withReactQuery = (Wrapped) => {
		export const withReactQuery = (Wrapped, options = {}) => {

Make commerce-sdk-react Work Server-Side 💪🏻 #734

Make commerce-sdk-react Work Server-Side 💪🏻 #734

Conversation

bendvc commented Sep 22, 2022 • edited Loading

Description

Changes

How to Test-Drive This PR

General

TODOs

vmarta Sep 27, 2022

Choose a reason for hiding this comment

vmarta Sep 28, 2022

Choose a reason for hiding this comment

vmarta left a comment

Choose a reason for hiding this comment

adamraya Sep 29, 2022

Choose a reason for hiding this comment

vmarta Sep 30, 2022

Choose a reason for hiding this comment

Make `commerce-sdk-react` Work Server-Side 💪🏻 #734

Make `commerce-sdk-react` Work Server-Side 💪🏻 #734

bendvc commented Sep 22, 2022 •

edited

Loading