feat: SB-743 migrate delete payment method mutation

* feat: SB-743 migrate delete payment method Approved-by: Michał Kleszcz
apptension · Feb 9, 2023 · 458fff6 · 458fff6
1 parent 46b6971
commit 458fff6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 57 deletions.
diff --git a/packages/webapp/src/modules/stripe/stripe.mutations.ts b/packages/webapp/src/modules/stripe/stripe.mutations.ts
@@ -1,18 +1,5 @@
 import { graphql } from 'react-relay';
 
-graphql`
-  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!, $connections: [ID!]!) {
-    deletePaymentMethod(input: $input) {
-      deletedIds @deleteEdge(connections: $connections)
-      activeSubscription {
-        defaultPaymentMethod {
-          ...stripePaymentMethodFragment
-        }
-      }
-    }
-  }
-`;
-
 graphql`
   mutation stripeUpdateDefaultPaymentMethodMutation(
     $input: UpdateDefaultPaymentMethodMutationInput!

diff --git a/packages/webapp/src/shared/components/finances/stripe/stripePayment.hooks.ts b/packages/webapp/src/shared/components/finances/stripe/stripePayment.hooks.ts
@@ -1,51 +1,57 @@
-import { useState } from 'react';
-
 import { useMutation } from '@apollo/client';
+import { useState } from 'react';
 import { ConnectionHandler } from 'relay-runtime';
 
-import { usePromiseMutation } from '../../../services/graphqlApi/usePromiseMutation';
-import stripeDeletePaymentMethodMutationGraphql, {
-  stripeDeletePaymentMethodMutation,
-} from '../../../../modules/stripe/__generated__/stripeDeletePaymentMethodMutation.graphql';
 import stripeUpdateDefaultPaymentMethodMutationGraphql, {
   stripeUpdateDefaultPaymentMethodMutation,
 } from '../../../../modules/stripe/__generated__/stripeUpdateDefaultPaymentMethodMutation.graphql';
-
 import { TestProduct } from '../../../../modules/stripe/stripe.types';
 import { useApiForm } from '../../../hooks/useApiForm';
 import { StripePaymentIntentType } from '../../../services/graphqlApi/__generated/gql/graphql';
-
-import {
-  PaymentFormFields,
-  StripePaymentMethodSelection,
-} from './stripePaymentMethodSelector/stripePaymentMethodSelector.types';
-
+import { usePromiseMutation } from '../../../services/graphqlApi/usePromiseMutation';
+import { useStripePayment } from './stripePayment.stripe.hook';
 import {
   STRIPE_CREATE_PAYMENT_INTENT_MUTATION,
   STRIPE_UPDATE_PAYMENT_INTENT_MUTATION,
 } from './stripePaymentForm/stripePaymentForm.graphql';
-import { useStripePayment } from './stripePayment.stripe.hook';
+import { STRIPE_DELETE_PAYMENT_METHOD_MUTATION } from './stripePaymentMethodSelector/stripePaymentMethodSelector.graphql';
+import {
+  PaymentFormFields,
+  StripePaymentMethodSelection,
+} from './stripePaymentMethodSelector/stripePaymentMethodSelector.types';
 
 export const useStripePaymentMethods = () => {
-  const [commitDeletePaymentMethodMutation] = usePromiseMutation<stripeDeletePaymentMethodMutation>(
-    stripeDeletePaymentMethodMutationGraphql
-  );
+  const [commitDeletePaymentMethodMutation] = useMutation(STRIPE_DELETE_PAYMENT_METHOD_MUTATION, {
+    update(cache, { data }) {
+      cache.modify({
+        fields: {
+          allPaymentMethods(existingConnection = { edges: [] }) {
+            const deletedId = data?.deletePaymentMethod?.deletedIds?.[0];
+            if (!deletedId) return existingConnection;
+
+            const normalizedId = cache.identify({ id: deletedId, __typename: 'StripePaymentMethodType' });
+            return {
+              ...existingConnection,
+              edges: existingConnection.edges.filter(({ node }) => node.__ref !== normalizedId),
+            };
+          },
+        },
+      });
+    },
+  });
 
   const [commitUpdateDefaultPaymentMethodMutation] = usePromiseMutation<stripeUpdateDefaultPaymentMethodMutation>(
     stripeUpdateDefaultPaymentMethodMutationGraphql
   );
 
-  const deletePaymentMethod = async (id: string) => {
-    try {
-      await commitDeletePaymentMethodMutation({
-        variables: {
-          input: {
-            id,
-          },
-          connections: [ConnectionHandler.getConnectionID('root', 'stripe_allPaymentMethods')],
+  const deletePaymentMethod = (id: string) => {
+    commitDeletePaymentMethodMutation({
+      variables: {
+        input: {
+          id,
         },
-      });
-    } catch {}
+      },
+    });
   };
 
   const updateDefaultPaymentMethod = async (id: string) => {

diff --git a/...onents/finances/stripe/stripePaymentMethodSelector/stripePaymentMethodSelector.graphql.ts b/...onents/finances/stripe/stripePaymentMethodSelector/stripePaymentMethodSelector.graphql.ts
@@ -28,3 +28,16 @@ export const STRIPE_SUBSCRIPTION_QUERY = gql(/* GraphQL */ `
     }
   }
 `);
+
+export const STRIPE_DELETE_PAYMENT_METHOD_MUTATION = gql(/* GraphQL */ `
+  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!) {
+    deletePaymentMethod(input: $input) {
+      deletedIds
+      activeSubscription {
+        defaultPaymentMethod {
+          ...stripePaymentMethodFragment
+        }
+      }
+    }
+  }
+`);
diff --git a/packages/webapp/src/shared/services/graphqlApi/__generated/gql/gql.ts b/packages/webapp/src/shared/services/graphqlApi/__generated/gql/gql.ts
@@ -21,7 +21,6 @@ const documents = {
     "\n  mutation authRequestPasswordResetMutation($input: PasswordResetMutationInput!) {\n    passwordReset(input: $input) {\n      ok\n    }\n  }\n": types.AuthRequestPasswordResetMutationDocument,
     "\n  mutation authRequestPasswordResetConfirmMutation($input: PasswordResetConfirmationMutationInput!) {\n    passwordResetConfirm(input: $input) {\n      ok\n    }\n  }\n": types.AuthRequestPasswordResetConfirmMutationDocument,
     "\n  query configContentfulAppConfigQuery {\n    appConfigCollection(limit: 1) {\n      items {\n        name\n        privacyPolicy\n        termsAndConditions\n      }\n    }\n  }\n": types.ConfigContentfulAppConfigQueryDocument,
-    "\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!, $connections: [ID!]!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds @deleteEdge(connections: $connections)\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n": types.StripeDeletePaymentMethodMutationDocument,
     "\n  mutation stripeUpdateDefaultPaymentMethodMutation(\n    $input: UpdateDefaultPaymentMethodMutationInput!\n    $connections: [ID!]!\n  ) {\n    updateDefaultPaymentMethod(input: $input) {\n      activeSubscription {\n        ...subscriptionActiveSubscriptionFragment\n      }\n      paymentMethodEdge @appendEdge(connections: $connections) {\n        node {\n          # commented only because of the broken apollo types: need to fix it after migration\n          #          ...stripePaymentMethodFragment @relay(mask: false)\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n": types.StripeUpdateDefaultPaymentMethodMutationDocument,
     "\n  mutation stripeCreateSetupIntentMutation($input: CreateSetupIntentMutationInput!) {\n    createSetupIntent(input: $input) {\n      setupIntent {\n        ...stripeSetupIntentFragment\n      }\n    }\n  }\n": types.StripeCreateSetupIntentMutationDocument,
     "\n  fragment stripePaymentMethodFragment on StripePaymentMethodType {\n    id\n    pk\n    type\n    card\n    billingDetails\n  }\n": types.StripePaymentMethodFragmentFragmentDoc,
@@ -60,6 +59,7 @@ const documents = {
     "\n  mutation stripeCreatePaymentIntentMutation_($input: CreatePaymentIntentMutationInput!) {\n    createPaymentIntent(input: $input) {\n      paymentIntent {\n        ...stripePaymentIntentFragment\n        id\n      }\n    }\n  }\n": types.StripeCreatePaymentIntentMutation_Document,
     "\n  mutation stripeUpdatePaymentIntentMutation_($input: UpdatePaymentIntentMutationInput!) {\n    updatePaymentIntent(input: $input) {\n      paymentIntent {\n        ...stripePaymentIntentFragment\n        id\n      }\n    }\n  }\n": types.StripeUpdatePaymentIntentMutation_Document,
     "\n  query stripeSubscriptionQuery {\n    allPaymentMethods(first: 100) {\n      edges {\n        node {\n          id\n          pk\n          type\n          card\n          billingDetails\n          ...stripePaymentMethodFragment\n          __typename\n        }\n        cursor\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n      }\n    }\n\n    activeSubscription {\n      ...subscriptionActiveSubscriptionFragment_\n      id\n      __typename\n    }\n  }\n": types.StripeSubscriptionQueryDocument,
+    "\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n": types.StripeDeletePaymentMethodMutationDocument,
     "\n  mutation notificationMutation($input: UpdateNotificationMutationInput!) {\n    updateNotification(input: $input) {\n      hasUnreadNotifications\n      notificationEdge {\n        node {\n          id\n          readAt\n        }\n      }\n    }\n  }\n": types.NotificationMutationDocument,
     "\n  query notificationsListQuery($count: Int = 20, $cursor: String) {\n    ...notificationsListContentFragment\n    ...notificationsButtonContent\n  }\n": types.NotificationsListQueryDocument,
     "\n  subscription notificationsListSubscription {\n    notificationCreated {\n      edges {\n        node {\n          id\n          type\n          createdAt\n          readAt\n          data\n        }\n      }\n    }\n  }\n": types.NotificationsListSubscriptionDocument,
@@ -121,10 +121,6 @@ export function gql(source: "\n  mutation authRequestPasswordResetConfirmMutatio
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  query configContentfulAppConfigQuery {\n    appConfigCollection(limit: 1) {\n      items {\n        name\n        privacyPolicy\n        termsAndConditions\n      }\n    }\n  }\n"): (typeof documents)["\n  query configContentfulAppConfigQuery {\n    appConfigCollection(limit: 1) {\n      items {\n        name\n        privacyPolicy\n        termsAndConditions\n      }\n    }\n  }\n"];
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(source: "\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!, $connections: [ID!]!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds @deleteEdge(connections: $connections)\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!, $connections: [ID!]!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds @deleteEdge(connections: $connections)\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -277,6 +273,10 @@ export function gql(source: "\n  mutation stripeUpdatePaymentIntentMutation_($in
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  query stripeSubscriptionQuery {\n    allPaymentMethods(first: 100) {\n      edges {\n        node {\n          id\n          pk\n          type\n          card\n          billingDetails\n          ...stripePaymentMethodFragment\n          __typename\n        }\n        cursor\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n      }\n    }\n\n    activeSubscription {\n      ...subscriptionActiveSubscriptionFragment_\n      id\n      __typename\n    }\n  }\n"): (typeof documents)["\n  query stripeSubscriptionQuery {\n    allPaymentMethods(first: 100) {\n      edges {\n        node {\n          id\n          pk\n          type\n          card\n          billingDetails\n          ...stripePaymentMethodFragment\n          __typename\n        }\n        cursor\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n      }\n    }\n\n    activeSubscription {\n      ...subscriptionActiveSubscriptionFragment_\n      id\n      __typename\n    }\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation stripeDeletePaymentMethodMutation($input: DeletePaymentMethodMutationInput!) {\n    deletePaymentMethod(input: $input) {\n      deletedIds\n      activeSubscription {\n        defaultPaymentMethod {\n          ...stripePaymentMethodFragment\n        }\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */