Add mutation workaround

saleor · Jan 31, 2025 · b3dd025 · b3dd025
1 parent c271543
commit b3dd025
Showing 6 changed files with 49 additions and 16 deletions.
diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -17,6 +17,7 @@ import {
   CollectionDetailsQuery,
   useCollectionAssignProductMutation,
   useCollectionProductsQuery,
+  useReorderProductsInCollectionMutation,
   useUnassignCollectionProductMutation,
 } from "@dashboard/graphql";
 import useBulkActions from "@dashboard/hooks/useBulkActions";
@@ -65,6 +66,8 @@ const CollectionProducts: React.FC<CollectionProductsProps> = ({
   const [paginationState, setPaginationState] = useLocalPaginationState(numberOfRows);
   const notify = useNotifier();
 
+  const [reorder, reorderData] = useReorderProductsInCollectionMutation();
+
   const [assignProduct, assignProductOpts] = useCollectionAssignProductMutation({
     onCompleted: data => {
       if (data.collectionAddProducts?.errors.length === 0) {
@@ -134,7 +137,11 @@ const CollectionProducts: React.FC<CollectionProductsProps> = ({
 
     if (productIds.length > 0) {
       await assignProduct({
-        variables: { ...baseVariables, productIds },
+        variables: {
+          ...baseVariables,
+          productIds,
+          moves: productIds.map(id => ({ productId: id, sortOrder: 0 })),
+        },
       });
     }
 

diff --git a/src/collections/components/CollectionProducts/useProductReorder.ts b/src/collections/components/CollectionProducts/useProductReorder.ts
@@ -26,7 +26,7 @@ export const useProductReorder = ({ paginationState }: ProductReorderProps) => {
         moves: [
           {
             productId,
-            sortOrder: shift,
+            sortOrder: -shift,
           },
         ],
         ...paginationState,

diff --git a/src/collections/mutations.ts b/src/collections/mutations.ts
@@ -13,24 +13,43 @@ export const collectionUpdate = gql`
   }
 `;
 
+/*
+  The mutation below has two simultaneous mutations:
+  - collectionAddProducts, for adding products to the collection
+  - collectionReorderProducts, for resetting its reorder position
+
+  The collectionReorderProducts is used here as a workaround due to issues on the API.
+  It does the reorder by moving product by 0, which sets the initial reorder position.
+
+  Additionally, collectionAddProducts gets only the errors as requested field,
+  while collectionReorderProducts takes the desired response (products and collection id) - this is
+  intentional as we are interested only in the response from reorder mutation, and
+  only that will invalidate the apollo cache (because of request collection id presence, required for cache key)
+*/
 export const assignCollectionProduct = gql`
   mutation CollectionAssignProduct(
     $collectionId: ID!
     $productIds: [ID!]!
+    $moves: [MoveProductInput!]!
     $first: Int
     $after: String
     $last: Int
     $before: String
   ) {
     collectionAddProducts(collectionId: $collectionId, products: $productIds) {
+      errors {
+        ...CollectionError
+      }
+    }
+    collectionReorderProducts(collectionId: $collectionId, moves: $moves) {
       collection {
         id
         products(
           first: $first
           after: $after
           before: $before
           last: $last
-          sortBy: { field: COLLECTION, direction: DESC }
+          sortBy: { field: COLLECTION, direction: ASC }
         ) {
           edges {
             node {
@@ -46,7 +65,7 @@ export const assignCollectionProduct = gql`
         }
       }
       errors {
-        ...CollectionError
+        message
       }
     }
   }
@@ -92,7 +111,7 @@ export const unassignCollectionProduct = gql`
           after: $after
           before: $before
           last: $last
-          sortBy: { field: COLLECTION, direction: DESC }
+          sortBy: { field: COLLECTION, direction: ASC }
         ) {
           edges {
             node {
@@ -151,7 +170,7 @@ export const reorderProductsInCollection = gql`
           after: $after
           before: $before
           last: $last
-          sortBy: { field: COLLECTION, direction: DESC }
+          sortBy: { field: COLLECTION, direction: ASC }
         ) {
           edges {
             node {

diff --git a/src/collections/queries.ts b/src/collections/queries.ts
@@ -54,7 +54,7 @@ export const collectionProducts = gql`
         after: $after
         before: $before
         last: $last
-        sortBy: { field: COLLECTION, direction: DESC }
+        sortBy: { field: COLLECTION, direction: ASC }
       ) {
         edges {
           node {

diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
@@ -5420,16 +5420,21 @@ export type CollectionUpdateMutationHookResult = ReturnType<typeof useCollection
 export type CollectionUpdateMutationResult = Apollo.MutationResult<Types.CollectionUpdateMutation>;
 export type CollectionUpdateMutationOptions = Apollo.BaseMutationOptions<Types.CollectionUpdateMutation, Types.CollectionUpdateMutationVariables>;
 export const CollectionAssignProductDocument = gql`
-    mutation CollectionAssignProduct($collectionId: ID!, $productIds: [ID!]!, $first: Int, $after: String, $last: Int, $before: String) {
+    mutation CollectionAssignProduct($collectionId: ID!, $productIds: [ID!]!, $moves: [MoveProductInput!]!, $first: Int, $after: String, $last: Int, $before: String) {
   collectionAddProducts(collectionId: $collectionId, products: $productIds) {
+    errors {
+      ...CollectionError
+    }
+  }
+  collectionReorderProducts(collectionId: $collectionId, moves: $moves) {
     collection {
       id
       products(
         first: $first
         after: $after
         before: $before
         last: $last
-        sortBy: {field: COLLECTION, direction: DESC}
+        sortBy: {field: COLLECTION, direction: ASC}
       ) {
         edges {
           node {
@@ -5445,12 +5450,12 @@ export const CollectionAssignProductDocument = gql`
       }
     }
     errors {
-      ...CollectionError
+      message
     }
   }
 }
-    ${CollectionProductFragmentDoc}
-${CollectionErrorFragmentDoc}`;
+    ${CollectionErrorFragmentDoc}
+${CollectionProductFragmentDoc}`;
 export type CollectionAssignProductMutationFn = Apollo.MutationFunction<Types.CollectionAssignProductMutation, Types.CollectionAssignProductMutationVariables>;
 
 /**
@@ -5468,6 +5473,7 @@ export type CollectionAssignProductMutationFn = Apollo.MutationFunction<Types.Co
  *   variables: {
  *      collectionId: // value for 'collectionId'
  *      productIds: // value for 'productIds'
+ *      moves: // value for 'moves'
  *      first: // value for 'first'
  *      after: // value for 'after'
  *      last: // value for 'last'
@@ -5566,7 +5572,7 @@ export const UnassignCollectionProductDocument = gql`
         after: $after
         before: $before
         last: $last
-        sortBy: {field: COLLECTION, direction: DESC}
+        sortBy: {field: COLLECTION, direction: ASC}
       ) {
         edges {
           node {
@@ -5700,7 +5706,7 @@ export const ReorderProductsInCollectionDocument = gql`
         after: $after
         before: $before
         last: $last
-        sortBy: {field: COLLECTION, direction: DESC}
+        sortBy: {field: COLLECTION, direction: ASC}
       ) {
         edges {
           node {
@@ -5858,7 +5864,7 @@ export const CollectionProductsDocument = gql`
       after: $after
       before: $before
       last: $last
-      sortBy: {field: COLLECTION, direction: DESC}
+      sortBy: {field: COLLECTION, direction: ASC}
     ) {
       edges {
         node {

diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
@@ -9300,14 +9300,15 @@ export type CollectionUpdateMutation = { __typename: 'Mutation', collectionUpdat
 export type CollectionAssignProductMutationVariables = Exact<{
   collectionId: Scalars['ID'];
   productIds: Array<Scalars['ID']> | Scalars['ID'];
+  moves: Array<MoveProductInput> | MoveProductInput;
   first?: InputMaybe<Scalars['Int']>;
   after?: InputMaybe<Scalars['String']>;
   last?: InputMaybe<Scalars['Int']>;
   before?: InputMaybe<Scalars['String']>;
 }>;
 
 
-export type CollectionAssignProductMutation = { __typename: 'Mutation', collectionAddProducts: { __typename: 'CollectionAddProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null };
+export type CollectionAssignProductMutation = { __typename: 'Mutation', collectionAddProducts: { __typename: 'CollectionAddProducts', errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null, collectionReorderProducts: { __typename: 'CollectionReorderProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', message: string | null }> } | null };
 
 export type CreateCollectionMutationVariables = Exact<{
   input: CollectionCreateInput;