Update schema, types, and replace taking shipping zones straight from channel with channelShippingZones query

schema.graphql

@@ -5146,6 +5146,7 @@ type ShippingZoneDelete {
 
 input ShippingZoneFilterInput {
   search: String
+  channel: ID
 }
 
 type ShippingZoneUpdate {

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -20,10 +20,8 @@ import React, { useState } from "react";
 
 import { ChannelForm, FormData } from "../../components/ChannelForm";
 import { ChannelStatus } from "../../components/ChannelStatus/ChannelStatus";
-import {
-  Channel_channel,
-  Channel_channel_shippingZones
-} from "../../types/Channel";
+import { Channel_channel } from "../../types/Channel";
+import { ChannelShippingZones } from "./types";
 import { getUpdatedIdsWithNewId, getUpdatedIdsWithoutNewId } from "./utils";
 
 export interface ChannelDetailsPageProps {
@@ -40,6 +38,7 @@ export interface ChannelDetailsPageProps {
   searchShippingZones: (query: string) => void;
   searchShippingZonesData?: SearchData;
   fetchMoreShippingZones: FetchMoreProps;
+  channelShippingZones: ChannelShippingZones;
 }
 
 export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
@@ -55,13 +54,14 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
   updateChannelStatus,
   searchShippingZones,
   searchShippingZonesData,
-  fetchMoreShippingZones
+  fetchMoreShippingZones,
+  channelShippingZones
 }) => {
   const [selectedCurrencyCode, setSelectedCurrencyCode] = useState("");
 
   const [shippingZonesToDisplay, setShippingZonesToDisplay] = useStateFromProps<
-    Channel_channel_shippingZones[]
-  >(channel?.shippingZones || []);
+    ChannelShippingZones
+  >(channelShippingZones || []);
 
   const initialData: FormData = {
     currencyCode: "",

src/channels/pages/ChannelDetailsPage/types.ts

@@ -0,0 +1,3 @@
+import { ShippingZoneChannels_shippingZones_edges_node } from "@saleor/shipping/types/ShippingZoneChannels";
+
+export type ChannelShippingZones = ShippingZoneChannels_shippingZones_edges_node[];

src/channels/types/Channel.ts

@@ -7,34 +7,6 @@
 // GraphQL query operation: Channel
 // ====================================================
 
-export interface Channel_channel_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface Channel_channel_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface Channel_channel_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface Channel_channel_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (Channel_channel_shippingZones_metadata | null)[];
-  privateMetadata: (Channel_channel_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (Channel_channel_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface Channel_channel {
   __typename: "Channel";
   id: string;
@@ -43,7 +15,6 @@ export interface Channel_channel {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: Channel_channel_shippingZones[];
 }
 
 export interface Channel {

src/channels/types/ChannelActivate.ts

@@ -9,34 +9,6 @@ import { ChannelErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: ChannelActivate
 // ====================================================
 
-export interface ChannelActivate_channelActivate_channel_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelActivate_channelActivate_channel_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelActivate_channelActivate_channel_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface ChannelActivate_channelActivate_channel_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (ChannelActivate_channelActivate_channel_shippingZones_metadata | null)[];
-  privateMetadata: (ChannelActivate_channelActivate_channel_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (ChannelActivate_channelActivate_channel_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface ChannelActivate_channelActivate_channel {
   __typename: "Channel";
   id: string;
@@ -45,7 +17,6 @@ export interface ChannelActivate_channelActivate_channel {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: ChannelActivate_channelActivate_channel_shippingZones[];
 }
 
 export interface ChannelActivate_channelActivate_errors {

src/channels/types/ChannelCreate.ts

@@ -9,34 +9,6 @@ import { ChannelCreateInput, ChannelErrorCode } from "./../../types/globalTypes"
 // GraphQL mutation operation: ChannelCreate
 // ====================================================
 
-export interface ChannelCreate_channelCreate_channel_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelCreate_channelCreate_channel_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelCreate_channelCreate_channel_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface ChannelCreate_channelCreate_channel_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (ChannelCreate_channelCreate_channel_shippingZones_metadata | null)[];
-  privateMetadata: (ChannelCreate_channelCreate_channel_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (ChannelCreate_channelCreate_channel_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface ChannelCreate_channelCreate_channel {
   __typename: "Channel";
   id: string;
@@ -45,7 +17,6 @@ export interface ChannelCreate_channelCreate_channel {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: ChannelCreate_channelCreate_channel_shippingZones[];
 }
 
 export interface ChannelCreate_channelCreate_errors {

src/channels/types/ChannelDeactivate.ts

@@ -9,34 +9,6 @@ import { ChannelErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: ChannelDeactivate
 // ====================================================
 
-export interface ChannelDeactivate_channelDeactivate_channel_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelDeactivate_channelDeactivate_channel_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelDeactivate_channelDeactivate_channel_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface ChannelDeactivate_channelDeactivate_channel_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (ChannelDeactivate_channelDeactivate_channel_shippingZones_metadata | null)[];
-  privateMetadata: (ChannelDeactivate_channelDeactivate_channel_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (ChannelDeactivate_channelDeactivate_channel_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface ChannelDeactivate_channelDeactivate_channel {
   __typename: "Channel";
   id: string;
@@ -45,7 +17,6 @@ export interface ChannelDeactivate_channelDeactivate_channel {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: ChannelDeactivate_channelDeactivate_channel_shippingZones[];
 }
 
 export interface ChannelDeactivate_channelDeactivate_errors {

src/channels/types/ChannelUpdate.ts

@@ -9,34 +9,6 @@ import { ChannelUpdateInput, ChannelErrorCode } from "./../../types/globalTypes"
 // GraphQL mutation operation: ChannelUpdate
 // ====================================================
 
-export interface ChannelUpdate_channelUpdate_channel_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelUpdate_channelUpdate_channel_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelUpdate_channelUpdate_channel_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface ChannelUpdate_channelUpdate_channel_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (ChannelUpdate_channelUpdate_channel_shippingZones_metadata | null)[];
-  privateMetadata: (ChannelUpdate_channelUpdate_channel_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (ChannelUpdate_channelUpdate_channel_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface ChannelUpdate_channelUpdate_channel {
   __typename: "Channel";
   id: string;
@@ -45,7 +17,6 @@ export interface ChannelUpdate_channelUpdate_channel {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: ChannelUpdate_channelUpdate_channel_shippingZones[];
 }
 
 export interface ChannelUpdate_channelUpdate_errors {

src/channels/types/Channels.ts

@@ -7,34 +7,6 @@
 // GraphQL query operation: Channels
 // ====================================================
 
-export interface Channels_channels_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface Channels_channels_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface Channels_channels_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface Channels_channels_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (Channels_channels_shippingZones_metadata | null)[];
-  privateMetadata: (Channels_channels_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (Channels_channels_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface Channels_channels {
   __typename: "Channel";
   id: string;
@@ -43,7 +15,6 @@ export interface Channels_channels {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: Channels_channels_shippingZones[];
 }
 
 export interface Channels {

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -14,6 +14,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
 import { sectionNames } from "@saleor/intl";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
+import { useChannelShippingZones } from "@saleor/shipping/queries";
 import getChannelsErrorMessage from "@saleor/utils/errors/channels";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
@@ -151,6 +152,17 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
     deleteChannel({ variables: data });
   };
 
+  const {
+    data: channelShippingZonesData,
+    loading: channelsShippingZonesLoading
+  } = useChannelShippingZones({
+    variables: {
+      filter: {
+        channel: id
+      }
+    }
+  });
+
   const {
     loadMore: fetchMoreShippingZones,
     search: searchShippingZones,
@@ -173,6 +185,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
         </AppHeader>
         <PageHeader title={data?.channel?.name} />
         <ChannelDetailsPage
+          channelShippingZones={channelShippingZonesData?.shippingZones?.edges}
           searchShippingZones={searchShippingZones}
           searchShippingZonesData={searchShippingZonesResult.data}
           fetchMoreShippingZones={getSearchFetchMoreProps(
@@ -180,7 +193,9 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
             fetchMoreShippingZones
           )}
           channel={data?.channel}
-          disabled={updateChannelOpts.loading || loading}
+          disabled={
+            updateChannelOpts.loading || loading || channelsShippingZonesLoading
+          }
           disabledStatus={
             activateChannelOpts.loading || deactivateChannelOpts.loading
           }

src/fragments/channels.ts

@@ -1,7 +1,5 @@
 import gql from "graphql-tag";
 
-import { shippingZoneFragment } from "./shipping";
-
 export const channelErrorFragment = gql`
   fragment ChannelErrorFragment on ChannelError {
     code
@@ -22,12 +20,8 @@ export const channelFragment = gql`
 
 export const channelDetailsFragment = gql`
   ${channelFragment}
-  ${shippingZoneFragment}
   fragment ChannelDetailsFragment on Channel {
     ...ChannelFragment
     hasOrders
-    shippingZones {
-      ...ShippingZoneFragment
-    }
   }
 `;

src/fragments/types/ChannelDetailsFragment.ts

@@ -7,34 +7,6 @@
 // GraphQL fragment: ChannelDetailsFragment
 // ====================================================
 
-export interface ChannelDetailsFragment_shippingZones_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelDetailsFragment_shippingZones_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ChannelDetailsFragment_shippingZones_countries {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface ChannelDetailsFragment_shippingZones {
-  __typename: "ShippingZone";
-  metadata: (ChannelDetailsFragment_shippingZones_metadata | null)[];
-  privateMetadata: (ChannelDetailsFragment_shippingZones_privateMetadata | null)[];
-  id: string;
-  countries: (ChannelDetailsFragment_shippingZones_countries | null)[] | null;
-  name: string;
-  description: string | null;
-}
-
 export interface ChannelDetailsFragment {
   __typename: "Channel";
   id: string;
@@ -43,5 +15,4 @@ export interface ChannelDetailsFragment {
   slug: string;
   currencyCode: string;
   hasOrders: boolean;
-  shippingZones: ChannelDetailsFragment_shippingZones[];
 }

src/shipping/queries.ts

@@ -6,11 +6,11 @@ import {
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
 
-import { ShippingZone, ShippingZoneVariables } from "./types/ShippingZone";
 import {
-  ShippingZoneChannels,
-  ShippingZoneChannelsVariables
-} from "./types/ShippingZoneChannels";
+  ChannelShippingZones,
+  ChannelShippingZonesVariables
+} from "./types/ChannelShippingZones";
+import { ShippingZone, ShippingZoneVariables } from "./types/ShippingZone";
 import { ShippingZones, ShippingZonesVariables } from "./types/ShippingZones";
 
 const shippingZones = gql`
@@ -71,20 +71,20 @@ export const useShippingZone = makeQuery<ShippingZone, ShippingZoneVariables>(
   shippingZone
 );
 
-const shippingZoneChannels = gql`
-  query ShippingZoneChannels($id: ID!) {
-    shippingZone(id: $id) {
-      id
-      channels {
+const channelShippingZones = gql`
+  query ChannelShippingZones($filter: ShippingZoneFilterInput) {
+    shippingZones(filter: $filter) {
+      edges {
+        node {
           id
           name
-        currencyCode
+        }
       }
     }
   }
 `;
 
-export const useShippingZoneChannels = makeQuery<
-  ShippingZoneChannels,
-  ShippingZoneChannelsVariables
->(shippingZoneChannels);
+export const useChannelShippingZones = makeQuery<
+  ChannelShippingZones,
+  ChannelShippingZonesVariables
+>(channelShippingZones);

src/shipping/types/ChannelShippingZones.ts

@@ -0,0 +1,34 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ShippingZoneFilterInput } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: ChannelShippingZones
+// ====================================================
+
+export interface ChannelShippingZones_shippingZones_edges_node {
+  __typename: "ShippingZone";
+  id: string;
+  name: string;
+}
+
+export interface ChannelShippingZones_shippingZones_edges {
+  __typename: "ShippingZoneCountableEdge";
+  node: ChannelShippingZones_shippingZones_edges_node;
+}
+
+export interface ChannelShippingZones_shippingZones {
+  __typename: "ShippingZoneCountableConnection";
+  edges: ChannelShippingZones_shippingZones_edges[];
+}
+
+export interface ChannelShippingZones {
+  shippingZones: ChannelShippingZones_shippingZones | null;
+}
+
+export interface ChannelShippingZonesVariables {
+  filter?: ShippingZoneFilterInput | null;
+}

src/shipping/types/ShippingZoneChannels.ts

@@ -3,27 +3,32 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { ShippingZoneFilterInput } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL query operation: ShippingZoneChannels
 // ====================================================
 
-export interface ShippingZoneChannels_shippingZone_channels {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ShippingZoneChannels_shippingZone {
+export interface ShippingZoneChannels_shippingZones_edges_node {
   __typename: "ShippingZone";
   id: string;
-  channels: ShippingZoneChannels_shippingZone_channels[];
+  name: string;
+}
+
+export interface ShippingZoneChannels_shippingZones_edges {
+  __typename: "ShippingZoneCountableEdge";
+  node: ShippingZoneChannels_shippingZones_edges_node;
+}
+
+export interface ShippingZoneChannels_shippingZones {
+  __typename: "ShippingZoneCountableConnection";
+  edges: ShippingZoneChannels_shippingZones_edges[];
 }
 
 export interface ShippingZoneChannels {
-  shippingZone: ShippingZoneChannels_shippingZone | null;
+  shippingZones: ShippingZoneChannels_shippingZones | null;
 }
 
 export interface ShippingZoneChannelsVariables {
-  id: string;
+  filter?: ShippingZoneFilterInput | null;
 }

src/types/globalTypes.ts

@@ -1849,6 +1849,11 @@ export interface ShippingZoneCreateInput {
   addChannels?: string[] | null;
 }
 
+export interface ShippingZoneFilterInput {
+  search?: string | null;
+  channel?: string | null;
+}
+
 export interface ShippingZoneUpdateInput {
   name?: string | null;
   description?: string | null;