Upgrade to @apollo/client@3 #2560

sirugh · 2020-07-16T21:02:20Z

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/

Notes from upgrade

Apollo freezes response objects. Must copy/clone before modifying.
read functions replace local resolvers
merge functions handle ambiguous normalization (ie. arrays of data, objects with no keys)
- Be on the lookout for apollo client warnings about problems merging. These are usually found through manual steps and I've tried to capture and fix all that I could but it is possible I have missed some.

TODO:

Any PRs merged that use react-hooks or v2 syntax will need to get updated on this PR.
Upgrade to 3.2.0 for global next fetch policy (or open a followup ticket).
Double check package.json to ensure new client is added and old deps are removed.
~~Migrate gift option resolvers to type policies~~Done
~~Migrate payment information resolvers to type policies~~ Done
~~Convert to possibleTypes from dataFromObject~~ - Done
~~Fix PDP Overfetching~~ - Resolved by removing manual cache lookups in useProduct
~~Fix Cart Overfetching (and/or blowing away old data ie region/country).~~ Could not repro anymore.
~~Release/Update apollo-link-mutation-queue since operation.toKey is no longer a function.~~ Done.
~~Handle skip bug.~~ - AC@3.1.2 resolved this.
~~graphiql schema view breaks now~~ This appears broken on develop.

Signed-off-by: sirugh <rugh@adobe.com>

PWAStudioBot · 2020-07-16T21:13:59Z

	Fails
🚫	Missing "Description" section. Please add it back, with detail.
🚫	Missing "Verification Steps" section. Please add it back, with detail.
🚫	No linked issue found. Please link a relevant open issue by adding the text "closes #<issue_number>" or "closes JIRA-<issue_number>" in your PR.

	Warnings
⚠️	Found the word "TODO" in the PR description. Just letting you know incase you forgot :)

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).

If your PR is missing information, check against the original template here. At a minimum you must have the section headers from the template and provide some information in each section.

Generated by 🚫 dangerJS against d1877ca

Signed-off-by: sirugh <rugh@adobe.com>

devops-pwa-codebuild · 2020-07-21T17:58:03Z

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2560.pwa-venia.com : LH Performance Expected 0.85 Actual 0.35, LH Accessibility Expected 1 Actual 0.97, LH Best Practices Expected 1 Actual 0.93, WPT Cache Expected 90 Actual 35.666666666667
https://pr-2560.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.31, LH Best Practices Expected 1 Actual 0.93
https://pr-2560.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.57, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.93, WPT Cache Expected 65 Actual 44

Signed-off-by: sirugh <rugh@adobe.com>

…sses

packages/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js

supernova-at · 2020-08-21T18:52:03Z

packages/peregrine/lib/talons/CartPage/useCartPage.js

@@ -18,7 +18,7 @@ export const useCartPage = props => {

    const { called, data, loading } = useQuery(getCartDetails, {
        fetchPolicy: 'cache-and-network',
-        // Don't make this call if we don't have a cartId
+        nextFetchPolicy: 'cache-first',


This answers one of my previous questions, thanks for the context 👍

packages/peregrine/lib/talons/RootComponents/Product/useProduct.js

supernova-at · 2020-08-24T14:56:40Z

packages/upward-js/lib/compiledResources/GraphQLDocument.js

@@ -1,5 +1,5 @@
 const AbstractCompiledResource = require('./AbstractCompiledResource');
-const gql = require('graphql-tag');
+const gql = require('@apollo/client');


Interesting that they chose to make gql the default export of @apollo/client.

After looking at the other imports, this one needs to be changed.

import { gql } from '@apollo/client';

But actually, I don't even know what this file is. Is this generated code?

Honestly, not sure if this file is even used at all. I'll poke around, but yes this does need to be changed to at least:

const apolloClient = require('apollo/client'); const { gql } = apolloClient;

packages/venia-ui/lib/RootComponents/Product/product.gql.js

supernova-at · 2020-08-24T15:13:43Z

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.gql.js

+                read(cached) {
+                    return cached || null;
+                }
+            }


This is actually pretty readable

supernova-at · 2020-08-24T15:22:10Z

packages/venia-ui/lib/drivers/adapter.js

-        introspectionQueryResultData: UNION_AND_INTERFACE_TYPES
-    })
+    typePolicies,
+    possibleTypes: POSSIBLE_TYPES


May want to drop a comment where POSSIBLE_TYPES comes from since it's not otherwise present in this file

Done 8eafc91

supernova-at · 2020-08-24T15:23:19Z

packages/venia-ui/lib/policies/index.js

+    Query: {
+        fields: {
+            cart: {
+                // Replaces @connection(key: "Cart")


Makes me think we should update our Mutation PII Cheat Sheet.

Not sure if the use of the policy for the Cart field warrants the update, but I think I get where you're going with this. We could preempt this and move all the connection directives from mutations to this policies file. For example this mutation:

export const REMOVE_GIFT_CARD_MUTATION = gql` mutation removeGiftCard($cartId: String!, $giftCardCode: String!) { removeGiftCardFromCart( input: { cart_id: $cartId, gift_card_code: $giftCardCode } ) @connection(key: "removeGiftCardFromCart") { ... } } `;

would become

{ Mutation: { fields: { removeGiftCardFromCart: { keyArgs: () => 'removeGiftCardFromCart' } } } }

Then the rule in the cheatsheet, and something we'd have to enforce in reviews, would be to add a field keyArg rule to the policies file when adding a new mutation.

I'd like to get opinions on that though.

Thoughts:

Have each component use the useTypePolicies hook to add type policy keys for their mutations at runtime. This would prevent initial bundle bloat and aid in chunking.

Declare all mutation keys up front. Adds bytes to bundle and hurts chunking if we aren't using all mutations.
note: We could generate this automatically from the schema if we knew what fields we consider "pii".

Use a global no-cache policy for mutations. This would remove the need to do any of this, but would force us to refactor our app because we use mutation results to auto update cache. We would have to switch to using refetchQueries after each mutation.

packages/venia-ui/lib/queries/getCategory.graphql

supernova-at · 2020-08-24T15:26:47Z

packages/venia-ui/lib/resolvers/resolvers.js

 /**
+ * @deprecated Resolvers are deprecated in ApolloClient v3.


I never know where to draw that line.

This is going to be a major change anyway, right?

When do we actually remove this code?

Signed-off-by: sirugh <rugh@adobe.com>

packages/peregrine/lib/hooks/useTypePolicies.js

Signed-off-by: sirugh <rugh@adobe.com>

jimbo

This is good from my end. There are still minor things to resolve, but I'm good when others' feedback is resolved.

jimbo · 2020-08-24T22:30:40Z

packages/venia-ui/lib/resolvers/resolvers.js

 /**
+ * @deprecated Resolvers are deprecated in ApolloClient v3.


Yes, it's absolutely going to be a major change.

We haven't actually formalized a policy for removal, only deprecation.

I think the pacing of our major releases is a bit too fast for us to change code from "canonical" to "deprecated" to "removed" just like that. Now that we're properly marking things with @deprecated, we can start the conversation around an actual removal timeframe.

Signed-off-by: sirugh <rugh@adobe.com>

tjwiebell

Nice improvements with making type policies composable, this looks ready for QA 👍

* Copy frozen array before sorting. * Upgrade to Apollo v3 - imports and package.json Signed-off-by: sirugh <rugh@adobe.com> * Fixup some frozen object and array modifications Signed-off-by: sirugh <rugh@adobe.com> * Replaces cacheKeyFromType Signed-off-by: sirugh <rugh@adobe.com> * Remove apollo/client from direct peregrine dependency Signed-off-by: sirugh <rugh@adobe.com> * prettier Signed-off-by: sirugh <rugh@adobe.com> * Upgrade to v3.0.2 Signed-off-by: sirugh <rugh@adobe.com> * Add more type policies for cart fields * Always use incoming items as result Signed-off-by: sirugh <rugh@adobe.com> * Require url for ProductImage key Signed-off-by: sirugh <rugh@adobe.com> * Fixup typePolicies Signed-off-by: sirugh <rugh@adobe.com> * Replace cart connection key with keyArgs Signed-off-by: sirugh <rugh@adobe.com> * Use constants for custom key fields Signed-off-by: sirugh <rugh@adobe.com> * Ignore CartPrices id Signed-off-by: sirugh <rugh@adobe.com> * Trying to perfect usage of type policy Signed-off-by: sirugh <rugh@adobe.com> * Update mutation link version and ensure 3.0.2 client is used Signed-off-by: sirugh <rugh@adobe.com> * Use a skippable query hook as a stop gap while skip is fixed in apolloclient core Signed-off-by: sirugh <rugh@adobe.com> * Revert "Use a skippable query hook as a stop gap while skip is fixed in apolloclient core" This reverts commit 832f6f4. * Upgrade to apolloclient v3.1.2 Signed-off-by: sirugh <rugh@adobe.com> * Undo pagebuilder package auto format * Re add updated product cache hit logic. * use client import Signed-off-by: sirugh <rugh@adobe.com> * Move price query under correct parent * Fall back to use product id when no url_key * Protect against undefined cachedata * Ensure currency is fetched on sign in to properly merge carts Signed-off-by: sirugh <rugh@adobe.com> * ProductSearch must prefetch just like category page does otherwise the pdp will crash from missing cache data Signed-off-by: sirugh <rugh@adobe.com> * Use apollo client import for new communications page Signed-off-by: sirugh <rugh@adobe.com> * Dont throw if fragment is missing all data from cache Signed-off-by: sirugh <rugh@adobe.com> * Revert "ProductSearch must prefetch just like category" This reverts commit fef660f. * revert package indentation Signed-off-by: sirugh <rugh@adobe.com> * only try to merge incoming if exists Signed-off-by: sirugh <rugh@adobe.com> * Merge cart shipping addresses using index within address array. This is not perfect but the alternative is to overfetch since cache data would always be incoming. Signed-off-by: sirugh <rugh@adobe.com> * Use nocache in lazy query definition otherwise it caches. Removes unnecessary code fetch from fragment Signed-off-by: sirugh <rugh@adobe.com> * Remove unused connection key from cart query Signed-off-by: sirugh <rugh@adobe.com> * use nextFetchPolicy of cache-first to prevent network request when cache data changes Signed-off-by: sirugh <rugh@adobe.com> * Rename gift cards query to make similar to applied coupons Signed-off-by: sirugh <rugh@adobe.com> * Handle addition and removal of gift cards in client merge function Signed-off-by: sirugh <rugh@adobe.com> * Rename stuff to prepare function for moving to util Signed-off-by: sirugh <rugh@adobe.com> * Rename react-hooks imports Signed-off-by: sirugh <rugh@adobe.com> * Missed import Signed-off-by: sirugh <rugh@adobe.com> * Refactor deprecated gift_option resolvers * Add missing stock status to items review fragment Signed-off-by: sirugh <rugh@adobe.com> * Remove deprecated payment information resolvers. Signed-off-by: sirugh <rugh@adobe.com> * Use no-cache policy to avoid requery on cache changes Signed-off-by: sirugh <rugh@adobe.com> * Add merge for CustomerAddress.street as value is in array Signed-off-by: sirugh <rugh@adobe.com> * Readd graphql resolution as upgrading to 15 or removing it entirely causes validator to fail Signed-off-by: sirugh <rugh@adobe.com> * Fixup gql validation errors Signed-off-by: sirugh <rugh@adobe.com> * Fix incorrect boolean response from type policy Signed-off-by: sirugh <rugh@adobe.com> * Removes unused/invalid import Co-authored-by: Jimmy Sanford <jimbo@users.noreply.github.com> * Cast errors to boolean Co-authored-by: Jimmy Sanford <jimbo@users.noreply.github.com> * Applied coupons is an array with single value or null, so we don't need the merge function Signed-off-by: sirugh <rugh@adobe.com> * Add useTypePolicies hook and use in product talon * Only show indicator if loading and no data * Simplify read fn Signed-off-by: sirugh <rugh@adobe.com> * Update mapProduct docs * Add docs for getPossibleTypes Signed-off-by: sirugh <rugh@adobe.com> * Revert currency fetch where unnecessary. Add comment explaining what happens if currency value is not fetched in merge mutation. * Coupon Code uses skip instead of lazy query Signed-off-by: sirugh <rugh@adobe.com> * Use merge:true, same thing anyways Signed-off-by: sirugh <rugh@adobe.com> * Removes prefetch optimizations and url_key identifier use that resulted in cache misses. We found that url_key is not unique so it cannot be used as product interface id Signed-off-by: sirugh <rugh@adobe.com> * Move type policies and merge functions into separate files Signed-off-by: sirugh <rugh@adobe.com> * add line breaks and comments Signed-off-by: sirugh <rugh@adobe.com> * Always use incoming values when merging gift cards and shipping addresses * Update comments. * Feedback Signed-off-by: sirugh <rugh@adobe.com> * Fixup tests Signed-off-by: sirugh <rugh@adobe.com> * Update jsdoc for useTypePolicies Signed-off-by: sirugh <rugh@adobe.com> * use apollo/client instead of react-hooks Signed-off-by: sirugh <rugh@adobe.com> Co-authored-by: Jimmy Sanford <jimbo@users.noreply.github.com> Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>

sirugh added 3 commits July 16, 2020 14:19

Copy frozen array before sorting.

b5681ea

Upgrade to Apollo v3 - imports and package.json

5ffb8f5

Signed-off-by: sirugh <rugh@adobe.com>

Fixup some frozen object and array modifications

3608b32

Signed-off-by: sirugh <rugh@adobe.com>

sirugh added the version: Major This changeset includes incompatible API changes and its release necessitates a Major version bump. label Jul 16, 2020

sirugh changed the title ~~Apollogql upgrade v3~~ Upgrade to @apollo/client@3 Jul 16, 2020

PWAStudioBot added pkg:pagebuilder pkg:peregrine pkg:pwa-buildpack pkg:upward-js Pertains to upward-js reference implementation of UPWARD. pkg:upward-spec Pertains to UPWARD specification package. pkg:venia-concept pkg:venia-ui labels Jul 16, 2020

Replaces cacheKeyFromType

91c1f3d

Signed-off-by: sirugh <rugh@adobe.com>

sirugh force-pushed the apollogql-upgrade-v3 branch from 13453c3 to 91c1f3d Compare July 17, 2020 01:26

sirugh and others added 13 commits July 17, 2020 09:33

Remove apollo/client from direct peregrine dependency

4975b30

Signed-off-by: sirugh <rugh@adobe.com>

prettier

28951c1

Signed-off-by: sirugh <rugh@adobe.com>

Upgrade to v3.0.2

4a67c2c

Signed-off-by: sirugh <rugh@adobe.com>

Add more type policies for cart fields

2099035

Always use incoming items as result

640de5c

Signed-off-by: sirugh <rugh@adobe.com>

Require url for ProductImage key

a5454fe

Signed-off-by: sirugh <rugh@adobe.com>

Fixup typePolicies

88f1a71

Signed-off-by: sirugh <rugh@adobe.com>

Merge branch 'develop' into apollogql-upgrade-v3

fb7924b

Replace cart connection key with keyArgs

241eb81

Signed-off-by: sirugh <rugh@adobe.com>

Use constants for custom key fields

c1930ce

Signed-off-by: sirugh <rugh@adobe.com>

Ignore CartPrices id

d87cbc9

Signed-off-by: sirugh <rugh@adobe.com>

Trying to perfect usage of type policy

28d1058

Signed-off-by: sirugh <rugh@adobe.com>

Update mutation link version and ensure 3.0.2 client is used

191e4f4

Signed-off-by: sirugh <rugh@adobe.com>

Move type policies and merge functions into separate files

d5f4167

Signed-off-by: sirugh <rugh@adobe.com>

sirugh force-pushed the apollogql-upgrade-v3 branch from ae98fc7 to d5f4167 Compare August 19, 2020 19:50

sirugh and others added 4 commits August 19, 2020 15:02

add line breaks and comments

0f4e4b4

Signed-off-by: sirugh <rugh@adobe.com>

Merge branch 'develop' into apollogql-upgrade-v3

153e2ee

Always use incoming values when merging gift cards and shipping addre…

67752de

…sses

Merge remote-tracking branch 'origin/develop' into apollogql-upgrade-v3

765bd28

supernova-at reviewed Aug 24, 2020

View reviewed changes

m2-community-project bot assigned supernova-at Aug 24, 2020

m2-community-project bot added Progress: review and removed Progress: approved labels Aug 24, 2020

sirugh added 3 commits August 24, 2020 10:57

Update comments.

68f0131

Merge remote-tracking branch 'origin/develop' into apollogql-upgrade-v3

c2fe1c9

Feedback

8eafc91

Signed-off-by: sirugh <rugh@adobe.com>

revanth0212 reviewed Aug 24, 2020

View reviewed changes

packages/peregrine/lib/hooks/useTypePolicies.js Outdated Show resolved Hide resolved

m2-community-project bot assigned revanth0212 Aug 24, 2020

sirugh and others added 3 commits August 24, 2020 14:08

Merge branch 'develop' into apollogql-upgrade-v3

6518045

Fixup tests

21b937e

Signed-off-by: sirugh <rugh@adobe.com>

Update jsdoc for useTypePolicies

8107e35

Signed-off-by: sirugh <rugh@adobe.com>

jimbo previously approved these changes Aug 24, 2020

View reviewed changes

sirugh added 2 commits August 26, 2020 10:27

Merge remote-tracking branch 'origin/develop' into apollogql-upgrade-v3

1e94655

use apollo/client instead of react-hooks

6ff890c

Signed-off-by: sirugh <rugh@adobe.com>

sirugh dismissed jimbo’s stale review via 6ff890c August 26, 2020 15:35

tjwiebell approved these changes Aug 26, 2020

View reviewed changes

Merge branch 'develop' into apollogql-upgrade-v3

d1877ca

dpatil-magento merged commit b5b9da3 into develop Aug 27, 2020

dpatil-magento deleted the apollogql-upgrade-v3 branch August 27, 2020 16:56

m2-community-project bot removed the Progress: review label Aug 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to @apollo/client@3 #2560

Upgrade to @apollo/client@3 #2560

sirugh commented Jul 16, 2020 •

edited

Loading

PWAStudioBot commented Jul 16, 2020 •

edited

Loading

devops-pwa-codebuild commented Jul 21, 2020 •

edited

Loading

supernova-at Aug 21, 2020

supernova-at Aug 24, 2020

supernova-at Aug 24, 2020

sirugh Aug 24, 2020

sirugh Aug 24, 2020

supernova-at Aug 24, 2020

supernova-at Aug 24, 2020

sirugh Aug 24, 2020

supernova-at Aug 24, 2020

sirugh Aug 24, 2020

sirugh Aug 25, 2020

sirugh Aug 25, 2020 •

edited

Loading

supernova-at Aug 24, 2020

jimbo left a comment

jimbo Aug 24, 2020 •

edited

Loading

tjwiebell left a comment

		/**
		* @deprecated Resolvers are deprecated in ApolloClient v3.

Upgrade to @apollo/client@3 #2560

Upgrade to @apollo/client@3 #2560

Conversation

sirugh commented Jul 16, 2020 • edited Loading

PWAStudioBot commented Jul 16, 2020 • edited Loading

devops-pwa-codebuild commented Jul 21, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sirugh Aug 25, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimbo left a comment

Choose a reason for hiding this comment

jimbo Aug 24, 2020 • edited Loading

Choose a reason for hiding this comment

tjwiebell left a comment

Choose a reason for hiding this comment

sirugh commented Jul 16, 2020 •

edited

Loading

PWAStudioBot commented Jul 16, 2020 •

edited

Loading

devops-pwa-codebuild commented Jul 21, 2020 •

edited

Loading

sirugh Aug 25, 2020 •

edited

Loading

jimbo Aug 24, 2020 •

edited

Loading