Fixed issue with redundant payload for plugins view (#1203) (#1203)

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

CHANGELOG.md

@@ -59,8 +59,10 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add generic filter validation - #1187 by @jwm0
 - Fix duplicated labels in column picker - #1197 by @orzechdev
 - Fix forbidden null sending as attribute value - #1201 by @orzechdev
+- Fix huge payload issue for plugins view - #1203 by @kamilpastuszka
 - Fix missing call for update metadata mutation - #1207 by @orzechdev
 - Fix order links on home page - #1219 by @jwm0
+- Fix huge payload issue for plugins view - #1203 by @kamilpastuszka
 
 # 2.11.1
 

src/fragments/plugins.ts

@@ -10,39 +10,54 @@ export const configurationItemFragment = gql`
   }
 `;
 
-export const pluginConfigurationFragment = gql`
+export const pluginConfigurationBaseFragment = gql`
-  ${configurationItemFragment}
+  fragment PluginConfigurationBaseFragment on PluginConfiguration {
-  fragment PluginConfigurationFragment on PluginConfiguration {
     active
     channel {
       id
       name
       slug
     }
+  }
+`;
+
+export const pluginConfigurationExtendedFragment = gql`
+  ${configurationItemFragment}
+  ${pluginConfigurationBaseFragment}
+  fragment PluginConfigurationExtendedFragment on PluginConfiguration {
+    ...PluginConfigurationBaseFragment
     configuration {
       ...ConfigurationItemFragment
     }
   }
 `;
 
-export const pluginsFragment = gql`
+export const pluginBaseFragment = gql`
-  ${pluginConfigurationFragment}
+  ${pluginConfigurationBaseFragment}
-  fragment PluginFragment on Plugin {
+  fragment PluginBaseFragment on Plugin {
     id
     name
     description
-    globalConfiguration {
-      ...PluginConfigurationFragment
-    }
     channelConfigurations {
-      ...PluginConfigurationFragment
+      ...PluginConfigurationBaseFragment
+    }
+    globalConfiguration {
+      ...PluginConfigurationBaseFragment
     }
   }
 `;
 
 export const pluginsDetailsFragment = gql`
-  ${pluginsFragment}
+  ${pluginConfigurationExtendedFragment}
   fragment PluginsDetailsFragment on Plugin {
-    ...PluginFragment
+    id
+    name
+    description
+    globalConfiguration {
+      ...PluginConfigurationExtendedFragment
+    }
+    channelConfigurations {
+      ...PluginConfigurationExtendedFragment
+    }
   }
 `;

src/fragments/types/PluginBaseFragment.ts

@@ -0,0 +1,43 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: PluginBaseFragment
+// ====================================================
+
+export interface PluginBaseFragment_channelConfigurations_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginBaseFragment_channelConfigurations {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginBaseFragment_channelConfigurations_channel | null;
+}
+
+export interface PluginBaseFragment_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginBaseFragment_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginBaseFragment_globalConfiguration_channel | null;
+}
+
+export interface PluginBaseFragment {
+  __typename: "Plugin";
+  id: string;
+  name: string;
+  description: string;
+  channelConfigurations: PluginBaseFragment_channelConfigurations[];
+  globalConfiguration: PluginBaseFragment_globalConfiguration | null;
+}

src/fragments/types/PluginConfigurationBaseFragment.ts

@@ -0,0 +1,21 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: PluginConfigurationBaseFragment
+// ====================================================
+
+export interface PluginConfigurationBaseFragment_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginConfigurationBaseFragment {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginConfigurationBaseFragment_channel | null;
+}

src/fragments/types/PluginConfigurationExtendedFragment.ts

@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: PluginConfigurationExtendedFragment
+// ====================================================
+
+export interface PluginConfigurationExtendedFragment_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface PluginConfigurationExtendedFragment_configuration {
+  __typename: "ConfigurationItem";
+  name: string;
+  value: string | null;
+  type: ConfigurationTypeFieldEnum | null;
+  helpText: string | null;
+  label: string | null;
+}
+
+export interface PluginConfigurationExtendedFragment {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: PluginConfigurationExtendedFragment_channel | null;
+  configuration: (PluginConfigurationExtendedFragment_configuration | null)[] | null;
+}

src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx

@@ -3,7 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
-import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -25,7 +25,7 @@ const useStyles = makeStyles(
 );
 
 interface ChannelConfigPluginPopupBodyProps {
-  plugin: Plugin_plugin;
+  plugin: PluginBaseFragment;
 }
 
 const ChannelConfigPluginPopupBody: React.FC<ChannelConfigPluginPopupBodyProps> = ({

src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx

@@ -2,14 +2,14 @@ import { CardContent, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { statusLabelMessages } from "@saleor/components/StatusLabel/messages";
-import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { globalConfigPluginMessages as messages } from "../messages";
 
 interface GlobalConfigPluginPopupBodyProps {
-  plugin: Plugin_plugin;
+  plugin: PluginBaseFragment;
 }
 
 const GlobalConfigPluginPopupBody: React.FC<GlobalConfigPluginPopupBodyProps> = ({

src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx

@@ -1,5 +1,5 @@
 import { Card, Popper } from "@material-ui/core";
-import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import { isPluginGlobal } from "@saleor/plugins/views/utils";
 import { makeStyles } from "@saleor/theme";
 import React from "react";
@@ -18,7 +18,7 @@ const useStyles = makeStyles(
 );
 
 interface PluginAvailabilityStatusPopupProps {
-  plugin: Plugin_plugin;
+  plugin: PluginBaseFragment;
   isOpen: boolean;
   anchor: React.RefObject<HTMLTableCellElement>;
 }

src/plugins/components/PluginsList/PluginChannelAvailabilityCell.tsx

@@ -1,13 +1,13 @@
 import { TableCell } from "@material-ui/core";
 import Skeleton from "@saleor/components/Skeleton";
-import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import React, { useRef, useState } from "react";
 
 import PluginAvailabilityStatus from "./PluginAvailabilityStatus";
 import PluginAvailabilityStatusPopup from "./PluginAvailabilityStatusPopup";
 
 interface PluginChannelAvailabilityCellProps {
-  plugin: Plugin_plugin;
+  plugin: PluginBaseFragment;
 }
 
 const PluginChannelAvailabilityCell: React.FC<PluginChannelAvailabilityCellProps> = ({

src/plugins/components/PluginsList/PluginChannelConfigurationCell.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@material-ui/core";
-import { Plugin_plugin } from "@saleor/plugins/types/Plugin";
+import { PluginBaseFragment } from "@saleor/fragments/types/PluginBaseFragment";
 import { isPluginGlobal } from "@saleor/plugins/views/utils";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -7,7 +7,7 @@ import { FormattedMessage } from "react-intl";
 import { pluginChannelConfigurationCellMessages as messages } from "./messages";
 
 interface PluginChannelConfigurationCellProps {
-  plugin: Plugin_plugin;
+  plugin: PluginBaseFragment;
 }
 
 const PluginChannelConfigurationCell: React.FC<PluginChannelConfigurationCellProps> = ({

src/plugins/components/PluginsList/utils.ts

@@ -1,9 +1,9 @@
-import { Plugin_plugin_channelConfigurations } from "@saleor/plugins/types/Plugin";
+import { PluginConfigurationBaseFragment } from "@saleor/fragments/types/PluginConfigurationBaseFragment";
 
 export const getAllChannelConfigsCount = (
-  channelConfigurations: Plugin_plugin_channelConfigurations[]
+  channelConfigurations: PluginConfigurationBaseFragment[]
 ) => channelConfigurations?.length;
 
 export const getActiveChannelConfigsCount = (
-  channelConfigurations: Plugin_plugin_channelConfigurations[]
+  channelConfigurations: PluginConfigurationBaseFragment[]
 ) => channelConfigurations?.filter(({ active }) => !!active).length;

src/plugins/fixtures.ts

@@ -11,7 +11,6 @@ export const pluginList: Plugins_plugins_edges_node[] = [
       {
         __typename: "PluginConfiguration",
         active: true,
-        configuration: [],
         channel: {
           __typename: "Channel",
           id: "channel-1",
@@ -32,7 +31,6 @@ export const pluginList: Plugins_plugins_edges_node[] = [
       {
         __typename: "PluginConfiguration",
         active: true,
-        configuration: [],
         channel: {
           __typename: "Channel",
           id: "channel-1",

src/plugins/queries.ts

@@ -1,6 +1,6 @@
 import {
-  pluginsDetailsFragment,
+  pluginBaseFragment,
-  pluginsFragment
+  pluginsDetailsFragment
 } from "@saleor/fragments/plugins";
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
@@ -9,7 +9,7 @@ import { Plugin, PluginVariables } from "./types/Plugin";
 import { Plugins, PluginsVariables } from "./types/Plugins";
 
 const pluginsList = gql`
-  ${pluginsFragment}
+  ${pluginBaseFragment}
   query Plugins(
     $first: Int
     $after: String
@@ -28,7 +28,7 @@ const pluginsList = gql`
     ) {
       edges {
         node {
-          ...PluginFragment
+          ...PluginBaseFragment
         }
       }
       pageInfo {

src/plugins/types/Plugins.ts

@@ -3,35 +3,12 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { PluginFilterInput, PluginSortingInput, ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+import { PluginFilterInput, PluginSortingInput } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: Plugins
 // ====================================================
 
-export interface Plugins_plugins_edges_node_globalConfiguration_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  slug: string;
-}
-
-export interface Plugins_plugins_edges_node_globalConfiguration_configuration {
-  __typename: "ConfigurationItem";
-  name: string;
-  value: string | null;
-  type: ConfigurationTypeFieldEnum | null;
-  helpText: string | null;
-  label: string | null;
-}
-
-export interface Plugins_plugins_edges_node_globalConfiguration {
-  __typename: "PluginConfiguration";
-  active: boolean;
-  channel: Plugins_plugins_edges_node_globalConfiguration_channel | null;
-  configuration: (Plugins_plugins_edges_node_globalConfiguration_configuration | null)[] | null;
-}
-
 export interface Plugins_plugins_edges_node_channelConfigurations_channel {
   __typename: "Channel";
   id: string;
@@ -39,20 +16,23 @@ export interface Plugins_plugins_edges_node_channelConfigurations_channel {
   slug: string;
 }
 
-export interface Plugins_plugins_edges_node_channelConfigurations_configuration {
-  __typename: "ConfigurationItem";
-  name: string;
-  value: string | null;
-  type: ConfigurationTypeFieldEnum | null;
-  helpText: string | null;
-  label: string | null;
-}
-
 export interface Plugins_plugins_edges_node_channelConfigurations {
   __typename: "PluginConfiguration";
   active: boolean;
   channel: Plugins_plugins_edges_node_channelConfigurations_channel | null;
-  configuration: (Plugins_plugins_edges_node_channelConfigurations_configuration | null)[] | null;
+}
+
+export interface Plugins_plugins_edges_node_globalConfiguration_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface Plugins_plugins_edges_node_globalConfiguration {
+  __typename: "PluginConfiguration";
+  active: boolean;
+  channel: Plugins_plugins_edges_node_globalConfiguration_channel | null;
 }
 
 export interface Plugins_plugins_edges_node {
@@ -60,8 +40,8 @@ export interface Plugins_plugins_edges_node {
   id: string;
   name: string;
   description: string;
-  globalConfiguration: Plugins_plugins_edges_node_globalConfiguration | null;
   channelConfigurations: Plugins_plugins_edges_node_channelConfigurations[];
+  globalConfiguration: Plugins_plugins_edges_node_globalConfiguration | null;
 }
 
 export interface Plugins_plugins_edges {

src/plugins/views/utils.ts

@@ -1,7 +1,7 @@
-import { Plugin_plugin_globalConfiguration } from "@saleor/plugins/types/Plugin";
+import { PluginConfigurationBaseFragment } from "@saleor/fragments/types/PluginConfigurationBaseFragment";
 
 export const isPluginGlobal = (
-  globalConfiguration: Plugin_plugin_globalConfiguration
+  globalConfiguration: PluginConfigurationBaseFragment
 ) => !!globalConfiguration;
 
 export const getConfigByChannelId = (channelIdToCompare: string) => ({