Merge pull request #1112 from mirumee/feature/SALEOR-3109-attribute-values-pagination

Feature/SALEOR-3109 Use pagination on attribute values

CHANGELOG.md

@@ -47,6 +47,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add service worker - #1073 by @dominik-zeglen
 - Choosing user shipping and billing addresses for draft order - #1082 by @orzechdev
 - Fix EditorJS inline formatting - #1096 by @orzechdev
+- Add pagination on attribute values - #1112 by @orzechdev
 
 # 2.11.1
 

cypress/apiRequests/Attribute.js

@@ -10,7 +10,13 @@ export function createAttribute(name, attributeValues = ["value"]) {
       attribute{
         id
         name
-        values{name}
+        choices(first: 100){
+          edges{
+            node{
+              name
+            }
+          }
+        }
       }
       attributeErrors{
         field

locale/defaultMessages.json

@@ -5643,6 +5643,10 @@
     "context": "variant name",
     "string": "Variant"
   },
+  "src_dot_products_dot_components_dot_ProductVariantCreatorPage_dot_multipleValueLabel": {
+    "context": "attribute values",
+    "string": "Values"
+  },
   "src_dot_products_dot_components_dot_ProductVariantDeleteDialog_dot_1583616500": {
     "context": "button",
     "string": "Delete variant"

schema.graphql

@@ -413,7 +413,7 @@ type Attribute implements Node & ObjectWithMetadata {
   slug: String
   type: AttributeTypeEnum
   unit: MeasurementUnitsEnum
-  values: [AttributeValue]
+  choices(sortBy: AttributeChoicesSortingInput, filter: AttributeValueFilterInput, before: String, after: String, first: Int, last: Int): AttributeValueCountableConnection
   valueRequired: Boolean!
   visibleInStorefront: Boolean!
   filterableInStorefront: Boolean!
@@ -429,6 +429,16 @@ type AttributeBulkDelete {
   errors: [AttributeError!]!
 }
 
+enum AttributeChoicesSortField {
+  NAME
+  SLUG
+}
+
+input AttributeChoicesSortingInput {
+  direction: OrderDirection!
+  field: AttributeChoicesSortField!
+}
+
 type AttributeCountableConnection {
   pageInfo: PageInfo!
   edges: [AttributeCountableEdge!]!
@@ -606,6 +616,17 @@ type AttributeValueBulkDelete {
   errors: [AttributeError!]!
 }
 
+type AttributeValueCountableConnection {
+  pageInfo: PageInfo!
+  edges: [AttributeValueCountableEdge!]!
+  totalCount: Int
+}
+
+type AttributeValueCountableEdge {
+  node: AttributeValue!
+  cursor: String!
+}
+
 type AttributeValueCreate {
   attribute: Attribute
   attributeErrors: [AttributeError!]! @deprecated(reason: "Use errors field instead. This field will be removed in Saleor 4.0.")
@@ -626,6 +647,10 @@ type AttributeValueDelete {
   attributeValue: AttributeValue
 }
 
+input AttributeValueFilterInput {
+  search: String
+}
+
 input AttributeValueInput {
   id: ID
   values: [String]
@@ -794,7 +819,7 @@ type CategoryTranslation implements Node {
   id: ID!
   seoTitle: String
   seoDescription: String
-  name: String!
+  name: String
   description: JSONString
   language: LanguageDisplay!
   descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
@@ -1268,7 +1293,7 @@ type CollectionTranslation implements Node {
   id: ID!
   seoTitle: String
   seoDescription: String
-  name: String!
+  name: String
   description: JSONString
   language: LanguageDisplay!
   descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
@@ -3592,6 +3617,7 @@ input PageFilterInput {
   search: String
   metadata: [MetadataInput]
   pageTypes: [ID]
+  ids: [ID]
 }
 
 type PageInfo {
@@ -3651,7 +3677,7 @@ type PageTranslation implements Node {
   id: ID!
   seoTitle: String
   seoDescription: String
-  title: String!
+  title: String
   content: JSONString
   language: LanguageDisplay!
   contentJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `content` field instead.")
@@ -4397,7 +4423,7 @@ type ProductTranslation implements Node {
   id: ID!
   seoTitle: String
   seoDescription: String
-  name: String!
+  name: String
   description: JSONString
   language: LanguageDisplay!
   descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")

src/attributes/components/AttributeList/AttributeList.tsx

@@ -192,9 +192,6 @@ const AttributeList: React.FC<AttributeListProps> = ({
                 className={classes.link}
                 data-test="id"
                 data-test-id={maybe(() => attribute.id)}
-                data-test-values={JSON.stringify(
-                  maybe(() => attribute.values, [])
-                )}
               >
                 <TableCell padding="checkbox">
                   <Checkbox

src/attributes/components/AttributePage/AttributePage.tsx

@@ -1,3 +1,4 @@
+import { AttributeDetails_attribute_choices } from "@saleor/attributes/types/AttributeDetails";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@saleor/attributes/utils/data";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
@@ -9,21 +10,18 @@ import Metadata from "@saleor/components/Metadata/Metadata";
 import { MetadataFormData } from "@saleor/components/Metadata/types";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
-import {
+import { AttributeDetailsFragment } from "@saleor/fragments/types/AttributeDetailsFragment";
-  AttributeDetailsFragment,
-  AttributeDetailsFragment_values
-} from "@saleor/fragments/types/AttributeDetailsFragment";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { ReorderAction } from "@saleor/types";
+import { ListSettings, ReorderAction } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,
   AttributeInputTypeEnum,
   AttributeTypeEnum,
   MeasurementUnitsEnum
 } from "@saleor/types/globalTypes";
-import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -39,7 +37,7 @@ export interface AttributePageProps {
   disabled: boolean;
   errors: AttributeErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
-  values: AttributeDetailsFragment_values[];
+  values: AttributeDetails_attribute_choices;
   onBack: () => void;
   onDelete: () => void;
   onSubmit: (data: AttributePageFormData) => void;
@@ -47,6 +45,14 @@ export interface AttributePageProps {
   onValueDelete: (id: string) => void;
   onValueReorder: ReorderAction;
   onValueUpdate: (id: string) => void;
+  settings?: ListSettings;
+  onUpdateListSettings?: (key: keyof ListSettings, value: any) => void;
+  pageInfo: {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  };
+  onNextPage: () => void;
+  onPreviousPage: () => void;
 }
 
 export interface AttributePageFormData extends MetadataFormData {
@@ -76,7 +82,12 @@ const AttributePage: React.FC<AttributePageProps> = ({
   onValueAdd,
   onValueDelete,
   onValueReorder,
-  onValueUpdate
+  onValueUpdate,
+  settings,
+  onUpdateListSettings,
+  pageInfo,
+  onNextPage,
+  onPreviousPage
 }) => {
   const intl = useIntl();
   const {
@@ -190,11 +201,16 @@ const AttributePage: React.FC<AttributePageProps> = ({
                     <CardSpacer />
                     <AttributeValues
                       disabled={disabled}
-                      values={values}
+                      values={mapEdgesToItems(values)}
                       onValueAdd={onValueAdd}
                       onValueDelete={onValueDelete}
                       onValueReorder={onValueReorder}
                       onValueUpdate={onValueUpdate}
+                      settings={settings}
+                      onUpdateListSettings={onUpdateListSettings}
+                      pageInfo={pageInfo}
+                      onNextPage={onNextPage}
+                      onPreviousPage={onPreviousPage}
                     />
                   </>
                 )}

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -19,13 +19,11 @@ import { getFormErrors } from "@saleor/utils/errors";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { AttributeDetails_attribute_values } from "../../types/AttributeDetails";
-
 export interface AttributeValueEditDialogFormData {
   name: string;
 }
 export interface AttributeValueEditDialogProps {
-  attributeValue: AttributeDetails_attribute_values | null;
+  attributeValue: AttributeValueEditDialogFormData | null;
   confirmButtonState: ConfirmButtonTransitionState;
   disabled: boolean;
   errors: AttributeErrorFragment[];

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -3,6 +3,7 @@ import {
   Card,
   IconButton,
   TableCell,
+  TableFooter,
   TableHead,
   TableRow
 } from "@material-ui/core";
@@ -14,16 +15,18 @@ import {
   SortableTableBody,
   SortableTableRow
 } from "@saleor/components/SortableTable";
-import { AttributeDetailsFragment_values } from "@saleor/fragments/types/AttributeDetailsFragment";
+import TablePagination from "@saleor/components/TablePagination";
+import { AttributeValueListFragment_edges_node } from "@saleor/fragments/types/AttributeValueListFragment";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
 import { makeStyles } from "@saleor/theme";
-import { ReorderAction } from "@saleor/types";
+import { ListProps, ReorderAction } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-export interface AttributeValuesProps {
+export interface AttributeValuesProps
+  extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">> {
   disabled: boolean;
-  values: AttributeDetailsFragment_values[];
+  values: AttributeValueListFragment_edges_node[];
   onValueAdd: () => void;
   onValueDelete: (id: string) => void;
   onValueReorder: ReorderAction;
@@ -57,13 +60,20 @@ const useStyles = makeStyles(
   { name: "AttributeValues" }
 );
 
+const numberOfColumns = 4;
+
 const AttributeValues: React.FC<AttributeValuesProps> = ({
   disabled,
   onValueAdd,
   onValueDelete,
   onValueReorder,
   onValueUpdate,
-  values
+  values,
+  settings,
+  onUpdateListSettings,
+  pageInfo,
+  onNextPage,
+  onPreviousPage
 }) => {
   const classes = useStyles({});
   const intl = useIntl();
@@ -103,6 +113,21 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             <TableCell className={classes.iconCell} />
           </TableRow>
         </TableHead>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              colSpan={numberOfColumns}
+              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+              onNextPage={onNextPage}
+              hasPreviousPage={
+                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
+              }
+              onPreviousPage={onPreviousPage}
+              settings={settings}
+              onUpdateListSettings={onUpdateListSettings}
+            />
+          </TableRow>
+        </TableFooter>
         <SortableTableBody onSortEnd={onValueReorder}>
           {renderCollection(
             values,

src/attributes/mutations.ts

@@ -1,5 +1,9 @@
-import { attributeDetailsFragment } from "@saleor/fragments/attributes";
+import {
+  attributeDetailsFragment,
+  attributeValueListFragment
+} from "@saleor/fragments/attributes";
 import { attributeErrorFragment } from "@saleor/fragments/errors";
+import { pageInfoFragment } from "@saleor/fragments/pageInfo";
 import makeMutation from "@saleor/hooks/makeMutation";
 import gql from "graphql-tag";
 
@@ -86,12 +90,26 @@ export const useAttributeUpdateMutation = makeMutation<
 >(attributeUpdateMutation);
 
 const attributeValueDelete = gql`
-  ${attributeDetailsFragment}
+  ${attributeValueListFragment}
   ${attributeErrorFragment}
-  mutation AttributeValueDelete($id: ID!) {
+  mutation AttributeValueDelete(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attributeValueDelete(id: $id) {
       attribute {
-        ...AttributeDetailsFragment
+        id
+        choices(
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
+        }
       }
       errors {
         ...AttributeErrorFragment
@@ -105,12 +123,27 @@ export const useAttributeValueDeleteMutation = makeMutation<
 >(attributeValueDelete);
 
 export const attributeValueUpdateMutation = gql`
-  ${attributeDetailsFragment}
+  ${attributeValueListFragment}
   ${attributeErrorFragment}
-  mutation AttributeValueUpdate($id: ID!, $input: AttributeValueCreateInput!) {
+  mutation AttributeValueUpdate(
+    $id: ID!
+    $input: AttributeValueCreateInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attributeValueUpdate(id: $id, input: $input) {
       attribute {
-        ...AttributeDetailsFragment
+        id
+        choices(
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
+        }
       }
       errors {
         ...AttributeErrorFragment
@@ -124,12 +157,27 @@ export const useAttributeValueUpdateMutation = makeMutation<
 >(attributeValueUpdateMutation);
 
 export const attributeValueCreateMutation = gql`
-  ${attributeDetailsFragment}
+  ${attributeValueListFragment}
   ${attributeErrorFragment}
-  mutation AttributeValueCreate($id: ID!, $input: AttributeValueCreateInput!) {
+  mutation AttributeValueCreate(
+    $id: ID!
+    $input: AttributeValueCreateInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attributeValueCreate(attribute: $id, input: $input) {
       attribute {
-        ...AttributeDetailsFragment
+        id
+        choices(
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
+        }
       }
       errors {
         ...AttributeErrorFragment
@@ -143,12 +191,11 @@ export const useAttributeValueCreateMutation = makeMutation<
 >(attributeValueCreateMutation);
 
 export const attributeCreateMutation = gql`
-  ${attributeDetailsFragment}
   ${attributeErrorFragment}
   mutation AttributeCreate($input: AttributeCreateInput!) {
     attributeCreate(input: $input) {
       attribute {
-        ...AttributeDetailsFragment
+        id
       }
       errors {
         ...AttributeErrorFragment
@@ -163,12 +210,33 @@ export const useAttributeCreateMutation = makeMutation<
 
 const attributeValueReorderMutation = gql`
   ${attributeErrorFragment}
-  mutation AttributeValueReorder($id: ID!, $move: ReorderInput!) {
+  ${pageInfoFragment}
+  mutation AttributeValueReorder(
+    $id: ID!
+    $move: ReorderInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attributeReorderValues(attributeId: $id, moves: [$move]) {
       attribute {
         id
-        values {
+        choices(
-          id
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          pageInfo {
+            ...PageInfoFragment
+          }
+          edges {
+            cursor
+            node {
+              id
+            }
+          }
         }
       }
       errors {

src/attributes/queries.ts

@@ -1,6 +1,7 @@
 import {
   attributeDetailsFragment,
-  attributeFragment
+  attributeFragment,
+  attributeValueListFragment
 } from "@saleor/fragments/attributes";
 import { pageInfoFragment } from "@saleor/fragments/pageInfo";
 import makeQuery from "@saleor/hooks/makeQuery";
@@ -14,9 +15,24 @@ import { AttributeList, AttributeListVariables } from "./types/AttributeList";
 
 const attributeDetails = gql`
   ${attributeDetailsFragment}
-  query AttributeDetails($id: ID!) {
+  ${attributeValueListFragment}
+  query AttributeDetails(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attribute(id: $id) {
       ...AttributeDetailsFragment
+      choices(
+        first: $firstValues
+        after: $afterValues
+        last: $lastValues
+        before: $beforeValues
+      ) {
+        ...AttributeValueListFragment
+      }
     }
   }
 `;
@@ -47,11 +63,6 @@ const attributeList = gql`
       edges {
         node {
           ...AttributeFragment
-          values {
-            id
-            name
-            slug
-          }
         }
       }
       pageInfo {

src/attributes/types/AttributeCreate.ts

@@ -3,58 +3,15 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AttributeCreateInput, AttributeTypeEnum, MeasurementUnitsEnum, AttributeInputTypeEnum, AttributeEntityTypeEnum, AttributeErrorCode } from "./../../types/globalTypes";
+import { AttributeCreateInput, AttributeErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: AttributeCreate
 // ====================================================
 
-export interface AttributeCreate_attributeCreate_attribute_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface AttributeCreate_attributeCreate_attribute_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface AttributeCreate_attributeCreate_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface AttributeCreate_attributeCreate_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: AttributeCreate_attributeCreate_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface AttributeCreate_attributeCreate_attribute {
   __typename: "Attribute";
   id: string;
-  name: string | null;
-  slug: string | null;
-  type: AttributeTypeEnum | null;
-  visibleInStorefront: boolean;
-  filterableInDashboard: boolean;
-  filterableInStorefront: boolean;
-  unit: MeasurementUnitsEnum | null;
-  metadata: (AttributeCreate_attributeCreate_attribute_metadata | null)[];
-  privateMetadata: (AttributeCreate_attributeCreate_attribute_privateMetadata | null)[];
-  availableInGrid: boolean;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  storefrontSearchPosition: number;
-  valueRequired: boolean;
-  values: (AttributeCreate_attributeCreate_attribute_values | null)[] | null;
 }
 
 export interface AttributeCreate_attributeCreate_errors {

src/attributes/types/AttributeDetails.ts

@@ -21,22 +21,42 @@ export interface AttributeDetails_attribute_privateMetadata {
   value: string;
 }
 
-export interface AttributeDetails_attribute_values_file {
+export interface AttributeDetails_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface AttributeDetails_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface AttributeDetails_attribute_values {
+export interface AttributeDetails_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: AttributeDetails_attribute_values_file | null;
+  file: AttributeDetails_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface AttributeDetails_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeDetails_attribute_choices_edges_node;
+}
+
+export interface AttributeDetails_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeDetails_attribute_choices_pageInfo;
+  edges: AttributeDetails_attribute_choices_edges[];
+}
+
 export interface AttributeDetails_attribute {
   __typename: "Attribute";
   id: string;
@@ -54,7 +74,7 @@ export interface AttributeDetails_attribute {
   entityType: AttributeEntityTypeEnum | null;
   storefrontSearchPosition: number;
   valueRequired: boolean;
-  values: (AttributeDetails_attribute_values | null)[] | null;
+  choices: AttributeDetails_attribute_choices | null;
 }
 
 export interface AttributeDetails {
@@ -63,4 +83,8 @@ export interface AttributeDetails {
 
 export interface AttributeDetailsVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/attributes/types/AttributeList.ts

@@ -9,13 +9,6 @@ import { AttributeFilterInput, AttributeSortingInput, AttributeTypeEnum, Measure
 // GraphQL query operation: AttributeList
 // ====================================================
 
-export interface AttributeList_attributes_edges_node_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-}
-
 export interface AttributeList_attributes_edges_node {
   __typename: "Attribute";
   id: string;
@@ -26,7 +19,6 @@ export interface AttributeList_attributes_edges_node {
   filterableInDashboard: boolean;
   filterableInStorefront: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (AttributeList_attributes_edges_node_values | null)[] | null;
 }
 
 export interface AttributeList_attributes_edges {

src/attributes/types/AttributeUpdate.ts

@@ -21,22 +21,6 @@ export interface AttributeUpdate_attributeUpdate_attribute_privateMetadata {
   value: string;
 }
 
-export interface AttributeUpdate_attributeUpdate_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface AttributeUpdate_attributeUpdate_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: AttributeUpdate_attributeUpdate_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface AttributeUpdate_attributeUpdate_attribute {
   __typename: "Attribute";
   id: string;
@@ -54,7 +38,6 @@ export interface AttributeUpdate_attributeUpdate_attribute {
   entityType: AttributeEntityTypeEnum | null;
   storefrontSearchPosition: number;
   valueRequired: boolean;
-  values: (AttributeUpdate_attributeUpdate_attribute_values | null)[] | null;
 }
 
 export interface AttributeUpdate_attributeUpdate_errors {

src/attributes/types/AttributeValueCreate.ts

@@ -3,58 +3,52 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AttributeValueCreateInput, AttributeTypeEnum, MeasurementUnitsEnum, AttributeInputTypeEnum, AttributeEntityTypeEnum, AttributeErrorCode } from "./../../types/globalTypes";
+import { AttributeValueCreateInput, AttributeErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: AttributeValueCreate
 // ====================================================
 
-export interface AttributeValueCreate_attributeValueCreate_attribute_metadata {
+export interface AttributeValueCreate_attributeValueCreate_attribute_choices_pageInfo {
-  __typename: "MetadataItem";
+  __typename: "PageInfo";
-  key: string;
+  endCursor: string | null;
-  value: string;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
 }
 
-export interface AttributeValueCreate_attributeValueCreate_attribute_privateMetadata {
+export interface AttributeValueCreate_attributeValueCreate_attribute_choices_edges_node_file {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface AttributeValueCreate_attributeValueCreate_attribute_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface AttributeValueCreate_attributeValueCreate_attribute_values {
+export interface AttributeValueCreate_attributeValueCreate_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: AttributeValueCreate_attributeValueCreate_attribute_values_file | null;
+  file: AttributeValueCreate_attributeValueCreate_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface AttributeValueCreate_attributeValueCreate_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueCreate_attributeValueCreate_attribute_choices_edges_node;
+}
+
+export interface AttributeValueCreate_attributeValueCreate_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueCreate_attributeValueCreate_attribute_choices_pageInfo;
+  edges: AttributeValueCreate_attributeValueCreate_attribute_choices_edges[];
+}
+
 export interface AttributeValueCreate_attributeValueCreate_attribute {
   __typename: "Attribute";
   id: string;
-  name: string | null;
+  choices: AttributeValueCreate_attributeValueCreate_attribute_choices | null;
-  slug: string | null;
-  type: AttributeTypeEnum | null;
-  visibleInStorefront: boolean;
-  filterableInDashboard: boolean;
-  filterableInStorefront: boolean;
-  unit: MeasurementUnitsEnum | null;
-  metadata: (AttributeValueCreate_attributeValueCreate_attribute_metadata | null)[];
-  privateMetadata: (AttributeValueCreate_attributeValueCreate_attribute_privateMetadata | null)[];
-  availableInGrid: boolean;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  storefrontSearchPosition: number;
-  valueRequired: boolean;
-  values: (AttributeValueCreate_attributeValueCreate_attribute_values | null)[] | null;
 }
 
 export interface AttributeValueCreate_attributeValueCreate_errors {
@@ -76,4 +70,8 @@ export interface AttributeValueCreate {
 export interface AttributeValueCreateVariables {
   id: string;
   input: AttributeValueCreateInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/attributes/types/AttributeValueDelete.ts

@@ -3,58 +3,52 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AttributeTypeEnum, MeasurementUnitsEnum, AttributeInputTypeEnum, AttributeEntityTypeEnum, AttributeErrorCode } from "./../../types/globalTypes";
+import { AttributeErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: AttributeValueDelete
 // ====================================================
 
-export interface AttributeValueDelete_attributeValueDelete_attribute_metadata {
+export interface AttributeValueDelete_attributeValueDelete_attribute_choices_pageInfo {
-  __typename: "MetadataItem";
+  __typename: "PageInfo";
-  key: string;
+  endCursor: string | null;
-  value: string;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
 }
 
-export interface AttributeValueDelete_attributeValueDelete_attribute_privateMetadata {
+export interface AttributeValueDelete_attributeValueDelete_attribute_choices_edges_node_file {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface AttributeValueDelete_attributeValueDelete_attribute_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface AttributeValueDelete_attributeValueDelete_attribute_values {
+export interface AttributeValueDelete_attributeValueDelete_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: AttributeValueDelete_attributeValueDelete_attribute_values_file | null;
+  file: AttributeValueDelete_attributeValueDelete_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface AttributeValueDelete_attributeValueDelete_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueDelete_attributeValueDelete_attribute_choices_edges_node;
+}
+
+export interface AttributeValueDelete_attributeValueDelete_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueDelete_attributeValueDelete_attribute_choices_pageInfo;
+  edges: AttributeValueDelete_attributeValueDelete_attribute_choices_edges[];
+}
+
 export interface AttributeValueDelete_attributeValueDelete_attribute {
   __typename: "Attribute";
   id: string;
-  name: string | null;
+  choices: AttributeValueDelete_attributeValueDelete_attribute_choices | null;
-  slug: string | null;
-  type: AttributeTypeEnum | null;
-  visibleInStorefront: boolean;
-  filterableInDashboard: boolean;
-  filterableInStorefront: boolean;
-  unit: MeasurementUnitsEnum | null;
-  metadata: (AttributeValueDelete_attributeValueDelete_attribute_metadata | null)[];
-  privateMetadata: (AttributeValueDelete_attributeValueDelete_attribute_privateMetadata | null)[];
-  availableInGrid: boolean;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  storefrontSearchPosition: number;
-  valueRequired: boolean;
-  values: (AttributeValueDelete_attributeValueDelete_attribute_values | null)[] | null;
 }
 
 export interface AttributeValueDelete_attributeValueDelete_errors {
@@ -75,4 +69,8 @@ export interface AttributeValueDelete {
 
 export interface AttributeValueDeleteVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/attributes/types/AttributeValueReorder.ts

@@ -9,15 +9,35 @@ import { ReorderInput, AttributeErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: AttributeValueReorder
 // ====================================================
 
-export interface AttributeValueReorder_attributeReorderValues_attribute_values {
+export interface AttributeValueReorder_attributeReorderValues_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface AttributeValueReorder_attributeReorderValues_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
 }
 
+export interface AttributeValueReorder_attributeReorderValues_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueReorder_attributeReorderValues_attribute_choices_edges_node;
+}
+
+export interface AttributeValueReorder_attributeReorderValues_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueReorder_attributeReorderValues_attribute_choices_pageInfo;
+  edges: AttributeValueReorder_attributeReorderValues_attribute_choices_edges[];
+}
+
 export interface AttributeValueReorder_attributeReorderValues_attribute {
   __typename: "Attribute";
   id: string;
-  values: (AttributeValueReorder_attributeReorderValues_attribute_values | null)[] | null;
+  choices: AttributeValueReorder_attributeReorderValues_attribute_choices | null;
 }
 
 export interface AttributeValueReorder_attributeReorderValues_errors {
@@ -39,4 +59,8 @@ export interface AttributeValueReorder {
 export interface AttributeValueReorderVariables {
   id: string;
   move: ReorderInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/attributes/types/AttributeValueUpdate.ts

@@ -3,58 +3,52 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AttributeValueCreateInput, AttributeTypeEnum, MeasurementUnitsEnum, AttributeInputTypeEnum, AttributeEntityTypeEnum, AttributeErrorCode } from "./../../types/globalTypes";
+import { AttributeValueCreateInput, AttributeErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: AttributeValueUpdate
 // ====================================================
 
-export interface AttributeValueUpdate_attributeValueUpdate_attribute_metadata {
+export interface AttributeValueUpdate_attributeValueUpdate_attribute_choices_pageInfo {
-  __typename: "MetadataItem";
+  __typename: "PageInfo";
-  key: string;
+  endCursor: string | null;
-  value: string;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
 }
 
-export interface AttributeValueUpdate_attributeValueUpdate_attribute_privateMetadata {
+export interface AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges_node_file {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface AttributeValueUpdate_attributeValueUpdate_attribute_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface AttributeValueUpdate_attributeValueUpdate_attribute_values {
+export interface AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: AttributeValueUpdate_attributeValueUpdate_attribute_values_file | null;
+  file: AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges_node;
+}
+
+export interface AttributeValueUpdate_attributeValueUpdate_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueUpdate_attributeValueUpdate_attribute_choices_pageInfo;
+  edges: AttributeValueUpdate_attributeValueUpdate_attribute_choices_edges[];
+}
+
 export interface AttributeValueUpdate_attributeValueUpdate_attribute {
   __typename: "Attribute";
   id: string;
-  name: string | null;
+  choices: AttributeValueUpdate_attributeValueUpdate_attribute_choices | null;
-  slug: string | null;
-  type: AttributeTypeEnum | null;
-  visibleInStorefront: boolean;
-  filterableInDashboard: boolean;
-  filterableInStorefront: boolean;
-  unit: MeasurementUnitsEnum | null;
-  metadata: (AttributeValueUpdate_attributeValueUpdate_attribute_metadata | null)[];
-  privateMetadata: (AttributeValueUpdate_attributeValueUpdate_attribute_privateMetadata | null)[];
-  availableInGrid: boolean;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  storefrontSearchPosition: number;
-  valueRequired: boolean;
-  values: (AttributeValueUpdate_attributeValueUpdate_attribute_values | null)[] | null;
 }
 
 export interface AttributeValueUpdate_attributeValueUpdate_errors {
@@ -76,4 +70,8 @@ export interface AttributeValueUpdate {
 export interface AttributeValueUpdateVariables {
   id: string;
   input: AttributeValueCreateInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/attributes/utils/data.ts

@@ -96,6 +96,7 @@ export const isFileValueUnused = (
   attributesWithNewFileValue: FormsetData<null, File>,
   existingAttribute:
     | PageDetails_page_attributes
+    | ProductDetails_product_attributes
     | SelectedVariantAttributeFragment
 ) => {
   if (existingAttribute.attribute.inputType !== AttributeInputTypeEnum.FILE) {

src/attributes/utils/handlers.ts

@@ -12,6 +12,8 @@ import {
   FormsetData
 } from "@saleor/hooks/useFormset";
 import { PageDetails_page_attributes } from "@saleor/pages/types/PageDetails";
+import { ProductDetails_product_attributes } from "@saleor/products/types/ProductDetails";
+import { ProductVariantDetails_productVariant_nonSelectionAttributes } from "@saleor/products/types/ProductVariantDetails";
 import { FetchMoreProps, ReorderEvent } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,
@@ -232,7 +234,11 @@ export const handleUploadMultipleFiles = async (
 
 export const handleDeleteMultipleAttributeValues = async (
   attributesWithNewFileValue: FormsetData<null, File>,
-  attributes: PageDetails_page_attributes[],
+  attributes: Array<
+    | PageDetails_page_attributes
+    | ProductDetails_product_attributes
+    | ProductVariantDetails_productVariant_nonSelectionAttributes
+  >,
   deleteAttributeValue: (
     variables: AttributeValueDeleteVariables
   ) => Promise<MutationFetchResult<AttributeValueDelete>>

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -1,9 +1,11 @@
 import { getAttributeData } from "@saleor/attributes/utils/data";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
+import useListSettings from "@saleor/hooks/useListSettings";
+import useLocalPageInfo, { getMaxPage } from "@saleor/hooks/useLocalPageInfo";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getStringOrPlaceholder } from "@saleor/misc";
-import { ReorderEvent } from "@saleor/types";
+import { ListViews, ReorderEvent } from "@saleor/types";
 import { AttributeErrorCode } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
@@ -67,6 +69,18 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
     AttributeErrorFragment[]
   >([]);
 
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.ATTRIBUTE_VALUE_LIST
+  );
+
+  const {
+    pageInfo,
+    pageValues,
+    loadNextPage,
+    loadPreviousPage,
+    loadPage
+  } = useLocalPageInfo(values, settings?.rowNumber);
+
   const [attributeCreate, attributeCreateOpts] = useAttributeCreateMutation({
     onCompleted: data => {
       if (data.attributeCreate.errors.length === 0) {
@@ -83,7 +97,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
-  const id = params.id ? parseInt(params.id, 0) : undefined;
+  const id = params.id
+    ? parseInt(params.id, 0) + pageInfo.startCursor
+    : undefined;
 
   const [openModal, closeModal] = createDialogActionHandlers<
     AttributeAddUrlDialog,
@@ -93,7 +109,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   React.useEffect(() => setValueErrors([]), [params.action]);
 
   const handleValueDelete = () => {
-    setValues(remove(values[params.id], values, areValuesEqual));
+    const newValues = remove(values[id], values, areValuesEqual);
+    setValues(newValues);
     closeModal();
   };
   const handleValueUpdate = (input: AttributeValueEditDialogFormData) => {
@@ -108,12 +125,26 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
     if (isSelected(input, values, areValuesEqual)) {
       setValueErrors([attributeValueAlreadyExistsError]);
     } else {
-      setValues(add(input, values));
+      const newValues = add(input, values);
+      setValues(newValues);
+      const addedToNotVisibleLastPage =
+        newValues.length - pageInfo.startCursor > settings.rowNumber;
+      if (addedToNotVisibleLastPage) {
+        const maxPage = getMaxPage(newValues.length, settings.rowNumber);
+        loadPage(maxPage);
+      }
       closeModal();
     }
   };
   const handleValueReorder = ({ newIndex, oldIndex }: ReorderEvent) =>
-    setValues(move(values[oldIndex], values, areValuesEqual, newIndex));
+    setValues(
+      move(
+        values[pageInfo.startCursor + oldIndex],
+        values,
+        areValuesEqual,
+        pageInfo.startCursor + newIndex
+      )
+    );
 
   const handleCreate = async (data: AttributePageFormData) => {
     const input = getAttributeData(data, values);
@@ -154,17 +185,36 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
           })
         }
         saveButtonBarState={attributeCreateOpts.status}
-        values={values.map((value, valueIndex) => ({
+        values={{
-          __typename: "AttributeValue" as "AttributeValue",
+          __typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection",
-          file: null,
+          pageInfo: {
-          id: valueIndex.toString(),
+            __typename: "PageInfo" as "PageInfo",
-          reference: null,
+            endCursor: "",
-          slug: slugify(value.name).toLowerCase(),
+            hasNextPage: false,
-          sortOrder: valueIndex,
+            hasPreviousPage: false,
-          value: null,
+            startCursor: ""
-          richText: null,
+          },
-          ...value
+          edges: pageValues.map((value, valueIndex) => ({
-        }))}
+            __typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge",
+            cursor: "1",
+            node: {
+              __typename: "AttributeValue" as "AttributeValue",
+              file: null,
+              id: valueIndex.toString(),
+              reference: null,
+              slug: slugify(value.name).toLowerCase(),
+              sortOrder: valueIndex,
+              value: null,
+              richText: null,
+              ...value
+            }
+          }))
+        }}
+        settings={settings}
+        onUpdateListSettings={updateListSettings}
+        pageInfo={pageInfo}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
       />
       <AttributeValueEditDialog
         attributeValue={null}
@@ -186,7 +236,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
             onConfirm={handleValueDelete}
           />
           <AttributeValueEditDialog
-            attributeValue={values[params.id]}
+            attributeValue={values[id]}
             confirmButtonState="default"
             disabled={false}
             errors={valueErrors}

src/attributes/views/AttributeDetails/AttributeDetails.tsx

@@ -1,8 +1,12 @@
+import useListSettings from "@saleor/hooks/useListSettings";
+import useLocalPaginator, {
+  useLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { ReorderEvent } from "@saleor/types";
+import { ListViews, ReorderEvent } from "@saleor/types";
 import getAttributeErrorMessage from "@saleor/utils/errors/attribute";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
@@ -53,12 +57,32 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
     AttributeUrlQueryParams
   >(navigate, params => attributeUrl(id, params), params);
 
+  const { updateListSettings, settings } = useListSettings(
+    ListViews.ATTRIBUTE_VALUE_LIST
+  );
+
+  const [
+    valuesPaginationState,
+    setValuesPaginationState
+  ] = useLocalPaginationState(settings?.rowNumber);
+
   const { data, loading } = useAttributeDetailsQuery({
     variables: {
-      id
+      id,
-    }
+      firstValues: valuesPaginationState.first,
+      lastValues: valuesPaginationState.last,
+      afterValues: valuesPaginationState.after,
+      beforeValues: valuesPaginationState.before
+    },
+    skip: !settings
   });
 
+  const paginateValues = useLocalPaginator(setValuesPaginationState);
+  const { loadNextPage, loadPreviousPage, pageInfo } = paginateValues(
+    data?.attribute?.choices?.pageInfo,
+    valuesPaginationState
+  );
+
   const [attributeDelete, attributeDeleteOpts] = useAttributeDeleteMutation({
     onCompleted: data => {
       if (data.attributeDelete.errors.length === 0) {
@@ -156,12 +180,18 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
           __typename: "AttributeReorderValues",
           attribute: {
             ...data.attribute,
-            values: move(
+            choices: {
-              data.attribute.values[oldIndex],
+              __typename: "AttributeValueCountableConnection",
-              data.attribute.values,
+              pageInfo: {
-              (a, b) => a.id === b.id,
+                ...data.attribute.choices.pageInfo
-              newIndex
+              },
-            )
+              edges: move(
+                data.attribute.choices.edges[oldIndex],
+                data.attribute.choices.edges,
+                (a, b) => a.node.id === b.node.id,
+                newIndex
+              )
+            }
           },
           errors: []
         }
@@ -169,9 +199,13 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
       variables: {
         id,
         move: {
-          id: data.attribute.values[oldIndex].id,
+          id: data.attribute.choices.edges[oldIndex].node.id,
           sortOrder: newIndex - oldIndex
-        }
+        },
+        firstValues: valuesPaginationState.first,
+        lastValues: valuesPaginationState.last,
+        afterValues: valuesPaginationState.after,
+        beforeValues: valuesPaginationState.before
       }
     });
 
@@ -224,7 +258,12 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
           })
         }
         saveButtonBarState={attributeUpdateOpts.status}
-        values={maybe(() => data.attribute.values)}
+        values={maybe(() => data.attribute.choices)}
+        settings={settings}
+        onUpdateListSettings={updateListSettings}
+        pageInfo={pageInfo}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
       />
       <AttributeDeleteDialog
         open={params.action === "remove"}
@@ -244,7 +283,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         open={params.action === "remove-value"}
         name={maybe(
           () =>
-            data.attribute.values.find(value => params.id === value.id).name,
+            data.attribute.choices.edges.find(
+              value => params.id === value.node.id
+            ).node.name,
           "..."
         )}
         useName={true}
@@ -253,7 +294,11 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         onConfirm={() =>
           attributeValueDelete({
             variables: {
-              id: params.id
+              id: params.id,
+              firstValues: valuesPaginationState.first,
+              lastValues: valuesPaginationState.last,
+              afterValues: valuesPaginationState.after,
+              beforeValues: valuesPaginationState.before
             }
           })
         }
@@ -271,14 +316,21 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
           attributeValueCreate({
             variables: {
               id,
-              input
+              input,
+              firstValues: valuesPaginationState.first,
+              lastValues: valuesPaginationState.last,
+              afterValues: valuesPaginationState.after,
+              beforeValues: valuesPaginationState.before
             }
           })
         }
       />
       <AttributeValueEditDialog
-        attributeValue={maybe(() =>
+        attributeValue={maybe(
-          data.attribute.values.find(value => params.id === value.id)
+          () =>
+            data.attribute.choices.edges.find(
+              value => params.id === value.node.id
+            ).node
         )}
         confirmButtonState={attributeValueUpdateOpts.status}
         disabled={loading}
@@ -290,9 +342,14 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         onSubmit={input =>
           attributeValueUpdate({
             variables: {
-              id: data.attribute.values.find(value => params.id === value.id)
+              id: data.attribute.choices.edges.find(
-                .id,
+                value => params.id === value.node.id
-              input
+              ).node.id,
+              input,
+              firstValues: valuesPaginationState.first,
+              lastValues: valuesPaginationState.last,
+              afterValues: valuesPaginationState.after,
+              beforeValues: valuesPaginationState.before
             }
           })
         }

src/components/Attributes/AttributeRow.tsx

@@ -11,17 +11,19 @@ import {
   getMultiDisplayValue,
   getReferenceDisplayValue,
   getRichTextData,
-  getSingleChoices
+  getSingleChoices,
+  getSingleDisplayValue
 } from "@saleor/components/Attributes/utils";
 import FileUploadField from "@saleor/components/FileUploadField";
 import MultiAutocompleteSelectField from "@saleor/components/MultiAutocompleteSelectField";
 import RichTextEditor from "@saleor/components/RichTextEditor";
 import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
 import SortableChipsField from "@saleor/components/SortableChipsField";
+import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
 import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { FormsetChange } from "@saleor/hooks/useFormset";
-import { ReorderEvent } from "@saleor/types";
+import { FetchMoreProps, ReorderEvent } from "@saleor/types";
 import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
@@ -53,10 +55,14 @@ export interface AttributeRowHandlers {
   onReferencesAddClick: (attribute: AttributeInput) => void;
   onReferencesRemove: FormsetChange<string[]>;
   onReferencesReorder: FormsetChange<ReorderEvent>;
+  fetchAttributeValues: (query: string) => void;
+  fetchMoreAttributeValues: FetchMoreProps;
+  onAttributeFocus: (id: string) => void;
 }
 
 interface AttributeRowProps extends AttributeRowHandlers {
   attribute: AttributeInput;
+  attributeValues: AttributeValueFragment[];
   disabled: boolean;
   error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
   loading: boolean;
@@ -64,6 +70,7 @@ interface AttributeRowProps extends AttributeRowHandlers {
 
 const AttributeRow: React.FC<AttributeRowProps> = ({
   attribute,
+  attributeValues,
   disabled,
   error,
   loading,
@@ -72,7 +79,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
   onReferencesAddClick,
   onReferencesRemove,
   onReferencesReorder,
-  onChange
+  onChange,
+  fetchAttributeValues,
+  fetchMoreAttributeValues,
+  onAttributeFocus
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -126,15 +136,9 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       return (
         <BasicAttributeRow label={attribute.label}>
           <SingleAutocompleteSelectField
-            choices={getSingleChoices(attribute.data.values)}
+            choices={getSingleChoices(attributeValues)}
             disabled={disabled}
-            displayValue={
+            displayValue={getSingleDisplayValue(attribute, attributeValues)}
-              attribute.data.values.find(
-                value => value.slug === attribute.value[0]
-              )?.name ||
-              attribute.value[0] ||
-              ""
-            }
             emptyOption={!attribute.data.isRequired}
             error={!!error}
             helperText={getErrorMessage(error, intl)}
@@ -142,7 +146,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             label={intl.formatMessage(messages.valueLabel)}
             value={attribute.value[0]}
             onChange={event => onChange(attribute.id, event.target.value)}
-            allowCustomValues={!attribute.data.isRequired}
+            allowCustomValues={true}
+            fetchChoices={fetchAttributeValues}
+            {...fetchMoreAttributeValues}
+            onFocus={() => onAttributeFocus(attribute.id)}
           />
         </BasicAttributeRow>
       );
@@ -192,8 +199,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       return (
         <BasicAttributeRow label={attribute.label}>
           <MultiAutocompleteSelectField
-            choices={getMultiChoices(attribute.data.values)}
+            choices={getMultiChoices(attributeValues)}
-            displayValues={getMultiDisplayValue(attribute)}
+            displayValues={getMultiDisplayValue(attribute, attributeValues)}
             disabled={disabled}
             error={!!error}
             helperText={getErrorMessage(error, intl)}
@@ -201,7 +208,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             name={`attribute:${attribute.label}`}
             value={attribute.value}
             onChange={event => onMultiChange(attribute.id, event.target.value)}
-            allowCustomValues={!attribute.data.isRequired}
+            allowCustomValues={true}
+            fetchChoices={fetchAttributeValues}
+            {...fetchMoreAttributeValues}
+            onFocus={() => onAttributeFocus(attribute.id)}
           />
         </BasicAttributeRow>
       );

src/components/Attributes/Attributes.stories.tsx

@@ -1,4 +1,5 @@
 import Attributes, { AttributesProps } from "@saleor/components/Attributes";
+import { fetchMoreProps } from "@saleor/fixtures";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -7,6 +8,7 @@ import { ATTRIBUTES, ATTRIBUTES_SELECTED } from "./fixtures";
 
 const props: AttributesProps = {
   attributes: ATTRIBUTES,
+  attributeValues: [],
   disabled: false,
   errors: [],
   loading: false,
@@ -15,7 +17,10 @@ const props: AttributesProps = {
   onMultiChange: () => undefined,
   onReferencesAddClick: () => undefined,
   onReferencesRemove: () => undefined,
-  onReferencesReorder: () => undefined
+  onReferencesReorder: () => undefined,
+  onAttributeFocus: () => undefined,
+  fetchAttributeValues: () => undefined,
+  fetchMoreAttributeValues: fetchMoreProps
 };
 
 storiesOf("Attributes / Attributes", module)

src/components/Attributes/Attributes.tsx

@@ -8,6 +8,7 @@ import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErr
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { FormsetAtomicData } from "@saleor/hooks/useFormset";
 import { makeStyles } from "@saleor/theme";
+import { FetchMoreProps } from "@saleor/types";
 import {
   AttributeEntityTypeEnum,
   AttributeInputTypeEnum,
@@ -34,12 +35,16 @@ export type AttributeInput = FormsetAtomicData<AttributeInputData, string[]>;
 export type AttributeFileInput = FormsetAtomicData<AttributeInputData, File[]>;
 export interface AttributesProps extends AttributeRowHandlers {
   attributes: AttributeInput[];
+  attributeValues: AttributeValueFragment[];
+  fetchAttributeValues: (query: string) => void;
+  fetchMoreAttributeValues: FetchMoreProps;
   disabled: boolean;
   loading: boolean;
   errors: Array<
     ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment
   >;
   title?: React.ReactNode;
+  onAttributeFocus: (id: string) => void;
 }
 
 const useStyles = makeStyles(
@@ -109,6 +114,7 @@ const messages = defineMessages({
 
 const Attributes: React.FC<AttributesProps> = ({
   attributes,
+  attributeValues,
   errors,
   title,
   ...props
@@ -158,6 +164,7 @@ const Attributes: React.FC<AttributesProps> = ({
                   {attributeIndex > 0 && <Hr />}
                   <AttributeRow
                     attribute={attribute}
+                    attributeValues={attributeValues}
                     error={error}
                     {...props}
                   />

src/components/Attributes/utils.ts

@@ -89,17 +89,35 @@ export function getMultiChoices(
   }));
 }
 
+export function getSingleDisplayValue(
+  attribute: AttributeInput,
+  attributeValues: AttributeValueFragment[]
+): string {
+  return (
+    attributeValues.find(value => value.slug === attribute.value[0])?.name ||
+    attribute.data.values.find(value => value.slug === attribute.value[0])
+      ?.name ||
+    attribute.value[0] ||
+    ""
+  );
+}
+
 export function getMultiDisplayValue(
-  attribute: AttributeInput
+  attribute: AttributeInput,
+  attributeValues: AttributeValueFragment[]
 ): MultiAutocompleteChoiceType[] {
   if (!attribute.value) {
     return [];
   }
 
   return attribute.value.map(attributeValue => {
-    const definedAttributeValue = attribute.data.values.find(
+    const definedAttributeValue =
-      definedValue => definedValue.slug === attributeValue
+      attributeValues.find(
-    );
+        definedValue => definedValue.slug === attributeValue
+      ) ||
+      attribute.data.values.find(
+        definedValue => definedValue.slug === attributeValue
+      );
     if (!!definedAttributeValue) {
       return {
         label: definedAttributeValue.name,

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -85,6 +85,7 @@ export interface MultiAutocompleteSelectFieldProps
   testId?: string;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
+  onFocus?: () => void;
 }
 
 const DebounceAutocomplete: React.ComponentType<DebounceProps<
@@ -109,6 +110,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
     testId,
     fetchChoices,
     onChange,
+    onFocus,
     onFetchMore,
     ...rest
   } = props;
@@ -163,7 +165,12 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                     </div>
                   ),
                   id: undefined,
-                  onClick: toggleMenu
+                  onClick: toggleMenu,
+                  onFocus: () => {
+                    if (onFocus) {
+                      onFocus();
+                    }
+                  }
                 }}
                 error={error}
                 helperText={helperText}

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -46,6 +46,7 @@ export interface SingleAutocompleteSelectFieldProps
   InputProps?: InputProps;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
+  onFocus?: () => void;
   FormHelperTextProps?: ExtendedFormHelperTextProps;
   nakedInput?: boolean;
 }
@@ -75,6 +76,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     fetchChoices,
     onChange,
     onFetchMore,
+    onFocus,
     FormHelperTextProps,
     nakedInput = false,
     ...rest
@@ -166,7 +168,12 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
               error,
               id: undefined,
               onBlur: handleBlur,
-              onClick: toggleMenu
+              onClick: toggleMenu,
+              onFocus: () => {
+                if (onFocus) {
+                  onFocus();
+                }
+              }
             };
 
             const nakedInputProps = nakedInput

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -151,7 +151,8 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
   const anchor = React.useRef<HTMLDivElement>();
   const scrollPosition = useElementScroll(anchor);
   const [calledForMore, setCalledForMore] = React.useState(false);
-  const [slice, setSlice] = React.useState(sliceSize);
+  const [slice, setSlice] = React.useState(onFetchMore ? 10000 : sliceSize);
+  const [initialized, setInitialized] = React.useState(false);
 
   const scrolledToBottom = isScrolledToBottom(anchor, scrollPosition, offset);
 
@@ -159,20 +160,27 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
     if (!calledForMore && onFetchMore && scrolledToBottom) {
       onFetchMore();
       setCalledForMore(true);
-    } else if (scrolledToBottom) {
+    } else if (scrolledToBottom && !onFetchMore) {
       setSlice(slice => slice + sliceSize);
     }
   }, [scrolledToBottom]);
 
   React.useEffect(() => {
-    setSlice(sliceSize);
+    if (!onFetchMore) {
-    if (anchor.current?.scrollTo) {
+      setSlice(sliceSize);
+    }
+    if (anchor.current?.scrollTo && !initialized) {
       anchor.current.scrollTo({
         top: 0
       });
+      setInitialized(true);
     }
   }, [choices?.length]);
 
+  React.useEffect(() => {
+    setInitialized(false);
+  }, [inputValue]);
+
   React.useEffect(() => {
     if (calledForMore && !loading) {
       setCalledForMore(false);
@@ -183,6 +191,8 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
     item: ""
   });
 
+  const choicesToDisplay = choices.slice(0, slice);
+
   return (
     <Paper className={classes.root}>
       <div
@@ -244,7 +254,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
             {choices.length > 0 && (!!add || displayCustomValue) && (
               <Hr className={classes.hr} />
             )}
-            {choices.slice(0, slice).map((suggestion, index) => {
+            {choicesToDisplay.map((suggestion, index) => {
               const choiceIndex = getChoiceIndex(
                 index,
                 emptyOption,

src/config.ts

@@ -19,10 +19,12 @@ export const DEFAULT_INITIAL_PAGINATION_DATA: Pagination = {
 };
 
 export const PAGINATE_BY = 20;
+export const VALUES_PAGINATE_BY = 10;
 
 export type ProductListColumns = "productType" | "availability" | "price";
 export interface AppListViewSettings {
   [ListViews.APPS_LIST]: ListSettings;
+  [ListViews.ATTRIBUTE_VALUE_LIST]: ListSettings;
   [ListViews.CATEGORY_LIST]: ListSettings;
   [ListViews.COLLECTION_LIST]: ListSettings;
   [ListViews.CUSTOMER_LIST]: ListSettings;
@@ -44,6 +46,9 @@ export const defaultListSettings: AppListViewSettings = {
   [ListViews.APPS_LIST]: {
     rowNumber: 10
   },
+  [ListViews.ATTRIBUTE_VALUE_LIST]: {
+    rowNumber: 10
+  },
   [ListViews.CATEGORY_LIST]: {
     rowNumber: PAGINATE_BY
   },

src/fragments/attributes.ts

@@ -2,6 +2,7 @@ import gql from "graphql-tag";
 
 import { fileFragment } from "./file";
 import { metadataFragment } from "./metadata";
+import { pageInfoFragment } from "./pageInfo";
 
 export const attributeValueFragment = gql`
   ${fileFragment}
@@ -33,7 +34,6 @@ export const attributeFragment = gql`
 export const attributeDetailsFragment = gql`
   ${attributeFragment}
   ${metadataFragment}
-  ${attributeValueFragment}
   fragment AttributeDetailsFragment on Attribute {
     ...AttributeFragment
     ...MetadataFragment
@@ -43,8 +43,21 @@ export const attributeDetailsFragment = gql`
     unit
     storefrontSearchPosition
     valueRequired
-    values {
+  }
-      ...AttributeValueFragment
+`;
+
+export const attributeValueListFragment = gql`
+  ${attributeValueFragment}
+  ${pageInfoFragment}
+  fragment AttributeValueListFragment on AttributeValueCountableConnection {
+    pageInfo {
+      ...PageInfoFragment
+    }
+    edges {
+      cursor
+      node {
+        ...AttributeValueFragment
+      }
     }
   }
 `;

src/fragments/pages.ts

@@ -1,6 +1,9 @@
 import gql from "graphql-tag";
 
-import { attributeValueFragment } from "./attributes";
+import {
+  attributeValueFragment,
+  attributeValueListFragment
+} from "./attributes";
 import { metadataFragment } from "./metadata";
 
 export const pageFragment = gql`
@@ -14,6 +17,7 @@ export const pageFragment = gql`
 
 export const pageAttributesFragment = gql`
   ${attributeValueFragment}
+  ${attributeValueListFragment}
   fragment PageAttributesFragment on Page {
     attributes {
       attribute {
@@ -24,8 +28,13 @@ export const pageAttributesFragment = gql`
         entityType
         valueRequired
         unit
-        values {
+        choices(
-          ...AttributeValueFragment
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
         }
       }
       values {
@@ -41,8 +50,13 @@ export const pageAttributesFragment = gql`
         inputType
         entityType
         valueRequired
-        values {
+        choices(
-          ...AttributeValueFragment
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
         }
       }
     }

src/fragments/products.ts

@@ -1,6 +1,9 @@
 import gql from "graphql-tag";
 
-import { attributeValueFragment } from "./attributes";
+import {
+  attributeValueFragment,
+  attributeValueListFragment
+} from "./attributes";
 import { metadataFragment } from "./metadata";
 import { taxTypeFragment } from "./taxes";
 import { weightFragment } from "./weight";
@@ -117,6 +120,7 @@ export const productFragment = gql`
 export const productVariantAttributesFragment = gql`
   ${priceRangeFragment}
   ${attributeValueFragment}
+  ${attributeValueListFragment}
   fragment ProductVariantAttributesFragment on Product {
     id
     attributes {
@@ -128,8 +132,13 @@ export const productVariantAttributesFragment = gql`
         entityType
         valueRequired
         unit
-        values {
+        choices(
-          ...AttributeValueFragment
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
         }
       }
       values {
@@ -141,8 +150,13 @@ export const productVariantAttributesFragment = gql`
       variantAttributes(variantSelection: VARIANT_SELECTION) {
         id
         name
-        values {
+        choices(
-          ...AttributeValueFragment
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
         }
       }
     }
@@ -232,7 +246,7 @@ export const productFragmentDetails = gql`
 `;
 
 export const variantAttributeFragment = gql`
-  ${attributeValueFragment}
+  ${attributeValueListFragment}
   fragment VariantAttributeFragment on Attribute {
     id
     name
@@ -241,8 +255,13 @@ export const variantAttributeFragment = gql`
     entityType
     valueRequired
     unit
-    values {
+    choices(
-      ...AttributeValueFragment
+      first: $firstValues
+      after: $afterValues
+      last: $lastValues
+      before: $beforeValues
+    ) {
+      ...AttributeValueListFragment
     }
   }
 `;

src/fragments/translations.ts

@@ -171,17 +171,17 @@ export const attributeTranslationFragment = gql`
       id
       name
       inputType
-      values {
+      # values {
-        id
+      #   id
-        name
+      #   name
-        richText
+      #   richText
-        inputType
+      #   inputType
-        translation(languageCode: $language) {
+      #   translation(languageCode: $language) {
-          id
+      #     id
-          name
+      #     name
-          richText
+      #     richText
-        }
+      #   }
-      }
+      # }
     }
   }
 `;

src/fragments/types/AttributeDetailsFragment.ts

@@ -21,22 +21,6 @@ export interface AttributeDetailsFragment_privateMetadata {
   value: string;
 }
 
-export interface AttributeDetailsFragment_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface AttributeDetailsFragment_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: AttributeDetailsFragment_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface AttributeDetailsFragment {
   __typename: "Attribute";
   id: string;
@@ -54,5 +38,4 @@ export interface AttributeDetailsFragment {
   entityType: AttributeEntityTypeEnum | null;
   storefrontSearchPosition: number;
   valueRequired: boolean;
-  values: (AttributeDetailsFragment_values | null)[] | null;
 }

src/fragments/types/AttributeValueListFragment.ts

@@ -0,0 +1,44 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: AttributeValueListFragment
+// ====================================================
+
+export interface AttributeValueListFragment_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface AttributeValueListFragment_edges_node_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface AttributeValueListFragment_edges_node {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: AttributeValueListFragment_edges_node_file | null;
+  reference: string | null;
+  richText: any | null;
+}
+
+export interface AttributeValueListFragment_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: AttributeValueListFragment_edges_node;
+}
+
+export interface AttributeValueListFragment {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: AttributeValueListFragment_pageInfo;
+  edges: AttributeValueListFragment_edges[];
+}

src/fragments/types/PageAttributesFragment.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL fragment: PageAttributesFragment
 // ====================================================
 
-export interface PageAttributesFragment_attributes_attribute_values_file {
+export interface PageAttributesFragment_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageAttributesFragment_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageAttributesFragment_attributes_attribute_values {
+export interface PageAttributesFragment_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageAttributesFragment_attributes_attribute_values_file | null;
+  file: PageAttributesFragment_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageAttributesFragment_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageAttributesFragment_attributes_attribute_choices_edges_node;
+}
+
+export interface PageAttributesFragment_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageAttributesFragment_attributes_attribute_choices_pageInfo;
+  edges: PageAttributesFragment_attributes_attribute_choices_edges[];
+}
+
 export interface PageAttributesFragment_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface PageAttributesFragment_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (PageAttributesFragment_attributes_attribute_values | null)[] | null;
+  choices: PageAttributesFragment_attributes_attribute_choices | null;
 }
 
 export interface PageAttributesFragment_attributes_values_file {
@@ -59,22 +79,42 @@ export interface PageAttributesFragment_attributes {
   values: (PageAttributesFragment_attributes_values | null)[];
 }
 
-export interface PageAttributesFragment_pageType_attributes_values_file {
+export interface PageAttributesFragment_pageType_attributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageAttributesFragment_pageType_attributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageAttributesFragment_pageType_attributes_values {
+export interface PageAttributesFragment_pageType_attributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageAttributesFragment_pageType_attributes_values_file | null;
+  file: PageAttributesFragment_pageType_attributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageAttributesFragment_pageType_attributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageAttributesFragment_pageType_attributes_choices_edges_node;
+}
+
+export interface PageAttributesFragment_pageType_attributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageAttributesFragment_pageType_attributes_choices_pageInfo;
+  edges: PageAttributesFragment_pageType_attributes_choices_edges[];
+}
+
 export interface PageAttributesFragment_pageType_attributes {
   __typename: "Attribute";
   id: string;
@@ -82,7 +122,7 @@ export interface PageAttributesFragment_pageType_attributes {
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (PageAttributesFragment_pageType_attributes_values | null)[] | null;
+  choices: PageAttributesFragment_pageType_attributes_choices | null;
 }
 
 export interface PageAttributesFragment_pageType {

src/fragments/types/PageDetailsFragment.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL fragment: PageDetailsFragment
 // ====================================================
 
-export interface PageDetailsFragment_attributes_attribute_values_file {
+export interface PageDetailsFragment_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageDetailsFragment_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageDetailsFragment_attributes_attribute_values {
+export interface PageDetailsFragment_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageDetailsFragment_attributes_attribute_values_file | null;
+  file: PageDetailsFragment_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageDetailsFragment_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageDetailsFragment_attributes_attribute_choices_edges_node;
+}
+
+export interface PageDetailsFragment_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageDetailsFragment_attributes_attribute_choices_pageInfo;
+  edges: PageDetailsFragment_attributes_attribute_choices_edges[];
+}
+
 export interface PageDetailsFragment_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface PageDetailsFragment_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (PageDetailsFragment_attributes_attribute_values | null)[] | null;
+  choices: PageDetailsFragment_attributes_attribute_choices | null;
 }
 
 export interface PageDetailsFragment_attributes_values_file {
@@ -59,22 +79,42 @@ export interface PageDetailsFragment_attributes {
   values: (PageDetailsFragment_attributes_values | null)[];
 }
 
-export interface PageDetailsFragment_pageType_attributes_values_file {
+export interface PageDetailsFragment_pageType_attributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageDetailsFragment_pageType_attributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageDetailsFragment_pageType_attributes_values {
+export interface PageDetailsFragment_pageType_attributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageDetailsFragment_pageType_attributes_values_file | null;
+  file: PageDetailsFragment_pageType_attributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageDetailsFragment_pageType_attributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageDetailsFragment_pageType_attributes_choices_edges_node;
+}
+
+export interface PageDetailsFragment_pageType_attributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageDetailsFragment_pageType_attributes_choices_pageInfo;
+  edges: PageDetailsFragment_pageType_attributes_choices_edges[];
+}
+
 export interface PageDetailsFragment_pageType_attributes {
   __typename: "Attribute";
   id: string;
@@ -82,7 +122,7 @@ export interface PageDetailsFragment_pageType_attributes {
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (PageDetailsFragment_pageType_attributes_values | null)[] | null;
+  choices: PageDetailsFragment_pageType_attributes_choices | null;
 }
 
 export interface PageDetailsFragment_pageType {

src/fragments/types/Product.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum,
 // GraphQL fragment: Product
 // ====================================================
 
-export interface Product_attributes_attribute_values_file {
+export interface Product_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface Product_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface Product_attributes_attribute_values {
+export interface Product_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: Product_attributes_attribute_values_file | null;
+  file: Product_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface Product_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: Product_attributes_attribute_choices_edges_node;
+}
+
+export interface Product_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: Product_attributes_attribute_choices_pageInfo;
+  edges: Product_attributes_attribute_choices_edges[];
+}
+
 export interface Product_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface Product_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (Product_attributes_attribute_values | null)[] | null;
+  choices: Product_attributes_attribute_choices | null;
 }
 
 export interface Product_attributes_values_file {
@@ -59,27 +79,47 @@ export interface Product_attributes {
   values: (Product_attributes_values | null)[];
 }
 
-export interface Product_productType_variantAttributes_values_file {
+export interface Product_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface Product_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface Product_productType_variantAttributes_values {
+export interface Product_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: Product_productType_variantAttributes_values_file | null;
+  file: Product_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface Product_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: Product_productType_variantAttributes_choices_edges_node;
+}
+
+export interface Product_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: Product_productType_variantAttributes_choices_pageInfo;
+  edges: Product_productType_variantAttributes_choices_edges[];
+}
+
 export interface Product_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (Product_productType_variantAttributes_values | null)[] | null;
+  choices: Product_productType_variantAttributes_choices | null;
 }
 
 export interface Product_productType_taxType {

src/fragments/types/ProductVariant.ts

@@ -21,22 +21,42 @@ export interface ProductVariant_privateMetadata {
   value: string;
 }
 
-export interface ProductVariant_selectionAttributes_attribute_values_file {
+export interface ProductVariant_selectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariant_selectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariant_selectionAttributes_attribute_values {
+export interface ProductVariant_selectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariant_selectionAttributes_attribute_values_file | null;
+  file: ProductVariant_selectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariant_selectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariant_selectionAttributes_attribute_choices_edges_node;
+}
+
+export interface ProductVariant_selectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariant_selectionAttributes_attribute_choices_pageInfo;
+  edges: ProductVariant_selectionAttributes_attribute_choices_edges[];
+}
+
 export interface ProductVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -46,7 +66,7 @@ export interface ProductVariant_selectionAttributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariant_selectionAttributes_attribute_values | null)[] | null;
+  choices: ProductVariant_selectionAttributes_attribute_choices | null;
 }
 
 export interface ProductVariant_selectionAttributes_values_file {
@@ -71,22 +91,42 @@ export interface ProductVariant_selectionAttributes {
   values: (ProductVariant_selectionAttributes_values | null)[];
 }
 
-export interface ProductVariant_nonSelectionAttributes_attribute_values_file {
+export interface ProductVariant_nonSelectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariant_nonSelectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariant_nonSelectionAttributes_attribute_values {
+export interface ProductVariant_nonSelectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariant_nonSelectionAttributes_attribute_values_file | null;
+  file: ProductVariant_nonSelectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariant_nonSelectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariant_nonSelectionAttributes_attribute_choices_edges_node;
+}
+
+export interface ProductVariant_nonSelectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariant_nonSelectionAttributes_attribute_choices_pageInfo;
+  edges: ProductVariant_nonSelectionAttributes_attribute_choices_edges[];
+}
+
 export interface ProductVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -96,7 +136,7 @@ export interface ProductVariant_nonSelectionAttributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariant_nonSelectionAttributes_attribute_values | null)[] | null;
+  choices: ProductVariant_nonSelectionAttributes_attribute_choices | null;
 }
 
 export interface ProductVariant_nonSelectionAttributes_values_file {

src/fragments/types/ProductVariantAttributesFragment.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL fragment: ProductVariantAttributesFragment
 // ====================================================
 
-export interface ProductVariantAttributesFragment_attributes_attribute_values_file {
+export interface ProductVariantAttributesFragment_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantAttributesFragment_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantAttributesFragment_attributes_attribute_values {
+export interface ProductVariantAttributesFragment_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantAttributesFragment_attributes_attribute_values_file | null;
+  file: ProductVariantAttributesFragment_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantAttributesFragment_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantAttributesFragment_attributes_attribute_choices_edges_node;
+}
+
+export interface ProductVariantAttributesFragment_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantAttributesFragment_attributes_attribute_choices_pageInfo;
+  edges: ProductVariantAttributesFragment_attributes_attribute_choices_edges[];
+}
+
 export interface ProductVariantAttributesFragment_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface ProductVariantAttributesFragment_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantAttributesFragment_attributes_attribute_values | null)[] | null;
+  choices: ProductVariantAttributesFragment_attributes_attribute_choices | null;
 }
 
 export interface ProductVariantAttributesFragment_attributes_values_file {
@@ -59,27 +79,47 @@ export interface ProductVariantAttributesFragment_attributes {
   values: (ProductVariantAttributesFragment_attributes_values | null)[];
 }
 
-export interface ProductVariantAttributesFragment_productType_variantAttributes_values_file {
+export interface ProductVariantAttributesFragment_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantAttributesFragment_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantAttributesFragment_productType_variantAttributes_values {
+export interface ProductVariantAttributesFragment_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantAttributesFragment_productType_variantAttributes_values_file | null;
+  file: ProductVariantAttributesFragment_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantAttributesFragment_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantAttributesFragment_productType_variantAttributes_choices_edges_node;
+}
+
+export interface ProductVariantAttributesFragment_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantAttributesFragment_productType_variantAttributes_choices_pageInfo;
+  edges: ProductVariantAttributesFragment_productType_variantAttributes_choices_edges[];
+}
+
 export interface ProductVariantAttributesFragment_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (ProductVariantAttributesFragment_productType_variantAttributes_values | null)[] | null;
+  choices: ProductVariantAttributesFragment_productType_variantAttributes_choices | null;
 }
 
 export interface ProductVariantAttributesFragment_productType {

src/fragments/types/SelectedVariantAttributeFragment.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL fragment: SelectedVariantAttributeFragment
 // ====================================================
 
-export interface SelectedVariantAttributeFragment_attribute_values_file {
+export interface SelectedVariantAttributeFragment_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface SelectedVariantAttributeFragment_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface SelectedVariantAttributeFragment_attribute_values {
+export interface SelectedVariantAttributeFragment_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: SelectedVariantAttributeFragment_attribute_values_file | null;
+  file: SelectedVariantAttributeFragment_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface SelectedVariantAttributeFragment_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: SelectedVariantAttributeFragment_attribute_choices_edges_node;
+}
+
+export interface SelectedVariantAttributeFragment_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: SelectedVariantAttributeFragment_attribute_choices_pageInfo;
+  edges: SelectedVariantAttributeFragment_attribute_choices_edges[];
+}
+
 export interface SelectedVariantAttributeFragment_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface SelectedVariantAttributeFragment_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SelectedVariantAttributeFragment_attribute_values | null)[] | null;
+  choices: SelectedVariantAttributeFragment_attribute_choices | null;
 }
 
 export interface SelectedVariantAttributeFragment_values_file {

src/fragments/types/VariantAttributeFragment.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL fragment: VariantAttributeFragment
 // ====================================================
 
-export interface VariantAttributeFragment_values_file {
+export interface VariantAttributeFragment_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface VariantAttributeFragment_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantAttributeFragment_values {
+export interface VariantAttributeFragment_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantAttributeFragment_values_file | null;
+  file: VariantAttributeFragment_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface VariantAttributeFragment_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: VariantAttributeFragment_choices_edges_node;
+}
+
+export interface VariantAttributeFragment_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: VariantAttributeFragment_choices_pageInfo;
+  edges: VariantAttributeFragment_choices_edges[];
+}
+
 export interface VariantAttributeFragment {
   __typename: "Attribute";
   id: string;
@@ -34,5 +54,5 @@ export interface VariantAttributeFragment {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (VariantAttributeFragment_values | null)[] | null;
+  choices: VariantAttributeFragment_choices | null;
 }

src/hooks/useLocalPageInfo.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+
+export interface PageInfo {
+  endCursor: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: number;
+}
+
+export function getMaxPage(valuesCount: number, paginateBy: number) {
+  return Math.floor(Math.max(0, valuesCount - 1) / paginateBy);
+}
+
+function useLocalPageInfo<T>(values: T[], paginateBy: number) {
+  const [page, setPage] = useState(0);
+
+  const maxPage = getMaxPage(values.length, paginateBy);
+
+  useEffect(() => {
+    if (page > maxPage) {
+      setPage(maxPage);
+    }
+  }, [values.length, paginateBy]);
+
+  const hasPreviousPage = page > 0;
+  const hasNextPage = page < maxPage;
+
+  const startCursor = page * paginateBy;
+  const endCursor = hasNextPage
+    ? startCursor + paginateBy - 1
+    : Math.max(0, values.length - 1);
+
+  const pageValues = values.slice(startCursor, endCursor + 1);
+
+  const loadPreviousPage = () => setPage(page - 1);
+  const loadNextPage = () => setPage(page + 1);
+
+  return {
+    pageInfo: {
+      hasNextPage,
+      hasPreviousPage,
+      endCursor,
+      startCursor
+    },
+    pageValues,
+    loadNextPage,
+    loadPreviousPage,
+    loadPage: setPage
+  };
+}
+export default useLocalPageInfo;

src/hooks/useLocalPaginator.ts

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+
+export interface PageInfo {
+  endCursor: string;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string;
+}
+
+export interface PaginationState {
+  after?: string;
+  before?: string;
+  first?: number;
+  last?: number;
+}
+
+export function useLocalPaginationState(
+  paginateBy: number
+): [PaginationState, (paginationState: PaginationState) => void] {
+  const [state, setState] = useState<PaginationState>({
+    first: paginateBy
+  });
+
+  const setPaginationState = (paginationState: PaginationState) => {
+    if (paginationState.after) {
+      setState({
+        after: paginationState.after,
+        first: paginateBy
+      });
+    } else if (paginationState.before) {
+      setState({
+        before: paginationState.before,
+        last: paginateBy
+      });
+    } else {
+      setState({
+        first: paginateBy
+      });
+    }
+  };
+
+  useEffect(() => {
+    setPaginationState(state);
+  }, [paginateBy]);
+
+  return [state, setPaginationState];
+}
+
+function useLocalPaginator(
+  setPaginationState: (paginationState: PaginationState) => void
+) {
+  function paginate(pageInfo: PageInfo, paginationState: PaginationState) {
+    const loadNextPage = () =>
+      setPaginationState({
+        ...paginationState,
+        after: pageInfo.endCursor,
+        before: undefined
+      });
+
+    const loadPreviousPage = () =>
+      setPaginationState({
+        ...paginationState,
+        after: undefined,
+        before: pageInfo.startCursor
+      });
+
+    const newPageInfo = pageInfo
+      ? {
+          ...pageInfo,
+          hasNextPage: !!paginationState.before || pageInfo.hasNextPage,
+          hasPreviousPage: !!paginationState.after || pageInfo.hasPreviousPage
+        }
+      : undefined;
+
+    return {
+      loadNextPage,
+      loadPreviousPage,
+      pageInfo: newPageInfo
+    };
+  }
+  return paginate;
+}
+export default useLocalPaginator;

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -18,10 +18,13 @@ import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErr
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { PageType_pageType } from "@saleor/pages/types/PageType";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 import { SearchPageTypes_search_edges_node } from "@saleor/searches/types/SearchPageTypes";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { FetchMoreProps } from "@saleor/types";
+import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -39,6 +42,8 @@ export interface PageDetailsPageProps {
   referenceProducts?: SearchProducts_search_edges_node[];
   allowEmptySlug?: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
+  selectedPageType?: PageType_pageType;
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   onBack: () => void;
   onRemove: () => void;
   onSubmit: (data: PageData) => SubmitPromise;
@@ -50,17 +55,23 @@ export interface PageDetailsPageProps {
   fetchMoreReferencePages?: FetchMoreProps;
   fetchReferenceProducts?: (data: string) => void;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  fetchAttributeValues: (query: string) => void;
+  fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
+  onSelectPageType?: (pageTypeId: string) => void;
+  onAttributeFocus: (id: string) => void;
 }
 
 const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   loading,
   errors,
   page,
-  pageTypes,
+  pageTypes: pageTypeChoiceList,
   referencePages = [],
   referenceProducts = [],
   saveButtonBarState,
+  selectedPageType,
+  attributeValues,
   onBack,
   onRemove,
   onSubmit,
@@ -72,7 +83,11 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   fetchMoreReferencePages,
   fetchReferenceProducts,
   fetchMoreReferenceProducts,
-  onCloseDialog
+  fetchAttributeValues,
+  fetchMoreAttributeValues,
+  onCloseDialog,
+  onSelectPageType,
+  onAttributeFocus
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -81,6 +96,10 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
 
   const canOpenAssignReferencesAttributeDialog = !!assignReferencesAttributeId;
 
+  const pageTypes = pageTypeChoiceList
+    ? mapNodeToChoice(pageTypeChoiceList)
+    : [];
+
   const handleAssignReferenceAttribute = (
     attributeValues: string[],
     data: PageData,
@@ -97,10 +116,15 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
     onCloseDialog();
   };
 
+  const handleSelectPageType = (pageTypeId: string) =>
+    onSelectPageType && onSelectPageType(pageTypeId);
+
   return (
     <PageForm
       page={page}
-      pageTypes={pageTypes}
+      pageTypes={pageTypeChoiceList}
+      selectedPageType={selectedPageType}
+      onSelectPageType={handleSelectPageType}
       referencePages={referencePages}
       referenceProducts={referenceProducts}
       fetchReferencePages={fetchReferencePages}
@@ -110,7 +134,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
       assignReferencesAttributeId={assignReferencesAttributeId}
       onSubmit={onSubmit}
     >
-      {({ change, data, pageType, handlers, hasChanged, submit }) => (
+      {({ change, data, handlers, hasChanged, submit }) => (
         <Container>
           <AppHeader onBack={onBack}>
             {intl.formatMessage(sectionNames.pages)}
@@ -155,6 +179,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
               {data.attributes.length > 0 && (
                 <Attributes
                   attributes={data.attributes}
+                  attributeValues={attributeValues}
                   disabled={loading}
                   loading={loading}
                   errors={errors}
@@ -164,6 +189,9 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                   onReferencesRemove={handlers.selectAttributeReference}
                   onReferencesAddClick={onAssignReferencesClick}
                   onReferencesReorder={handlers.reorderAttributeValue}
+                  fetchAttributeValues={fetchAttributeValues}
+                  fetchMoreAttributeValues={fetchMoreAttributeValues}
+                  onAttributeFocus={onAttributeFocus}
                 />
               )}
               <CardSpacer />
@@ -202,8 +230,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                 errors={errors}
                 disabled={loading}
                 pageTypes={pageTypes}
-                pageType={pageType}
+                pageType={data.pageType}
-                pageTypeInputDisplayValue={pageType?.name || ""}
+                pageTypeInputDisplayValue={data.pageType?.name || ""}
                 onPageTypeChange={handlers.selectPageType}
                 fetchPageTypes={fetchPageTypes}
                 fetchMorePageTypes={fetchMorePageTypes}

src/pages/components/PageDetailsPage/form.tsx

@@ -12,20 +12,23 @@ import {
 import { AttributeInput } from "@saleor/components/Attributes";
 import { MetadataFormData } from "@saleor/components/Metadata";
 import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
-import { PageTypeFragment } from "@saleor/fragments/types/PageTypeFragment";
 import useForm, { FormChange, SubmitPromise } from "@saleor/hooks/useForm";
 import useFormset, {
   FormsetChange,
   FormsetData
 } from "@saleor/hooks/useFormset";
-import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import {
   PageDetails_page,
   PageDetails_page_pageType
 } from "@saleor/pages/types/PageDetails";
-import { getAttributeInputFromPage } from "@saleor/pages/utils/data";
+import { PageType_pageType } from "@saleor/pages/types/PageType";
+import {
+  getAttributeInputFromPage,
+  getAttributeInputFromPageType
+} from "@saleor/pages/utils/data";
 import { createPageTypeSelectHandler } from "@saleor/pages/utils/handlers";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
+import { SearchPageTypes_search_edges_node } from "@saleor/searches/types/SearchPageTypes";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { FetchMoreProps, ReorderEvent } from "@saleor/types";
 import getPublicationData from "@saleor/utils/data/getPublicationData";
@@ -43,7 +46,7 @@ export interface PageFormData extends MetadataFormData {
   seoTitle: string;
   slug: string;
   title: string;
-  pageType: string;
+  pageType: PageType_pageType | PageDetails_page_pageType;
 }
 export interface PageData extends PageFormData {
   attributes: AttributeInput[];
@@ -71,14 +74,13 @@ export interface PageUpdateHandlers {
 export interface UsePageUpdateFormResult {
   change: FormChange;
   data: PageData;
-  pageType: PageTypeFragment;
   handlers: PageUpdateHandlers;
   hasChanged: boolean;
   submit: () => void;
 }
 
 export interface UsePageFormOpts {
-  pageTypes?: PageDetails_page_pageType[];
+  pageTypes?: SearchPageTypes_search_edges_node[];
   referencePages: SearchPages_search_edges_node[];
   referenceProducts: SearchProducts_search_edges_node[];
   fetchReferencePages?: (data: string) => void;
@@ -86,12 +88,13 @@ export interface UsePageFormOpts {
   fetchReferenceProducts?: (data: string) => void;
   fetchMoreReferenceProducts?: FetchMoreProps;
   assignReferencesAttributeId?: string;
+  selectedPageType?: PageType_pageType;
+  onSelectPageType: (pageTypeId: string) => void;
 }
 
 export interface PageFormProps extends UsePageFormOpts {
   children: (props: UsePageUpdateFormResult) => React.ReactNode;
   page: PageDetails_page;
-  pageTypes?: PageDetails_page_pageType[];
   onSubmit: (data: PageData) => SubmitPromise;
 }
 
@@ -105,13 +108,19 @@ function usePageForm(
 
   const pageExists = page !== null;
 
-  const attributes = useFormset(getAttributeInputFromPage(page));
+  const attributes = useFormset(
+    pageExists
+      ? getAttributeInputFromPage(page)
+      : opts.selectedPageType
+      ? getAttributeInputFromPageType(opts.selectedPageType)
+      : []
+  );
   const attributesWithNewFileValue = useFormset<null, File>([]);
 
   const form = useForm<PageFormData>({
     isPublished: page?.isPublished,
     metadata: pageExists ? page?.metadata?.map(mapMetadataItemToInput) : [],
-    pageType: page?.pageType.id || "",
+    pageType: null,
     privateMetadata: pageExists
       ? page?.privateMetadata?.map(mapMetadataItemToInput)
       : [],
@@ -126,10 +135,6 @@ function usePageForm(
     triggerChange
   });
 
-  const [pageType, setPageType] = useStateFromProps<PageTypeFragment>(
-    page?.pageType || null
-  );
-
   const {
     isMetadataModified,
     isPrivateMetadataModified,
@@ -141,11 +146,9 @@ function usePageForm(
     triggerChange();
   };
   const changeMetadata = makeMetadataChangeHandler(handleChange);
-  const selectPageType = createPageTypeSelectHandler(
+  const handlePageTypeSelect = createPageTypeSelectHandler(
-    handleChange,
+    opts.onSelectPageType,
-    attributes.set,
+    triggerChange
-    setPageType,
-    opts.pageTypes
   );
   const handleAttributeChange = createAttributeChangeHandler(
     attributes.change,
@@ -194,7 +197,8 @@ function usePageForm(
       opts.referencePages,
       opts.referenceProducts
     ),
-    content: content.current
+    content: content.current,
+    pageType: pageExists ? page?.pageType : opts.selectedPageType
   });
 
   const getSubmitData = (): PageSubmitData => ({
@@ -232,10 +236,9 @@ function usePageForm(
       selectAttributeFile: handleAttributeFileChange,
       selectAttributeMulti: handleAttributeMultiChange,
       selectAttributeReference: handleAttributeReferenceChange,
-      selectPageType
+      selectPageType: handlePageTypeSelect
     },
     hasChanged: changed,
-    pageType,
     submit
   };
 }

src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx

@@ -1,6 +1,8 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
-import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
+import SingleAutocompleteSelectField, {
+  SingleAutocompleteChoiceType
+} from "@saleor/components/SingleAutocompleteSelectField";
 import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
 import { PageTypeFragment } from "@saleor/fragments/types/PageTypeFragment";
 import { FormChange } from "@saleor/hooks/useForm";
@@ -8,7 +10,6 @@ import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import { getFormErrors } from "@saleor/utils/errors";
 import getPageErrorMessage from "@saleor/utils/errors/page";
-import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -21,7 +22,7 @@ export interface PageOrganizeContentProps {
   pageTypeInputDisplayValue?: string;
   errors: PageErrorFragment[];
   disabled: boolean;
-  pageTypes: PageTypeFragment[];
+  pageTypes: SingleAutocompleteChoiceType[];
   onPageTypeChange?: FormChange;
   fetchPageTypes?: (data: string) => void;
   fetchMorePageTypes?: FetchMoreProps;
@@ -76,8 +77,8 @@ const PageOrganizeContent: React.FC<PageOrganizeContentProps> = props => {
             helperText={getPageErrorMessage(formErrors.pageType, intl)}
             name={"pageType" as keyof PageFormData}
             onChange={onPageTypeChange}
-            value={data.pageType}
+            value={data.pageType?.id}
-            choices={pageTypes ? mapNodeToChoice(pageTypes) : []}
+            choices={pageTypes}
             InputProps={{
               autoComplete: "off"
             }}

src/pages/fixtures.ts

@@ -49,35 +49,57 @@ export const page: PageDetails_page = {
         inputType: AttributeInputTypeEnum.DROPDOWN,
         valueRequired: false,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            id: "QXR0cmlidXRlVmFsdWU6ODc=",
+          pageInfo: {
-            name: "Suzanne Ellison",
+            __typename: "PageInfo",
-            slug: "suzanne-ellison",
+            endCursor: "",
-            reference: null,
+            hasNextPage: false,
-            __typename: "AttributeValue",
+            hasPreviousPage: false,
-            file: null,
+            startCursor: ""
-            richText: null
           },
-          {
+          edges: [
-            id: "QXR0cmlidXRlVmFsdWU6ODg=",
+            {
-            name: "Dennis Perkins",
+              __typename: "AttributeValueCountableEdge",
-            slug: "dennis-perkins",
+              cursor: "",
-            reference: null,
+              node: {
-            __typename: "AttributeValue",
+                id: "QXR0cmlidXRlVmFsdWU6ODc=",
-            file: null,
+                name: "Suzanne Ellison",
-            richText: null
+                slug: "suzanne-ellison",
-          },
+                reference: null,
-          {
+                __typename: "AttributeValue",
-            id: "QXR0cmlidXRlVmFsdWU6ODk=",
+                file: null,
-            name: "Dylan Lamb",
+                richText: null
-            slug: "dylan-lamb",
+              }
-            reference: null,
+            },
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          }
+              node: {
-        ],
+                id: "QXR0cmlidXRlVmFsdWU6ODg=",
+                name: "Dennis Perkins",
+                slug: "dennis-perkins",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6ODk=",
+                name: "Dylan Lamb",
+                slug: "dylan-lamb",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            }
+          ]
+        },
         __typename: "Attribute"
       },
       values: [
@@ -102,44 +124,70 @@ export const page: PageDetails_page = {
         inputType: AttributeInputTypeEnum.MULTISELECT,
         valueRequired: false,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            id: "QXR0cmlidXRlVmFsdWU6OTA=",
+          pageInfo: {
-            name: "Security",
+            __typename: "PageInfo",
-            slug: "security",
+            endCursor: "",
-            reference: null,
+            hasNextPage: false,
-            __typename: "AttributeValue",
+            hasPreviousPage: false,
-            file: null,
+            startCursor: ""
-            richText: null
           },
-          {
+          edges: [
-            id: "QXR0cmlidXRlVmFsdWU6OTE=",
+            {
-            name: "Support",
+              __typename: "AttributeValueCountableEdge",
-            slug: "support",
+              cursor: "",
-            reference: null,
+              node: {
-            __typename: "AttributeValue",
+                id: "QXR0cmlidXRlVmFsdWU6OTA=",
-            file: null,
+                name: "Security",
-            richText: null
+                slug: "security",
-          },
+                reference: null,
-          {
+                __typename: "AttributeValue",
-            id: "QXR0cmlidXRlVmFsdWU6OTI=",
+                file: null,
-            name: "Medical",
+                richText: null
-            slug: "medical",
+              }
-            reference: null,
+            },
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          },
+              node: {
-          {
+                id: "QXR0cmlidXRlVmFsdWU6OTE=",
-            id: "QXR0cmlidXRlVmFsdWU6OTM=",
+                name: "Support",
-            name: "General",
+                slug: "support",
-            slug: "general",
+                reference: null,
-            reference: null,
+                __typename: "AttributeValue",
-            __typename: "AttributeValue",
+                file: null,
-            file: null,
+                richText: null
-            richText: null
+              }
-          }
+            },
-        ],
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6OTI=",
+                name: "Medical",
+                slug: "medical",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6OTM=",
+                name: "General",
+                slug: "general",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            }
+          ]
+        },
         __typename: "Attribute"
       },
       values: [
@@ -177,35 +225,57 @@ export const page: PageDetails_page = {
         entityType: null,
         inputType: AttributeInputTypeEnum.DROPDOWN,
         valueRequired: false,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            id: "QXR0cmlidXRlVmFsdWU6ODc=",
+          pageInfo: {
-            name: "Suzanne Ellison",
+            __typename: "PageInfo",
-            slug: "suzanne-ellison",
+            endCursor: "",
-            reference: null,
+            hasNextPage: false,
-            __typename: "AttributeValue",
+            hasPreviousPage: false,
-            file: null,
+            startCursor: ""
-            richText: null
           },
-          {
+          edges: [
-            id: "QXR0cmlidXRlVmFsdWU6ODg=",
+            {
-            name: "Dennis Perkins",
+              __typename: "AttributeValueCountableEdge",
-            slug: "dennis-perkins",
+              cursor: "",
-            reference: null,
+              node: {
-            __typename: "AttributeValue",
+                id: "QXR0cmlidXRlVmFsdWU6ODc=",
-            file: null,
+                name: "Suzanne Ellison",
-            richText: null
+                slug: "suzanne-ellison",
-          },
+                reference: null,
-          {
+                __typename: "AttributeValue",
-            id: "QXR0cmlidXRlVmFsdWU6ODk=",
+                file: null,
-            name: "Dylan Lamb",
+                richText: null
-            slug: "dylan-lamb",
+              }
-            reference: null,
+            },
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          }
+              node: {
-        ],
+                id: "QXR0cmlidXRlVmFsdWU6ODg=",
+                name: "Dennis Perkins",
+                slug: "dennis-perkins",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6ODk=",
+                name: "Dylan Lamb",
+                slug: "dylan-lamb",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            }
+          ]
+        },
         __typename: "Attribute"
       },
       {
@@ -214,44 +284,70 @@ export const page: PageDetails_page = {
         entityType: null,
         inputType: AttributeInputTypeEnum.MULTISELECT,
         valueRequired: false,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            id: "QXR0cmlidXRlVmFsdWU6OTA=",
+          pageInfo: {
-            name: "Security",
+            __typename: "PageInfo",
-            slug: "security",
+            endCursor: "",
-            reference: null,
+            hasNextPage: false,
-            __typename: "AttributeValue",
+            hasPreviousPage: false,
-            file: null,
+            startCursor: ""
-            richText: null
           },
-          {
+          edges: [
-            id: "QXR0cmlidXRlVmFsdWU6OTE=",
+            {
-            name: "Support",
+              __typename: "AttributeValueCountableEdge",
-            slug: "support",
+              cursor: "",
-            reference: null,
+              node: {
-            __typename: "AttributeValue",
+                id: "QXR0cmlidXRlVmFsdWU6OTA=",
-            file: null,
+                name: "Security",
-            richText: null
+                slug: "security",
-          },
+                reference: null,
-          {
+                __typename: "AttributeValue",
-            id: "QXR0cmlidXRlVmFsdWU6OTI=",
+                file: null,
-            name: "Medical",
+                richText: null
-            slug: "medical",
+              }
-            reference: null,
+            },
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          },
+              node: {
-          {
+                id: "QXR0cmlidXRlVmFsdWU6OTE=",
-            id: "QXR0cmlidXRlVmFsdWU6OTM=",
+                name: "Support",
-            name: "General",
+                slug: "support",
-            slug: "general",
+                reference: null,
-            reference: null,
+                __typename: "AttributeValue",
-            __typename: "AttributeValue",
+                file: null,
-            file: null,
+                richText: null
-            richText: null
+              }
-          }
+            },
-        ],
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6OTI=",
+                name: "Medical",
+                slug: "medical",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                id: "QXR0cmlidXRlVmFsdWU6OTM=",
+                name: "General",
+                slug: "general",
+                reference: null,
+                __typename: "AttributeValue",
+                file: null,
+                richText: null
+              }
+            }
+          ]
+        },
         __typename: "Attribute"
       }
     ]

src/pages/mutations.ts

@@ -20,7 +20,6 @@ import { PageRemove, PageRemoveVariables } from "./types/PageRemove";
 import { PageUpdate, PageUpdateVariables } from "./types/PageUpdate";
 
 const pageCreate = gql`
-  ${pageDetailsFragment}
   ${pageErrorWithAttributesFragment}
   mutation PageCreate($input: PageCreateInput!) {
     pageCreate(input: $input) {
@@ -29,7 +28,7 @@ const pageCreate = gql`
         message
       }
       page {
-        ...PageDetailsFragment
+        id
       }
     }
   }
@@ -41,7 +40,14 @@ export const TypedPageCreate = TypedMutation<PageCreate, PageCreateVariables>(
 const pageUpdate = gql`
   ${pageDetailsFragment}
   ${pageErrorWithAttributesFragment}
-  mutation PageUpdate($id: ID!, $input: PageInput!) {
+  mutation PageUpdate(
+    $id: ID!
+    $input: PageInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     pageUpdate(id: $id, input: $input) {
       errors {
         ...PageErrorWithAttributesFragment

src/pages/queries.ts

@@ -1,3 +1,4 @@
+import { attributeValueListFragment } from "@saleor/fragments/attributes";
 import { pageDetailsFragment, pageFragment } from "@saleor/fragments/pages";
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
@@ -5,6 +6,7 @@ import gql from "graphql-tag";
 import { PageCount, PageCountVariables } from "./types/PageCount";
 import { PageDetails, PageDetailsVariables } from "./types/PageDetails";
 import { PageList, PageListVariables } from "./types/PageList";
+import { PageType, PageTypeVariables } from "./types/PageType";
 
 const pageList = gql`
   ${pageFragment}
@@ -42,7 +44,13 @@ export const usePageListQuery = makeQuery<PageList, PageListVariables>(
 
 const pageDetails = gql`
   ${pageDetailsFragment}
-  query PageDetails($id: ID!) {
+  query PageDetails(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     page(id: $id) {
       ...PageDetailsFragment
     }
@@ -52,6 +60,41 @@ export const usePageDetailsQuery = makeQuery<PageDetails, PageDetailsVariables>(
   pageDetails
 );
 
+const pageTypeQuery = gql`
+  ${attributeValueListFragment}
+  query PageType(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
+    pageType(id: $id) {
+      id
+      name
+      attributes {
+        id
+        inputType
+        entityType
+        slug
+        name
+        valueRequired
+        choices(
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
+        }
+      }
+    }
+  }
+`;
+export const usePageTypeQuery = makeQuery<PageType, PageTypeVariables>(
+  pageTypeQuery
+);
+
 const pageCountQuery = gql`
   query PageCount($filter: PageFilterInput) {
     pages(filter: $filter) {

src/pages/types/PageCreate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { PageCreateInput, PageErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum } from "./../../types/globalTypes";
+import { PageCreateInput, PageErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: PageCreate
@@ -17,115 +17,9 @@ export interface PageCreate_pageCreate_errors {
   message: string | null;
 }
 
-export interface PageCreate_pageCreate_page_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface PageCreate_pageCreate_page_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: PageCreate_pageCreate_page_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface PageCreate_pageCreate_page_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (PageCreate_pageCreate_page_attributes_attribute_values | null)[] | null;
-}
-
-export interface PageCreate_pageCreate_page_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface PageCreate_pageCreate_page_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: PageCreate_pageCreate_page_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface PageCreate_pageCreate_page_attributes {
-  __typename: "SelectedAttribute";
-  attribute: PageCreate_pageCreate_page_attributes_attribute;
-  values: (PageCreate_pageCreate_page_attributes_values | null)[];
-}
-
-export interface PageCreate_pageCreate_page_pageType_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface PageCreate_pageCreate_page_pageType_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: PageCreate_pageCreate_page_pageType_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface PageCreate_pageCreate_page_pageType_attributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  values: (PageCreate_pageCreate_page_pageType_attributes_values | null)[] | null;
-}
-
-export interface PageCreate_pageCreate_page_pageType {
-  __typename: "PageType";
-  id: string;
-  name: string;
-  attributes: (PageCreate_pageCreate_page_pageType_attributes | null)[] | null;
-}
-
-export interface PageCreate_pageCreate_page_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface PageCreate_pageCreate_page_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
 export interface PageCreate_pageCreate_page {
   __typename: "Page";
   id: string;
-  title: string;
-  slug: string;
-  isPublished: boolean;
-  attributes: PageCreate_pageCreate_page_attributes[];
-  pageType: PageCreate_pageCreate_page_pageType;
-  metadata: (PageCreate_pageCreate_page_metadata | null)[];
-  privateMetadata: (PageCreate_pageCreate_page_privateMetadata | null)[];
-  content: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  publicationDate: any | null;
 }
 
 export interface PageCreate_pageCreate {

src/pages/types/PageDetails.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL query operation: PageDetails
 // ====================================================
 
-export interface PageDetails_page_attributes_attribute_values_file {
+export interface PageDetails_page_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageDetails_page_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageDetails_page_attributes_attribute_values {
+export interface PageDetails_page_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageDetails_page_attributes_attribute_values_file | null;
+  file: PageDetails_page_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageDetails_page_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageDetails_page_attributes_attribute_choices_edges_node;
+}
+
+export interface PageDetails_page_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageDetails_page_attributes_attribute_choices_pageInfo;
+  edges: PageDetails_page_attributes_attribute_choices_edges[];
+}
+
 export interface PageDetails_page_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface PageDetails_page_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (PageDetails_page_attributes_attribute_values | null)[] | null;
+  choices: PageDetails_page_attributes_attribute_choices | null;
 }
 
 export interface PageDetails_page_attributes_values_file {
@@ -59,22 +79,42 @@ export interface PageDetails_page_attributes {
   values: (PageDetails_page_attributes_values | null)[];
 }
 
-export interface PageDetails_page_pageType_attributes_values_file {
+export interface PageDetails_page_pageType_attributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageDetails_page_pageType_attributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageDetails_page_pageType_attributes_values {
+export interface PageDetails_page_pageType_attributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageDetails_page_pageType_attributes_values_file | null;
+  file: PageDetails_page_pageType_attributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageDetails_page_pageType_attributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageDetails_page_pageType_attributes_choices_edges_node;
+}
+
+export interface PageDetails_page_pageType_attributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageDetails_page_pageType_attributes_choices_pageInfo;
+  edges: PageDetails_page_pageType_attributes_choices_edges[];
+}
+
 export interface PageDetails_page_pageType_attributes {
   __typename: "Attribute";
   id: string;
@@ -82,7 +122,7 @@ export interface PageDetails_page_pageType_attributes {
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (PageDetails_page_pageType_attributes_values | null)[] | null;
+  choices: PageDetails_page_pageType_attributes_choices | null;
 }
 
 export interface PageDetails_page_pageType {
@@ -126,4 +166,8 @@ export interface PageDetails {
 
 export interface PageDetailsVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/pages/types/PageType.ts

@@ -0,0 +1,76 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: PageType
+// ====================================================
+
+export interface PageType_pageType_attributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageType_pageType_attributes_choices_edges_node_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface PageType_pageType_attributes_choices_edges_node {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: PageType_pageType_attributes_choices_edges_node_file | null;
+  reference: string | null;
+  richText: any | null;
+}
+
+export interface PageType_pageType_attributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageType_pageType_attributes_choices_edges_node;
+}
+
+export interface PageType_pageType_attributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageType_pageType_attributes_choices_pageInfo;
+  edges: PageType_pageType_attributes_choices_edges[];
+}
+
+export interface PageType_pageType_attributes {
+  __typename: "Attribute";
+  id: string;
+  inputType: AttributeInputTypeEnum | null;
+  entityType: AttributeEntityTypeEnum | null;
+  slug: string | null;
+  name: string | null;
+  valueRequired: boolean;
+  choices: PageType_pageType_attributes_choices | null;
+}
+
+export interface PageType_pageType {
+  __typename: "PageType";
+  id: string;
+  name: string;
+  attributes: (PageType_pageType_attributes | null)[] | null;
+}
+
+export interface PageType {
+  pageType: PageType_pageType | null;
+}
+
+export interface PageTypeVariables {
+  id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
+}

src/pages/types/PageUpdate.ts

@@ -16,22 +16,42 @@ export interface PageUpdate_pageUpdate_errors {
   attributes: string[] | null;
 }
 
-export interface PageUpdate_pageUpdate_page_attributes_attribute_values_file {
+export interface PageUpdate_pageUpdate_page_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageUpdate_pageUpdate_page_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageUpdate_pageUpdate_page_attributes_attribute_values {
+export interface PageUpdate_pageUpdate_page_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageUpdate_pageUpdate_page_attributes_attribute_values_file | null;
+  file: PageUpdate_pageUpdate_page_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageUpdate_pageUpdate_page_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageUpdate_pageUpdate_page_attributes_attribute_choices_edges_node;
+}
+
+export interface PageUpdate_pageUpdate_page_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageUpdate_pageUpdate_page_attributes_attribute_choices_pageInfo;
+  edges: PageUpdate_pageUpdate_page_attributes_attribute_choices_edges[];
+}
+
 export interface PageUpdate_pageUpdate_page_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -41,7 +61,7 @@ export interface PageUpdate_pageUpdate_page_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (PageUpdate_pageUpdate_page_attributes_attribute_values | null)[] | null;
+  choices: PageUpdate_pageUpdate_page_attributes_attribute_choices | null;
 }
 
 export interface PageUpdate_pageUpdate_page_attributes_values_file {
@@ -66,22 +86,42 @@ export interface PageUpdate_pageUpdate_page_attributes {
   values: (PageUpdate_pageUpdate_page_attributes_values | null)[];
 }
 
-export interface PageUpdate_pageUpdate_page_pageType_attributes_values_file {
+export interface PageUpdate_pageUpdate_page_pageType_attributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface PageUpdate_pageUpdate_page_pageType_attributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface PageUpdate_pageUpdate_page_pageType_attributes_values {
+export interface PageUpdate_pageUpdate_page_pageType_attributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: PageUpdate_pageUpdate_page_pageType_attributes_values_file | null;
+  file: PageUpdate_pageUpdate_page_pageType_attributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface PageUpdate_pageUpdate_page_pageType_attributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: PageUpdate_pageUpdate_page_pageType_attributes_choices_edges_node;
+}
+
+export interface PageUpdate_pageUpdate_page_pageType_attributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: PageUpdate_pageUpdate_page_pageType_attributes_choices_pageInfo;
+  edges: PageUpdate_pageUpdate_page_pageType_attributes_choices_edges[];
+}
+
 export interface PageUpdate_pageUpdate_page_pageType_attributes {
   __typename: "Attribute";
   id: string;
@@ -89,7 +129,7 @@ export interface PageUpdate_pageUpdate_page_pageType_attributes {
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (PageUpdate_pageUpdate_page_pageType_attributes_values | null)[] | null;
+  choices: PageUpdate_pageUpdate_page_pageType_attributes_choices | null;
 }
 
 export interface PageUpdate_pageUpdate_page_pageType {
@@ -140,4 +180,8 @@ export interface PageUpdate {
 export interface PageUpdateVariables {
   id: string;
   input: PageInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/pages/utils/data.ts

@@ -1,5 +1,6 @@
 import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
 import { AttributeInput } from "@saleor/components/Attributes";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 
 import {
   PageDetails_page,
@@ -15,7 +16,7 @@ export function getAttributeInputFromPage(
       inputType: attribute.attribute.inputType,
       isRequired: attribute.attribute.valueRequired,
       selectedValues: attribute.values,
-      values: attribute.attribute.values,
+      values: mapEdgesToItems(attribute.attribute.choices),
       unit: attribute.attribute.unit
     },
     id: attribute.attribute.id,
@@ -32,7 +33,7 @@ export function getAttributeInputFromPageType(
       entityType: attribute.entityType,
       inputType: attribute.inputType,
       isRequired: attribute.valueRequired,
-      values: attribute.values
+      values: mapEdgesToItems(attribute.choices)
     },
     id: attribute.id,
     label: attribute.name,

src/pages/utils/handlers.ts

@@ -1,24 +1,12 @@
-import { AttributeInputData } from "@saleor/components/Attributes";
 import { FormChange } from "@saleor/hooks/useForm";
-import { FormsetData } from "@saleor/hooks/useFormset";
-
-import { PageDetails_page_pageType } from "../types/PageDetails";
-import { getAttributeInputFromPageType } from "./data";
 
 export function createPageTypeSelectHandler(
-  change: FormChange,
+  setPageType: (pageTypeId: string) => void,
-  setAttributes: (data: FormsetData<AttributeInputData>) => void,
+  triggerChange: () => void
-  setPageType: (pageType: PageDetails_page_pageType) => void,
-  pageTypeChoiceList: PageDetails_page_pageType[]
 ): FormChange {
   return (event: React.ChangeEvent<any>) => {
     const id = event.target.value;
-    const selectedPageType = pageTypeChoiceList.find(
+    setPageType(id);
-      pageType => pageType.id === id
+    triggerChange();
-    );
-    setPageType(selectedPageType);
-    change(event);
-
-    setAttributes(getAttributeInputFromPageType(selectedPageType));
   };
 }

src/pages/views/PageCreate.tsx

@@ -5,10 +5,14 @@ import {
 } from "@saleor/attributes/utils/handlers";
 import { AttributeInput } from "@saleor/components/Attributes";
 import { WindowTitle } from "@saleor/components/WindowTitle";
-import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import {
+  DEFAULT_INITIAL_SEARCH_DATA,
+  VALUES_PAGINATE_BY
+} from "@saleor/config";
 import { useFileUploadMutation } from "@saleor/files/mutations";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import usePageTypeSearch from "@saleor/searches/usePageTypeSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
@@ -19,12 +23,13 @@ import {
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
-import React from "react";
+import React, { useState } from "react";
 import { useIntl } from "react-intl";
 
 import PageDetailsPage from "../components/PageDetailsPage";
 import { PageSubmitData } from "../components/PageDetailsPage/form";
 import { TypedPageCreate } from "../mutations";
+import { usePageTypeQuery } from "../queries";
 import { PageCreate as PageCreateData } from "../types/PageCreate";
 import {
   pageCreateUrl,
@@ -45,6 +50,8 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
+  const [selectedPageTypeId, setSelectedPageTypeId] = React.useState<string>();
+
   const {
     loadMore: loadMorePageTypes,
     search: searchPageTypes,
@@ -52,7 +59,6 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   } = usePageTypeSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-
   const {
     loadMore: loadMorePages,
     search: searchPages,
@@ -60,7 +66,6 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   } = usePageSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-
   const {
     loadMore: loadMoreProducts,
     search: searchProducts,
@@ -68,6 +73,30 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const [focusedAttribute, setFocusedAttribute] = useState<string>();
+  const {
+    loadMore: loadMoreAttributeValues,
+    search: searchAttributeValues,
+    result: searchAttributeValuesOpts
+  } = useAttributeValueSearch({
+    variables: {
+      id: focusedAttribute,
+      ...DEFAULT_INITIAL_SEARCH_DATA
+    },
+    skip: !focusedAttribute
+  });
+
+  const { data: selectedPageType } = usePageTypeQuery({
+    variables: {
+      id: selectedPageTypeId,
+      firstValues: VALUES_PAGINATE_BY
+    },
+    skip: !selectedPageTypeId
+  });
+
+  const attributeValues = mapEdgesToItems(
+    searchAttributeValuesOpts?.data?.attribute.choices
+  );
 
   const [uploadFile, uploadFileOpts] = useFileUploadMutation({});
 
@@ -96,18 +125,22 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
     loading: searchPageTypesOpts.loading,
     onFetchMore: loadMorePageTypes
   };
-
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
     loading: searchPagesOpts.loading,
     onFetchMore: loadMorePages
   };
-
   const fetchMoreReferenceProducts = {
     hasMore: searchProductsOpts.data?.search?.pageInfo?.hasNextPage,
     loading: searchProductsOpts.loading,
     onFetchMore: loadMoreProducts
   };
+  const fetchMoreAttributeValues = {
+    hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
+      ?.hasNextPage,
+    loading: !!searchAttributeValuesOpts.loading,
+    onFetchMore: loadMoreAttributeValues
+  };
 
   return (
     <TypedPageCreate onCompleted={handlePageCreate}>
@@ -132,7 +165,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
                 }),
                 content: getParsedDataForJsonStringField(formData.content),
                 isPublished: formData.isPublished,
-                pageType: formData.pageType,
+                pageType: formData.pageType?.id,
                 publicationDate: formData.publicationDate,
                 seo: {
                   description: formData.seoDescription,
@@ -165,6 +198,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               errors={pageCreateOpts.data?.pageCreate.errors || []}
               saveButtonBarState={pageCreateOpts.status}
               page={null}
+              attributeValues={attributeValues}
               pageTypes={mapEdgesToItems(searchPageTypesOpts?.data?.search)}
               onBack={() => navigate(pageListUrl())}
               onRemove={() => undefined}
@@ -183,7 +217,12 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               fetchMoreReferencePages={fetchMoreReferencePages}
               fetchReferenceProducts={searchProducts}
               fetchMoreReferenceProducts={fetchMoreReferenceProducts}
+              fetchAttributeValues={searchAttributeValues}
+              fetchMoreAttributeValues={fetchMoreAttributeValues}
               onCloseDialog={() => navigate(pageCreateUrl())}
+              selectedPageType={selectedPageType?.pageType}
+              onSelectPageType={id => setSelectedPageTypeId(id)}
+              onAttributeFocus={setFocusedAttribute}
             />
           </>
         );

src/pages/views/PageDetails.tsx

@@ -13,7 +13,10 @@ import {
 import ActionDialog from "@saleor/components/ActionDialog";
 import { AttributeInput } from "@saleor/components/Attributes";
 import { WindowTitle } from "@saleor/components/WindowTitle";
-import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import {
+  DEFAULT_INITIAL_SEARCH_DATA,
+  VALUES_PAGINATE_BY
+} from "@saleor/config";
 import { useFileUploadMutation } from "@saleor/files/mutations";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
@@ -21,6 +24,7 @@ import { UploadErrorFragment } from "@saleor/fragments/types/UploadErrorFragment
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
@@ -30,7 +34,7 @@ import {
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { getStringOrPlaceholder, maybe } from "../../misc";
@@ -75,7 +79,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
 
   const pageDetails = usePageDetailsQuery({
     variables: {
-      id
+      id,
+      firstValues: VALUES_PAGINATE_BY
     }
   });
 
@@ -132,7 +137,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
     const updateResult = await pageUpdate({
       variables: {
         id,
-        input: createPageInput(data, updatedFileAttributes)
+        input: createPageInput(data, updatedFileAttributes),
+        firstValues: VALUES_PAGINATE_BY
       }
     });
 
@@ -160,7 +166,6 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
   } = usePageSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-
   const {
     loadMore: loadMoreProducts,
     search: searchProducts,
@@ -168,18 +173,39 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const [focusedAttribute, setFocusedAttribute] = useState<string>();
+  const {
+    loadMore: loadMoreAttributeValues,
+    search: searchAttributeValues,
+    result: searchAttributeValuesOpts
+  } = useAttributeValueSearch({
+    variables: {
+      id: focusedAttribute,
+      ...DEFAULT_INITIAL_SEARCH_DATA
+    },
+    skip: !focusedAttribute
+  });
+
+  const attributeValues = mapEdgesToItems(
+    searchAttributeValuesOpts?.data?.attribute.choices
+  );
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
     loading: searchPagesOpts.loading,
     onFetchMore: loadMorePages
   };
-
   const fetchMoreReferenceProducts = {
     hasMore: searchProductsOpts.data?.search?.pageInfo?.hasNextPage,
     loading: searchProductsOpts.loading,
     onFetchMore: loadMoreProducts
   };
+  const fetchMoreAttributeValues = {
+    hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
+      ?.hasNextPage,
+    loading: !!searchAttributeValuesOpts.loading,
+    onFetchMore: loadMoreAttributeValues
+  };
 
   return (
     <>
@@ -194,6 +220,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
         errors={pageUpdateOpts.data?.pageUpdate.errors || []}
         saveButtonBarState={pageUpdateOpts.status}
         page={pageDetails.data?.page}
+        attributeValues={attributeValues}
         onBack={() => navigate(pageListUrl())}
         onRemove={() =>
           navigate(
@@ -213,7 +240,10 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}
         fetchMoreReferenceProducts={fetchMoreReferenceProducts}
+        fetchAttributeValues={searchAttributeValues}
+        fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(pageUrl(id))}
+        onAttributeFocus={setFocusedAttribute}
       />
       <ActionDialog
         open={params.action === "remove"}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -25,6 +25,7 @@ import { sectionNames } from "@saleor/intl";
 import ProductVariantPrice from "@saleor/products/components/ProductVariantPrice";
 import { ProductType_productType } from "@saleor/products/types/ProductType";
 import { getChoices } from "@saleor/products/utils/data";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
@@ -54,10 +55,12 @@ interface ProductCreatePageProps {
   currentChannels: ChannelData[];
   collections: SearchCollections_search_edges_node[];
   categories: SearchCategories_search_edges_node[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   loading: boolean;
   fetchMoreCategories: FetchMoreProps;
   fetchMoreCollections: FetchMoreProps;
   fetchMoreProductTypes: FetchMoreProps;
+  fetchMoreAttributeValues?: FetchMoreProps;
   initial?: Partial<ProductCreateFormData>;
   productTypes?: SearchProductTypes_search_edges_node[];
   referencePages?: SearchPages_search_edges_node[];
@@ -71,6 +74,8 @@ interface ProductCreatePageProps {
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
   fetchProductTypes: (data: string) => void;
+  fetchAttributeValues: (query: string) => void;
+  onAttributeFocus: (id: string) => void;
   onWarehouseConfigure: () => void;
   openChannelsModal: () => void;
   onChannelsChange: (data: ChannelData[]) => void;
@@ -93,6 +98,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   loading,
   categories: categoryChoiceList,
   collections: collectionChoiceList,
+  attributeValues,
   errors,
   fetchCategories,
   fetchCollections,
@@ -121,8 +127,11 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchMoreReferencePages,
   fetchReferenceProducts,
   fetchMoreReferenceProducts,
+  fetchAttributeValues,
+  fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectProductType
+  onSelectProductType,
+  onAttributeFocus
 }: ProductCreatePageProps) => {
   const intl = useIntl();
 
@@ -185,7 +194,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
       taxTypes={taxTypeChoices}
       warehouses={warehouses}
       currentChannels={currentChannels}
-      productTypeChoiceList={productTypeChoiceList}
       fetchReferencePages={fetchReferencePages}
       fetchMoreReferencePages={fetchMoreReferencePages}
       fetchReferenceProducts={fetchReferenceProducts}
@@ -222,6 +230,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 {data.attributes.length > 0 && (
                   <Attributes
                     attributes={data.attributes}
+                    attributeValues={attributeValues}
                     loading={loading}
                     disabled={loading}
                     errors={errors}
@@ -231,6 +240,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onReferencesRemove={handlers.selectAttributeReference}
                     onReferencesAddClick={onAssignReferencesClick}
                     onReferencesReorder={handlers.reorderAttributeValue}
+                    fetchAttributeValues={fetchAttributeValues}
+                    fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />

src/products/components/ProductCreatePage/form.tsx

@@ -129,7 +129,6 @@ export interface UseProductCreateFormOpts
   productTypes: SearchProductTypes_search_edges_node[];
   warehouses: SearchWarehouses_search_edges_node[];
   currentChannels: ChannelData[];
-  productTypeChoiceList: SearchProductTypes_search_edges_node[];
   referencePages: SearchPages_search_edges_node[];
   referenceProducts: SearchProducts_search_edges_node[];
   fetchReferencePages?: (data: string) => void;

src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx

@@ -36,8 +36,10 @@ const props: ProductUpdatePageProps = {
   errors: [],
   fetchCategories: () => undefined,
   fetchCollections: () => undefined,
+  fetchAttributeValues: () => undefined,
   fetchMoreCategories: fetchMoreProps,
   fetchMoreCollections: fetchMoreProps,
+  fetchMoreAttributeValues: fetchMoreProps,
   hasChannelChanged: false,
   header: product.name,
   media: product.media,
@@ -58,6 +60,7 @@ const props: ProductUpdatePageProps = {
   onVariantsAdd: () => undefined,
   onWarehouseConfigure: () => undefined,
   openChannelsModal: () => undefined,
+  onAttributeFocus: () => undefined,
   placeholderImage,
   product,
   referencePages: [],
@@ -66,7 +69,8 @@ const props: ProductUpdatePageProps = {
   selectedChannelId: "123",
   taxTypes,
   variants: product.variants,
-  warehouses: warehouseList
+  warehouses: warehouseList,
+  attributeValues: []
 };
 
 const selectors = {

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -29,6 +29,7 @@ import { maybe } from "@saleor/misc";
 import ProductExternalMediaDialog from "@saleor/products/components/ProductExternalMediaDialog";
 import ProductVariantPrice from "@saleor/products/components/ProductVariantPrice";
 import { ChannelsWithVariantsData } from "@saleor/products/views/ProductUpdate/types";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
@@ -75,6 +76,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   placeholderImage: string;
   collections: SearchCollections_search_edges_node[];
   categories: SearchCategories_search_edges_node[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   disabled: boolean;
   fetchMoreCategories: FetchMoreProps;
   fetchMoreCollections: FetchMoreProps;
@@ -93,11 +95,14 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   assignReferencesAttributeId?: string;
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  fetchMoreAttributeValues?: FetchMoreProps;
   isSimpleProduct: boolean;
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
+  fetchAttributeValues: (query: string) => void;
+  onAttributeFocus: (id: string) => void;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
   onCloseDialog: () => void;
   onVariantsAdd: () => void;
@@ -134,6 +139,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   categories: categoryChoiceList,
   channelsErrors,
   collections: collectionChoiceList,
+  attributeValues,
   isSimpleProduct,
   errors,
   fetchCategories,
@@ -185,9 +191,12 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   fetchMoreReferencePages,
   fetchReferenceProducts,
   fetchMoreReferenceProducts,
+  fetchAttributeValues,
+  fetchMoreAttributeValues,
   onCloseDialog,
   channelsWithVariantsData,
-  onChannelsChange
+  onChannelsChange,
+  onAttributeFocus
 }) => {
   const intl = useIntl();
 
@@ -298,6 +307,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 {data.attributes.length > 0 && (
                   <Attributes
                     attributes={data.attributes}
+                    attributeValues={attributeValues}
                     errors={errors}
                     loading={disabled}
                     disabled={disabled}
@@ -307,6 +317,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onReferencesRemove={handlers.selectAttributeReference}
                     onReferencesAddClick={onAssignReferencesClick}
                     onReferencesReorder={handlers.reorderAttributeValue}
+                    fetchAttributeValues={fetchAttributeValues}
+                    fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />

src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx

@@ -8,8 +8,8 @@ import SingleAutocompleteSelectField, {
 import Skeleton from "@saleor/components/Skeleton";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import {
-  ProductVariant_nonSelectionAttributes_attribute_values,
+  ProductVariant_nonSelectionAttributes_attribute_choices_edges,
-  ProductVariant_selectionAttributes_attribute_values
+  ProductVariant_selectionAttributes_attribute_choices_edges
 } from "@saleor/fragments/types/ProductVariant";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
 import { commonMessages } from "@saleor/intl";
@@ -19,8 +19,8 @@ import { useIntl } from "react-intl";
 
 export interface VariantAttributeInputData {
   values: Array<
-    | ProductVariant_selectionAttributes_attribute_values
+    | ProductVariant_selectionAttributes_attribute_choices_edges
-    | ProductVariant_nonSelectionAttributes_attribute_values
+    | ProductVariant_nonSelectionAttributes_attribute_choices_edges
   >;
 }
 export type VariantAttributeInput = FormsetAtomicData<
@@ -42,10 +42,10 @@ function getAttributeDisplayValue(
 ): string {
   const attribute = attributes.find(attr => attr.id === id);
   const attributeValue = attribute.data.values.find(
-    value => value.slug === slug
+    value => value.node.slug === slug
   );
   if (!!attributeValue) {
-    return attributeValue.name;
+    return attributeValue.node.name;
   }
 
   return slug || "";
@@ -65,8 +65,8 @@ function getAttributeValueChoices(
 ): SingleAutocompleteChoiceType[] {
   const attribute = attributes.find(attr => attr.id === id);
   return attribute.data.values.map(attributeValue => ({
-    label: attributeValue.name,
+    label: attributeValue.node.name,
-    value: attributeValue.slug
+    value: attributeValue.node.slug
   }));
 }
 

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -17,6 +17,7 @@ import Metadata from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
@@ -69,6 +70,7 @@ interface ProductVariantCreatePageProps {
   weightUnit: string;
   referencePages?: SearchPages_search_edges_node[];
   referenceProducts?: SearchProducts_search_edges_node[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   onBack: () => void;
   onSubmit: (data: ProductVariantCreateData) => void;
   onVariantClick: (variantId: string) => void;
@@ -76,10 +78,13 @@ interface ProductVariantCreatePageProps {
   onWarehouseConfigure: () => void;
   assignReferencesAttributeId?: string;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
+  onAttributeFocus: (id: string) => void;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
+  fetchAttributeValues: (query: string) => void;
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
 }
 
@@ -94,17 +99,21 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   weightUnit,
   referencePages = [],
   referenceProducts = [],
+  attributeValues,
   onBack,
   onSubmit,
   onVariantClick,
   onVariantReorder,
   onWarehouseConfigure,
+  onAttributeFocus,
   assignReferencesAttributeId,
   onAssignReferencesClick,
   fetchReferencePages,
   fetchReferenceProducts,
+  fetchAttributeValues,
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
+  fetchMoreAttributeValues,
   onCloseDialog
 }) => {
   const intl = useIntl();
@@ -173,6 +182,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     attribute.data.variantAttributeScope ===
                     VariantAttributeScope.NOT_VARIANT_SELECTION
                 )}
+                attributeValues={attributeValues}
                 loading={disabled}
                 disabled={disabled}
                 errors={errors}
@@ -182,6 +192,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesRemove={handlers.selectAttributeReference}
                 onReferencesAddClick={onAssignReferencesClick}
                 onReferencesReorder={handlers.reorderAttributeValue}
+                fetchAttributeValues={fetchAttributeValues}
+                fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeFocus={onAttributeFocus}
               />
               <CardSpacer />
               <Attributes
@@ -191,6 +204,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     attribute.data.variantAttributeScope ===
                     VariantAttributeScope.VARIANT_SELECTION
                 )}
+                attributeValues={attributeValues}
                 loading={disabled}
                 disabled={disabled}
                 errors={errors}
@@ -200,6 +214,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesRemove={handlers.selectAttributeReference}
                 onReferencesAddClick={onAssignReferencesClick}
                 onReferencesReorder={handlers.reorderAttributeValue}
+                fetchAttributeValues={fetchAttributeValues}
+                fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeFocus={onAttributeFocus}
               />
               <CardSpacer />
               <ProductShipping

src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx

@@ -1,7 +1,7 @@
 import { attributes } from "@saleor/attributes/fixtures";
 import { productChannels } from "@saleor/channels/fixtures";
 import Container from "@saleor/components/Container";
-import { limitsReached } from "@saleor/fixtures";
+import { fetchMoreProps, limitsReached } from "@saleor/fixtures";
 import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate";
 import { ProductErrorCode } from "@saleor/types/globalTypes";
 import { warehouseList } from "@saleor/warehouses/fixtures";
@@ -34,8 +34,8 @@ const price: Price = {
   attribute: selectedAttributes[0].id,
   channels,
   mode: "attribute",
-  values: selectedAttributes[0].values.map(attribute => ({
+  values: selectedAttributes[0].choices.edges.map(attribute => ({
-    slug: attribute.slug,
+    slug: attribute.node.slug,
     value: channels
   }))
 };
@@ -46,19 +46,24 @@ const stock: Stock = {
   value: selectedWarehouses.map(
     (_, warehouseIndex) => (warehouseIndex + 2) * 3
   ),
-  values: selectedAttributes[0].values.map((attribute, attributeIndex) => ({
+  values: selectedAttributes[0].choices.edges.map(
-    slug: attribute.slug,
+    (attribute, attributeIndex) => ({
-    value: selectedWarehouses.map(
+      slug: attribute.node.slug,
-      (_, warehouseIndex) =>
+      value: selectedWarehouses.map(
-        selectedAttributes.length * 10 - attributeIndex - warehouseIndex * 3
+        (_, warehouseIndex) =>
-    )
+          selectedAttributes.length * 10 - attributeIndex - warehouseIndex * 3
-  }))
+      )
+    })
+  )
 };
 
 const dataAttributes = selectedAttributes.map(attribute => ({
   id: attribute.id,
-  values: attribute.values
+  values: attribute.choices.edges
-    .map(value => value.slug)
+    .map(value => ({
+      slug: value.node.slug,
+      value: value.node
+    }))
     .filter((_, valueIndex) => valueIndex % 2 !== 1)
 }));
 
@@ -87,6 +92,9 @@ const data: ProductVariantCreateFormData = {
 };
 const props: ProductVariantCreatorContentProps = {
   attributes: [0, 1, 4, 6].map(index => attributes[index]),
+  attributeValues: [],
+  fetchAttributeValues: () => undefined,
+  fetchMoreAttributeValues: fetchMoreProps,
   channelListings: productChannels.map(listing => ({
     currency: listing.pricing?.priceRange?.start?.net.currency,
     id: listing.channel.id,
@@ -101,7 +109,8 @@ const props: ProductVariantCreatorContentProps = {
   errors: [],
   variantsLeft: 6,
   step: ProductVariantCreatorStep.values,
-  warehouses: warehouseList
+  warehouses: warehouseList,
+  onAttributeFocus: () => undefined
 };
 
 storiesOf("Views / Products / Create multiple variants", module)

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx

@@ -2,6 +2,8 @@ import { ChannelPriceData } from "@saleor/channels/utils";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
 import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
+import { FetchMoreProps } from "@saleor/types";
 import { isSelected } from "@saleor/utils/lists";
 import React from "react";
 
@@ -17,6 +19,7 @@ import { ProductVariantCreatorStep } from "./types";
 
 export interface ProductVariantCreatorContentProps {
   attributes: ProductDetails_product_productType_variantAttributes[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   channelListings: ChannelPriceData[];
   data: ProductVariantCreateFormData;
   dispatchFormDataAction: React.Dispatch<ProductVariantCreateReducerAction>;
@@ -24,17 +27,24 @@ export interface ProductVariantCreatorContentProps {
   step: ProductVariantCreatorStep;
   variantsLeft: number | null;
   warehouses: WarehouseFragment[];
+  fetchAttributeValues: (query: string) => void;
+  fetchMoreAttributeValues?: FetchMoreProps;
+  onAttributeFocus: (id: string) => void;
 }
 
 const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = ({
   attributes,
+  attributeValues,
+  fetchAttributeValues,
+  fetchMoreAttributeValues,
   channelListings,
   data,
   dispatchFormDataAction,
   errors,
   step,
   variantsLeft,
-  warehouses
+  warehouses,
+  onAttributeFocus
 }) => {
   const selectedAttributes = attributes.filter(attribute =>
     isSelected(
@@ -49,17 +59,21 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
       {step === ProductVariantCreatorStep.values && (
         <ProductVariantCreateValues
           attributes={selectedAttributes}
+          attributeValues={attributeValues}
+          fetchAttributeValues={fetchAttributeValues}
+          fetchMoreAttributeValues={fetchMoreAttributeValues}
           data={data}
           variantsLeft={variantsLeft}
-          onValueClick={(attributeId, valueId) =>
+          onValueClick={(attributeId, value) =>
             dispatchFormDataAction({
               selectValue: {
                 attributeId,
-                valueId
+                value
               },
               type: ProductVariantCreateReducerActionType.selectValue
             })
           }
+          onAttributeFocus={onAttributeFocus}
         />
       )}
       {step === ProductVariantCreatorStep.prices && (

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx

@@ -1,4 +1,5 @@
 import { Button, Typography } from "@material-ui/core";
+import { drawerWidthExpanded } from "@saleor/components/AppLayout/consts";
 import Container from "@saleor/components/Container";
 import Hr from "@saleor/components/Hr";
 import PageHeader from "@saleor/components/PageHeader";
@@ -28,8 +29,13 @@ const useStyles = makeStyles(
     },
     content: {
       overflowX: "visible",
-      overflowY: "hidden",
+      [theme.breakpoints.up("md")]: {
-      width: 800
+        position: "absolute",
+        width: `calc(100vw - ${drawerWidthExpanded}px + ${theme.spacing(6)}px)`,
+        maxWidth: `calc(${theme.breakpoints.width("lg")}px - ${theme.spacing(
+          6
+        )}px)`
+      }
     },
     description: {
       marginTop: theme.spacing()
@@ -185,7 +191,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
 
   React.useEffect(reloadForm, [attributes.length, warehouses.length]);
 
-  const variantsLeft = limits.allowedUsage.productVariants
+  const variantsLeft = limits?.allowedUsage.productVariants
     ? limits.allowedUsage.productVariants - limits.currentUsage.productVariants
     : null;
 
@@ -237,17 +243,19 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
         )}
       </PageHeader>
       <Hr className={classes.hr} />
-      <ProductVariantCreatorContent
+      <div className={classes.content}>
-        {...contentProps}
+        <ProductVariantCreatorContent
-        attributes={attributes}
+          {...contentProps}
-        channelListings={channelListings}
+          attributes={attributes}
-        data={wizardData}
+          channelListings={channelListings}
-        dispatchFormDataAction={dispatchFormDataAction}
+          data={wizardData}
-        errors={errors}
+          dispatchFormDataAction={dispatchFormDataAction}
-        variantsLeft={variantsLeft}
+          errors={errors}
-        step={step}
+          variantsLeft={variantsLeft}
-        warehouses={warehouses}
+          step={step}
-      />
+          warehouses={warehouses}
+        />
+      </div>
     </Container>
   );
 };

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx

@@ -20,7 +20,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ProductDetails_product_productType_variantAttributes } from "../../types/ProductDetails";
-import { ChannelPrice, ProductVariantCreateFormData } from "./form";
+import { Attribute, ChannelPrice, ProductVariantCreateFormData } from "./form";
 
 export interface ProductVariantCreatorSummaryProps {
   attributes: ProductDetails_product_productType_variantAttributes[];
@@ -113,18 +113,18 @@ const useStyles = makeStyles<ProductVariantCreatorSummaryProps, ClassKey>(
 
 function getVariantName(
   variant: ProductVariantBulkCreateInput,
-  attributes: ProductDetails_product_productType_variantAttributes[]
+  attributes: Attribute[]
 ): string[] {
   return attributes.reduce(
     (acc, attribute) => [
       ...acc,
-      attribute.values.find(
+      attribute.values?.find(
         value =>
-          value.slug ===
+          value?.slug ===
           variant.attributes.find(
             variantAttribute => variantAttribute.id === attribute.id
           ).values[0]
-      ).name
+      )?.value?.name
     ],
     []
   );
@@ -132,7 +132,6 @@ function getVariantName(
 
 const ProductVariantCreatorSummary: React.FC<ProductVariantCreatorSummaryProps> = props => {
   const {
-    attributes,
     channelListings,
     data,
     errors,
@@ -220,7 +219,7 @@ const ProductVariantCreatorSummary: React.FC<ProductVariantCreatorSummaryProps>
                 .join(":")}
             >
               <div className={classNames(classes.col, classes.colName)}>
-                {getVariantName(variant, attributes).map(
+                {getVariantName(variant, data.attributes).map(
                   (value, valueIndex) => (
                     <span
                       className={classes.attributeValue}

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx

@@ -1,17 +1,30 @@
 import { Card, CardContent } from "@material-ui/core";
 import Alert from "@saleor/components/Alert/Alert";
+import { getMultiChoices } from "@saleor/components/Attributes/utils";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
+import MultiAutocompleteSelectField from "@saleor/components/MultiAutocompleteSelectField";
-import Debounce from "@saleor/components/Debounce";
 import Skeleton from "@saleor/components/Skeleton";
+import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
+import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
-import { makeStyles } from "@saleor/theme";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
-import { isSelected } from "@saleor/utils/lists";
+import { FetchMoreProps } from "@saleor/types";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
-import { ProductVariantCreateFormData } from "./form";
+import {
+  Attribute,
+  AttributeValue,
+  ProductVariantCreateFormData
+} from "./form";
+
+const messages = defineMessages({
+  multipleValueLabel: {
+    defaultMessage: "Values",
+    description: "attribute values"
+  }
+});
 
 export function getVariantsNumber(data: ProductVariantCreateFormData): number {
   return data.attributes.reduce(
@@ -20,30 +33,64 @@ export function getVariantsNumber(data: ProductVariantCreateFormData): number {
   );
 }
 
-export interface ProductVariantCreatorValuesProps {
+export function getMultiValues(
-  attributes: ProductDetails_product_productType_variantAttributes[];
+  attributes: Attribute[],
-  data: ProductVariantCreateFormData;
+  attribute: ProductDetails_product_productType_variantAttributes
-  variantsLeft: number | null;
+) {
-  onValueClick: (attributeId: string, valueId: string) => void;
+  return attributes
+    .find(getById(attribute.id))
+    ?.values?.map(value => value.slug);
 }
 
-const useStyles = makeStyles(
+export function getMultiDisplayValues(
-  theme => ({
+  attributes: Attribute[],
-    valueContainer: {
+  attribute: ProductDetails_product_productType_variantAttributes
-      display: "grid",
+) {
-      gridColumnGap: theme.spacing(3),
+  return attributes.find(getById(attribute.id))?.values.map(value => ({
-      gridTemplateColumns: "repeat(5, 1fr)"
+    label: value.value?.name,
-    }
+    value: value.slug
-  }),
+  }));
-  { name: "ProductVariantCreatorValues" }
+}
-);
+
+export interface ProductVariantCreatorValuesProps {
+  attributes: ProductDetails_product_productType_variantAttributes[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
+  fetchAttributeValues: (query: string) => void;
+  fetchMoreAttributeValues?: FetchMoreProps;
+  data: ProductVariantCreateFormData;
+  variantsLeft: number | null;
+  onValueClick: (
+    attributeId: string,
+    value: AttributeValue<AttributeValueFragment>
+  ) => void;
+  onAttributeFocus: (id: string) => void;
+}
 
 const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> = props => {
-  const { attributes, data, variantsLeft, onValueClick } = props;
+  const {
-  const classes = useStyles(props);
+    attributes,
+    attributeValues,
+    fetchAttributeValues,
+    fetchMoreAttributeValues,
+    data,
+    variantsLeft,
+    onValueClick,
+    onAttributeFocus
+  } = props;
   const intl = useIntl();
   const variantsNumber = getVariantsNumber(data);
 
+  const handleValueClick = (attributeId: string, valueSlug: string) => {
+    const dataAttribute = data.attributes.find(getById(attributeId));
+
+    onValueClick(attributeId, {
+      slug: valueSlug,
+      value:
+        dataAttribute?.values.find(value => value.slug === valueSlug)?.value ||
+        attributeValues.find(value => value.slug === valueSlug)
+    });
+  };
+
   return (
     <>
       {variantsLeft !== null && (
@@ -67,32 +114,24 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
         <React.Fragment key={attribute.id}>
           <Card>
             <CardTitle title={attribute?.name || <Skeleton />} />
-            <CardContent
+            <CardContent data-test-id="value-container">
-              className={classes.valueContainer}
+              <MultiAutocompleteSelectField
-              data-test-id="value-container"
+                choices={getMultiChoices(attributeValues)}
-            >
+                displayValues={getMultiDisplayValues(
-              {attribute.values.map(value => (
+                  data.attributes,
-                <Debounce
+                  attribute
-                  debounceFn={() => onValueClick(attribute.id, value.slug)}
+                )}
-                  time={100}
+                name={`attribute:${attribute.name}`}
-                  key={value.slug}
+                label={intl.formatMessage(messages.multipleValueLabel)}
-                >
+                value={getMultiValues(data.attributes, attribute)}
-                  {change => (
+                onChange={event =>
-                    <ControlledCheckbox
+                  handleValueClick(attribute.id, event.target.value)
-                      checked={isSelected(
+                }
-                        value.slug,
+                allowCustomValues={true}
-                        data.attributes.find(
+                fetchChoices={fetchAttributeValues}
-                          dataAttribute => attribute.id === dataAttribute.id
+                {...fetchMoreAttributeValues}
-                        )?.values || [],
+                onFocus={() => onAttributeFocus(attribute.id)}
-                        (a, b) => a === b
+              />
-                      )}
-                      name={`value:${value.slug}`}
-                      label={value.name}
-                      onChange={change}
-                    />
-                  )}
-                </Debounce>
-              ))}
             </CardContent>
           </Card>
           <CardSpacer />

src/products/components/ProductVariantCreatorPage/__snapshots__/reducer.test.ts.snap

@@ -6,22 +6,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -561,22 +627,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -1116,22 +1248,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -1171,22 +1369,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -1677,22 +1941,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -2138,22 +2468,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -2644,22 +3040,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],
@@ -3067,22 +3529,88 @@ Object {
     Object {
       "id": "attr-1",
       "values": Array [
-        "val-1-1",
+        Object {
-        "val-1-7",
+          "slug": "val-1-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-1",
+            "name": "val-1-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-1",
+          },
+        },
+        Object {
+          "slug": "val-1-7",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-1-7",
+            "name": "val-1-7",
+            "reference": null,
+            "richText": null,
+            "slug": "val-1-7",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-2",
       "values": Array [
-        "val-2-2",
+        Object {
-        "val-2-4",
+          "slug": "val-2-2",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-2",
+            "name": "val-2-2",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-2",
+          },
+        },
+        Object {
+          "slug": "val-2-4",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-2-4",
+            "name": "val-2-4",
+            "reference": null,
+            "richText": null,
+            "slug": "val-2-4",
+          },
+        },
       ],
     },
     Object {
       "id": "attr-4",
       "values": Array [
-        "val-4-1",
+        Object {
-        "val-4-5",
+          "slug": "val-4-1",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-1",
+            "name": "val-4-1",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-1",
+          },
+        },
+        Object {
+          "slug": "val-4-5",
+          "value": Object {
+            "__typename": "AttributeValue",
+            "file": null,
+            "id": "val-4-5",
+            "name": "val-4-5",
+            "reference": null,
+            "richText": null,
+            "slug": "val-4-5",
+          },
+        },
       ],
     },
   ],

src/products/components/ProductVariantCreatorPage/createVariants.test.ts

@@ -63,7 +63,7 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         mode: "attribute",
         values: attribute.values.map((attributeValue, index) => ({
-          slug: attributeValue,
+          slug: attributeValue.slug,
           value: channels.map(channel => ({
             channelId: channel.id,
             price: (channel.price + index).toString()
@@ -97,7 +97,7 @@ describe("Creates variant matrix", () => {
           variant =>
             variant.attributes.find(
               variantAttribute => variantAttribute.id === attribute.id
-            ).values[0] === attributeValue
+            ).values[0] === attributeValue.slug
         )
         .forEach(variant => {
           variant.channelListings.map((channel, index) => {
@@ -128,7 +128,7 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         mode: "attribute",
         values: attribute.values.map((attributeValue, attributeValueIndex) => ({
-          slug: attributeValue,
+          slug: attributeValue.slug,
           value: stock.map(
             (_, stockIndex) => stock[stockIndex] * (attributeValueIndex + 1)
           )
@@ -154,7 +154,7 @@ describe("Creates variant matrix", () => {
           variant =>
             variant.attributes.find(
               variantAttribute => variantAttribute.id === attribute.id
-            ).values[0] === attributeValue
+            ).values[0] === attributeValue.slug
         )
         .forEach(variant => {
           variant.stocks.forEach((_, stockIndex) => {
@@ -179,7 +179,7 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         mode: "attribute",
         values: attribute.values.map((attributeValue, index) => ({
-          slug: attributeValue,
+          slug: attributeValue.slug,
           value: channels.map(channel => ({
             channelId: channel.id,
             price: (channel.price + index).toString()
@@ -191,7 +191,7 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         mode: "attribute",
         values: attribute.values.map((attributeValue, attributeValueIndex) => ({
-          slug: attributeValue,
+          slug: attributeValue.slug,
           value: stock.map(
             (_, stockIndex) => stock[stockIndex] * (attributeValueIndex + 1)
           )
@@ -213,7 +213,7 @@ describe("Creates variant matrix", () => {
           variant =>
             variant.attributes.find(
               variantAttribute => variantAttribute.id === attribute.id
-            ).values[0] === attributeValue
+            ).values[0] === attributeValue.slug
         )
         .forEach(variant => {
           variant.channelListings.map((channel, index) => {
@@ -230,7 +230,7 @@ describe("Creates variant matrix", () => {
           variant =>
             variant.attributes.find(
               variantAttribute => variantAttribute.id === attribute.id
-            ).values[0] === attributeValue
+            ).values[0] === attributeValue.slug
         )
         .forEach(variant => {
           variant.stocks.forEach((_, stockIndex) => {

src/products/components/ProductVariantCreatorPage/createVariants.ts

@@ -112,11 +112,11 @@ function addAttributeToVariant(
   attribute: Attribute,
   variant: CreateVariantInput
 ): CreateVariantInput[] {
-  return attribute.values.map(attributeValueSlug => [
+  return attribute.values.map(attributeValue => [
     ...variant,
     {
       attributeId: attribute.id,
-      attributeValueSlug
+      attributeValueSlug: attributeValue.slug
     }
   ]);
 }

src/products/components/ProductVariantCreatorPage/fixtures.ts

@@ -20,25 +20,69 @@ export const attributes = [
     id: "attr-1",
     values: Array(9)
       .fill(0)
-      .map((_, index) => `val-1-${index + 1}`)
+      .map((_, index) => ({
+        slug: `val-1-${index + 1}`,
+        value: {
+          __typename: "AttributeValue" as "AttributeValue",
+          id: `val-1-${index + 1}`,
+          name: `val-1-${index + 1}`,
+          slug: `val-1-${index + 1}`,
+          file: null,
+          reference: null,
+          richText: null
+        }
+      }))
   },
   {
     id: "attr-2",
     values: Array(6)
       .fill(0)
-      .map((_, index) => `val-2-${index + 1}`)
+      .map((_, index) => ({
+        slug: `val-2-${index + 1}`,
+        value: {
+          __typename: "AttributeValue" as "AttributeValue",
+          id: `val-2-${index + 1}`,
+          name: `val-2-${index + 1}`,
+          slug: `val-2-${index + 1}`,
+          file: null,
+          reference: null,
+          richText: null
+        }
+      }))
   },
   {
     id: "attr-3",
     values: Array(4)
       .fill(0)
-      .map((_, index) => `val-3-${index + 1}`)
+      .map((_, index) => ({
+        slug: `val-3-${index + 1}`,
+        value: {
+          __typename: "AttributeValue" as "AttributeValue",
+          id: `val-3-${index + 1}`,
+          name: `val-3-${index + 1}`,
+          slug: `val-3-${index + 1}`,
+          file: null,
+          reference: null,
+          richText: null
+        }
+      }))
   },
   {
     id: "attr-4",
     values: Array(11)
       .fill(0)
-      .map((_, index) => `val-4-${index + 1}`)
+      .map((_, index) => ({
+        slug: `val-4-${index + 1}`,
+        value: {
+          __typename: "AttributeValue" as "AttributeValue",
+          id: `val-4-${index + 1}`,
+          name: `val-4-${index + 1}`,
+          slug: `val-4-${index + 1}`,
+          file: null,
+          reference: null,
+          richText: null
+        }
+      }))
   }
 ];
 
@@ -116,7 +160,7 @@ const price: Price = {
   mode: "attribute",
   values: [
     {
-      slug: thirdStep.attributes[1].values[0],
+      slug: thirdStep.attributes[1].values[0].slug,
       value: [
         { channelId: channels[0].id, price: "0" },
         { channelId: channels[1].id, price: "2" },
@@ -124,7 +168,7 @@ const price: Price = {
       ]
     },
     {
-      slug: thirdStep.attributes[1].values[1],
+      slug: thirdStep.attributes[1].values[1].slug,
       value: [
         { channelId: channels[0].id, price: "0" },
         { channelId: channels[1].id, price: "2" },
@@ -139,11 +183,11 @@ const stock: Stock = {
   value: [],
   values: [
     {
-      slug: thirdStep.attributes[2].values[0],
+      slug: thirdStep.attributes[2].values[0].slug,
       value: [50, 20, 45, 75]
     },
     {
-      slug: thirdStep.attributes[2].values[1],
+      slug: thirdStep.attributes[2].values[1].slug,
       value: [80, 50, 85, 105]
     }
   ]

src/products/components/ProductVariantCreatorPage/form.ts

@@ -1,4 +1,5 @@
 import { ChannelPriceData } from "@saleor/channels/utils";
+import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
 
@@ -28,7 +29,7 @@ export interface Stock {
 }
 export interface Attribute {
   id: string;
-  values: string[];
+  values: Array<AttributeValue<AttributeValueFragment>>;
 }
 export interface ProductVariantCreateFormData {
   attributes: Attribute[];

src/products/components/ProductVariantCreatorPage/reducer.test.ts

@@ -23,14 +23,14 @@ describe("Reducer is able to", () => {
       {
         selectValue: {
           attributeId: attributes[0].id,
-          valueId: attributes[0].values[0]
+          value: attributes[0].values[0]
         },
         type: ProductVariantCreateReducerActionType.selectValue
       },
       {
         selectValue: {
           attributeId: attributes[0].id,
-          valueId: attributes[0].values[6]
+          value: attributes[0].values[6]
         },
 
         type: ProductVariantCreateReducerActionType.selectValue
@@ -38,28 +38,28 @@ describe("Reducer is able to", () => {
       {
         selectValue: {
           attributeId: attributes[1].id,
-          valueId: attributes[1].values[1]
+          value: attributes[1].values[1]
         },
         type: ProductVariantCreateReducerActionType.selectValue
       },
       {
         selectValue: {
           attributeId: attributes[1].id,
-          valueId: attributes[1].values[3]
+          value: attributes[1].values[3]
         },
         type: ProductVariantCreateReducerActionType.selectValue
       },
       {
         selectValue: {
           attributeId: attributes[3].id,
-          valueId: attributes[3].values[0]
+          value: attributes[3].values[0]
         },
         type: ProductVariantCreateReducerActionType.selectValue
       },
       {
         selectValue: {
           attributeId: attributes[3].id,
-          valueId: attributes[3].values[4]
+          value: attributes[3].values[4]
         },
         type: ProductVariantCreateReducerActionType.selectValue
       }
@@ -164,7 +164,7 @@ describe("Reducer is able to", () => {
         changeAttributeValuePrice: {
           channelId: channels[0].id,
           price: value.toString(),
-          valueId: attribute.values[0]
+          valueId: attribute.values[0].slug
         },
         type: ProductVariantCreateReducerActionType.changeAttributeValuePrice
       },
@@ -172,7 +172,7 @@ describe("Reducer is able to", () => {
         changeAttributeValuePrice: {
           channelId: channels[1].id,
           price: (value + 6).toString(),
-          valueId: attribute.values[1]
+          valueId: attribute.values[1].slug
         },
         type: ProductVariantCreateReducerActionType.changeAttributeValuePrice
       },
@@ -209,7 +209,7 @@ describe("Reducer is able to", () => {
       {
         changeAttributeValueStock: {
           quantity,
-          valueId: attribute.values[0],
+          valueId: attribute.values[0].slug,
           warehouseIndex: 0
         },
         type: ProductVariantCreateReducerActionType.changeAttributeValueStock
@@ -217,7 +217,7 @@ describe("Reducer is able to", () => {
       {
         changeAttributeValueStock: {
           quantity: quantity + 6,
-          valueId: attribute.values[1],
+          valueId: attribute.values[1].slug,
           warehouseIndex: 0
         },
         type: ProductVariantCreateReducerActionType.changeAttributeValueStock

src/products/components/ProductVariantCreatorPage/reducer.ts

@@ -1,3 +1,4 @@
+import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFragment";
 import { StockInput } from "@saleor/types/globalTypes";
 import {
   add,
@@ -10,6 +11,7 @@ import {
 
 import { createVariants } from "./createVariants";
 import {
+  AttributeValue,
   ProductVariantCreateFormData,
   VariantCreatorPricesAndSkuMode
 } from "./form";
@@ -72,19 +74,22 @@ export interface ProductVariantCreateReducerAction {
   reload?: {
     data?: ProductVariantCreateFormData;
   };
-  selectValue?: Record<"attributeId" | "valueId", string>;
+  selectValue?: {
+    attributeId: string;
+    value: AttributeValue<AttributeValueFragment>;
+  };
   type: ProductVariantCreateReducerActionType;
 }
 
 function selectValue(
   prevState: ProductVariantCreateFormData,
   attributeId: string,
-  valueSlug: string
+  value: AttributeValue<AttributeValueFragment>
 ): ProductVariantCreateFormData {
   const attribute = prevState.attributes.find(
     attribute => attribute.id === attributeId
   );
-  const values = toggle(valueSlug, attribute.values, (a, b) => a === b);
+  const values = toggle(value, attribute.values, (a, b) => a.slug === b.slug);
   const updatedAttributes = add(
     {
       id: attributeId,
@@ -97,7 +102,7 @@ function selectValue(
     prevState.price.attribute === attributeId
       ? toggle(
           {
-            slug: valueSlug,
+            slug: value.slug,
             value: []
           },
           prevState.price.values,
@@ -109,7 +114,7 @@ function selectValue(
     prevState.stock.attribute === attributeId
       ? toggle(
           {
-            slug: valueSlug,
+            slug: value.slug,
             value: []
           },
           prevState.stock.values,
@@ -237,8 +242,8 @@ function changeApplyPriceToAttributeId(
   const attribute = state.attributes.find(
     attribute => attribute.id === attributeId
   );
-  const values = attribute.values.map(slug => ({
+  const values = attribute.values.map(value => ({
-    slug,
+    slug: value.slug,
     value: []
   }));
 
@@ -259,8 +264,8 @@ function changeApplyStockToAttributeId(
   const attribute = state.attributes.find(
     attribute => attribute.id === attributeId
   );
-  const values = attribute.values.map(slug => ({
+  const values = attribute.values.map(value => ({
-    slug,
+    slug: value.slug,
     value: []
   }));
 
@@ -435,7 +440,7 @@ function reduceProductVariantCreateFormData(
       return selectValue(
         prevState,
         action.selectValue.attributeId,
-        action.selectValue.valueId
+        action.selectValue.value
       );
     case ProductVariantCreateReducerActionType.applyPriceToAll:
       return applyPriceToAll(prevState, action.applyPriceOrStockToAll.mode);

src/products/components/ProductVariantCreatorPage/utils.ts

@@ -1,6 +1,6 @@
 import {
   ProductDetails_product_productType_variantAttributes,
-  ProductDetails_product_productType_variantAttributes_values
+  ProductDetails_product_productType_variantAttributes_choices_edges_node
 } from "@saleor/products/types/ProductDetails";
 
 import { ProductVariantCreateFormData } from "./form";
@@ -8,33 +8,39 @@ import { ProductVariantCreateFormData } from "./form";
 export function getPriceAttributeValues(
   data: ProductVariantCreateFormData,
   attributes: ProductDetails_product_productType_variantAttributes[]
-): ProductDetails_product_productType_variantAttributes_values[] {
+): ProductDetails_product_productType_variantAttributes_choices_edges_node[] {
   return data.price.mode === "all"
     ? null
     : data.price.attribute
     ? attributes
         .find(attribute => attribute.id === data.price.attribute)
-        .values.filter(value =>
+        .choices.edges.filter(value =>
           data.attributes
             .find(attribute => attribute.id === data.price.attribute)
-            .values.includes(value.slug)
+            .values.some(
+              attributeValue => attributeValue.slug === value.node.slug
+            )
         )
+        .map(value => value.node)
     : [];
 }
 
 export function getStockAttributeValues(
   data: ProductVariantCreateFormData,
   attributes: ProductDetails_product_productType_variantAttributes[]
-): ProductDetails_product_productType_variantAttributes_values[] {
+): ProductDetails_product_productType_variantAttributes_choices_edges_node[] {
   return data.stock.mode === "all"
     ? null
     : data.stock.attribute
     ? attributes
         .find(attribute => attribute.id === data.stock.attribute)
-        .values.filter(value =>
+        .choices.edges.filter(value =>
           data.attributes
             .find(attribute => attribute.id === data.stock.attribute)
-            .values.includes(value.slug)
+            .values.some(
+              attributeValue => attributeValue.slug === value.node.slug
+            )
         )
+        .map(value => value.node)
     : [];
 }

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -22,6 +22,7 @@ import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/Prod
 import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
+import { SearchAttributeValues_attribute_choices_edges_node } from "@saleor/searches/types/SearchAttributeValues";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { FetchMoreProps, ReorderAction } from "@saleor/types";
@@ -87,11 +88,15 @@ interface ProductVariantPageProps {
   warehouses: WarehouseFragment[];
   referencePages?: SearchPages_search_edges_node[];
   referenceProducts?: SearchProducts_search_edges_node[];
+  attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  fetchMoreAttributeValues?: FetchMoreProps;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
+  fetchAttributeValues: (query: string) => void;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
+  onAttributeFocus: (id: string) => void;
   onCloseDialog: () => void;
   onVariantReorder: ReorderAction;
   onAdd();
@@ -118,6 +123,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   warehouses,
   referencePages = [],
   referenceProducts = [],
+  attributeValues,
   onAdd,
   onBack,
   onDelete,
@@ -127,12 +133,15 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   onVariantReorder,
   onSetDefaultVariant,
   onWarehouseConfigure,
+  onAttributeFocus,
   assignReferencesAttributeId,
   onAssignReferencesClick,
   fetchReferencePages,
   fetchReferenceProducts,
+  fetchAttributeValues,
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
+  fetchMoreAttributeValues,
   onCloseDialog
 }) => {
   const intl = useIntl();
@@ -226,6 +235,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                         attribute.data.variantAttributeScope ===
                         VariantAttributeScope.NOT_VARIANT_SELECTION
                     )}
+                    attributeValues={attributeValues}
                     loading={loading}
                     disabled={loading}
                     errors={errors}
@@ -235,6 +245,9 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesRemove={handlers.selectAttributeReference}
                     onReferencesAddClick={onAssignReferencesClick}
                     onReferencesReorder={handlers.reorderAttributeValue}
+                    fetchAttributeValues={fetchAttributeValues}
+                    fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeFocus={onAttributeFocus}
                   />
                   <CardSpacer />
                   <Attributes
@@ -246,6 +259,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                         attribute.data.variantAttributeScope ===
                         VariantAttributeScope.VARIANT_SELECTION
                     )}
+                    attributeValues={attributeValues}
                     loading={loading}
                     disabled={loading}
                     errors={errors}
@@ -255,6 +269,9 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesRemove={handlers.selectAttributeReference}
                     onReferencesAddClick={onAssignReferencesClick}
                     onReferencesReorder={handlers.reorderAttributeValue}
+                    fetchAttributeValues={fetchAttributeValues}
+                    fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeFocus={onAttributeFocus}
                   />
                   <CardSpacer />
                   <ProductVariantMedia

src/products/fixtures.ts

@@ -30,26 +30,44 @@ export const product: (
         slug: "Borders",
         valueRequired: false,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: null,
+            endCursor: "WyI4IiwgIjMiXQ==",
-            id: "ptav47282",
+            hasNextPage: false,
-            name: "portals",
+            hasPreviousPage: false,
-            reference: null,
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            slug: "portals",
+            __typename: "PageInfo"
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptav17253",
+              cursor: "",
-            name: "Baht",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "Baht",
+                file: null,
-            richText: null
+                id: "ptav47282",
-          }
+                name: "portals",
-        ]
+                reference: null,
+                slug: "portals",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav17253",
+                name: "Baht",
+                reference: null,
+                slug: "Baht",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       values: [
         {
@@ -74,44 +92,70 @@ export const product: (
         slug: "Legacy",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: null,
+            endCursor: "WyI4IiwgIjMiXQ==",
-            id: "ptav31282",
+            hasNextPage: false,
-            name: "payment",
+            hasPreviousPage: false,
-            reference: null,
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            slug: "payment",
+            __typename: "PageInfo"
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptav14907",
+              cursor: "",
-            name: "Auto Loan Account",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "Auto-Loan-Account",
+                file: null,
-            richText: null
+                id: "ptav31282",
-          },
+                name: "payment",
-          {
+                reference: null,
-            __typename: "AttributeValue",
+                slug: "payment",
-            file: null,
+                richText: null
-            id: "ptav27366",
+              }
-            name: "Garden",
+            },
-            reference: null,
+            {
-            slug: "Garden",
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          },
+              node: {
-          {
+                __typename: "AttributeValue",
-            __typename: "AttributeValue",
+                file: null,
-            file: null,
+                id: "ptav14907",
-            id: "ptav11873",
+                name: "Auto Loan Account",
-            name: "override",
+                reference: null,
-            reference: null,
+                slug: "Auto-Loan-Account",
-            slug: "override",
+                richText: null
-            richText: null
+              }
-          }
+            },
-        ]
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav27366",
+                name: "Garden",
+                reference: null,
+                slug: "Garden",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav11873",
+                name: "override",
+                reference: null,
+                slug: "override",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       values: [
         {
@@ -292,21 +336,35 @@ export const product: (
         slug: "attachment",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: {
+            endCursor: "WyI4IiwgIjMiXQ==",
-              __typename: "File",
+            hasNextPage: false,
-              contentType: "image/png",
+            hasPreviousPage: false,
-              url: "some-non-existing-url"
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            },
+            __typename: "PageInfo"
-            id: "gdghdgdhkkdae",
+          },
-            name: "File First Value",
+          edges: [
-            reference: null,
+            {
-            slug: "file-first-value",
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          }
+              node: {
-        ]
+                __typename: "AttributeValue",
+                file: {
+                  __typename: "File",
+                  contentType: "image/png",
+                  url: "some-non-existing-url"
+                },
+                id: "gdghdgdhkkdae",
+                name: "File First Value",
+                reference: null,
+                slug: "file-first-value",
+                richText: null
+              }
+            }
+          ]
+        }
       }
     ],
     selectionVariantAttributes: [
@@ -319,26 +377,44 @@ export const product: (
         slug: "color",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: null,
+            endCursor: "WyI4IiwgIjMiXQ==",
-            id: "ptvav47282",
+            hasNextPage: false,
-            name: "Black",
+            hasPreviousPage: false,
-            reference: null,
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            slug: "black",
+            __typename: "PageInfo"
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptvav17253",
+              cursor: "",
-            name: "White",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "white",
+                file: null,
-            richText: null
+                id: "ptvav47282",
-          }
+                name: "Black",
-        ]
+                reference: null,
+                slug: "black",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptvav17253",
+                name: "White",
+                reference: null,
+                slug: "white",
+                richText: null
+              }
+            }
+          ]
+        }
       }
     ],
     taxType: {
@@ -350,53 +426,79 @@ export const product: (
       {
         __typename: "Attribute",
         id: "isdugfhud",
-        inputType: AttributeInputTypeEnum.FILE,
         name: "Attachment",
-        slug: "attachment",
+        choices: {
-        valueRequired: true,
+          __typename: "AttributeValueCountableConnection",
-        values: [
+          pageInfo: {
-          {
+            endCursor: "WyI4IiwgIjMiXQ==",
-            __typename: "AttributeValue",
+            hasNextPage: false,
-            file: {
+            hasPreviousPage: false,
-              __typename: "File",
+            startCursor: "WyIwIiwgIjQ5Il0=",
-              contentType: "image/png",
+            __typename: "PageInfo"
-              url: "some-non-existing-url"
+          },
-            },
+          edges: [
-            id: "gdghdgdhkkdae",
+            {
-            name: "File First Value",
+              __typename: "AttributeValueCountableEdge",
-            reference: null,
+              cursor: "",
-            slug: "file-first-value",
+              node: {
-            richText: null
+                __typename: "AttributeValue",
-          }
+                file: {
-        ]
+                  __typename: "File",
+                  contentType: "image/png",
+                  url: "some-non-existing-url"
+                },
+                id: "gdghdgdhkkdae",
+                name: "File First Value",
+                reference: null,
+                slug: "file-first-value",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       {
         __typename: "Attribute",
         id: "pta18161",
-        inputType: AttributeInputTypeEnum.DROPDOWN,
         name: "Color",
-        slug: "color",
+        choices: {
-        valueRequired: true,
+          __typename: "AttributeValueCountableConnection",
-        values: [
+          pageInfo: {
-          {
+            endCursor: "WyI4IiwgIjMiXQ==",
-            __typename: "AttributeValue",
+            hasNextPage: false,
-            file: null,
+            hasPreviousPage: false,
-            id: "ptvav47282",
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            name: "Black",
+            __typename: "PageInfo"
-            reference: null,
-            slug: "black",
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptvav17253",
+              cursor: "",
-            name: "White",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "white",
+                file: null,
-            richText: null
+                id: "ptvav47282",
-          }
+                name: "Black",
-        ]
+                reference: null,
+                slug: "black",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptvav17253",
+                name: "White",
+                reference: null,
+                slug: "white",
+                richText: null
+              }
+            }
+          ]
+        }
       }
     ]
   },
@@ -2783,21 +2885,35 @@ export const variant = (placeholderImage: string): ProductVariant => ({
         slug: "attachment",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: {
+            endCursor: "WyI4IiwgIjMiXQ==",
-              __typename: "File",
+            hasNextPage: false,
-              contentType: "image/png",
+            hasPreviousPage: false,
-              url: "some-non-existing-url"
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            },
+            __typename: "PageInfo"
-            id: "gdghdgdhkkdae",
+          },
-            name: "File First Value",
+          edges: [
-            reference: null,
+            {
-            slug: "file-first-value",
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          }
+              node: {
-        ]
+                __typename: "AttributeValue",
+                file: {
+                  __typename: "File",
+                  contentType: "image/png",
+                  url: "some-non-existing-url"
+                },
+                id: "gdghdgdhkkdae",
+                name: "File First Value",
+                reference: null,
+                slug: "file-first-value",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       values: [
         {
@@ -3052,26 +3168,44 @@ export const variant = (placeholderImage: string): ProductVariant => ({
         slug: "Borders",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: null,
+            endCursor: "WyI4IiwgIjMiXQ==",
-            id: "ptav47282",
+            hasNextPage: false,
-            name: "portals",
+            hasPreviousPage: false,
-            reference: null,
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            slug: "portals",
+            __typename: "PageInfo"
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptav17253",
+              cursor: "",
-            name: "Baht",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "Baht",
+                file: null,
-            richText: null
+                id: "ptav47282",
-          }
+                name: "portals",
-        ]
+                reference: null,
+                slug: "portals",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav17253",
+                name: "Baht",
+                reference: null,
+                slug: "Baht",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       values: [
         {
@@ -3096,44 +3230,70 @@ export const variant = (placeholderImage: string): ProductVariant => ({
         slug: "Legacy",
         valueRequired: true,
         unit: null,
-        values: [
+        choices: {
-          {
+          __typename: "AttributeValueCountableConnection",
-            __typename: "AttributeValue",
+          pageInfo: {
-            file: null,
+            endCursor: "WyI4IiwgIjMiXQ==",
-            id: "ptav31282",
+            hasNextPage: false,
-            name: "payment",
+            hasPreviousPage: false,
-            reference: null,
+            startCursor: "WyIwIiwgIjQ5Il0=",
-            slug: "payment",
+            __typename: "PageInfo"
-            richText: null
           },
-          {
+          edges: [
-            __typename: "AttributeValue",
+            {
-            file: null,
+              __typename: "AttributeValueCountableEdge",
-            id: "ptav14907",
+              cursor: "",
-            name: "Auto Loan Account",
+              node: {
-            reference: null,
+                __typename: "AttributeValue",
-            slug: "Auto-Loan-Account",
+                file: null,
-            richText: null
+                id: "ptav31282",
-          },
+                name: "payment",
-          {
+                reference: null,
-            __typename: "AttributeValue",
+                slug: "payment",
-            file: null,
+                richText: null
-            id: "ptav27366",
+              }
-            name: "Garden",
+            },
-            reference: null,
+            {
-            slug: "Garden",
+              __typename: "AttributeValueCountableEdge",
-            richText: null
+              cursor: "",
-          },
+              node: {
-          {
+                __typename: "AttributeValue",
-            __typename: "AttributeValue",
+                file: null,
-            file: null,
+                id: "ptav14907",
-            id: "ptav11873",
+                name: "Auto Loan Account",
-            name: "override",
+                reference: null,
-            reference: null,
+                slug: "Auto-Loan-Account",
-            slug: "override",
+                richText: null
-            richText: null
+              }
-          }
+            },
-        ]
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav27366",
+                name: "Garden",
+                reference: null,
+                slug: "Garden",
+                richText: null
+              }
+            },
+            {
+              __typename: "AttributeValueCountableEdge",
+              cursor: "",
+              node: {
+                __typename: "AttributeValue",
+                file: null,
+                id: "ptav11873",
+                name: "override",
+                reference: null,
+                slug: "override",
+                richText: null
+              }
+            }
+          ]
+        }
       },
       values: [
         {

src/products/mutations.ts

@@ -8,7 +8,10 @@ import {
   stockErrorFragment
 } from "@saleor/fragments/errors";
 import {
+  channelListingProductFragment,
+  channelListingProductVariantFragment,
   exportFileFragment,
+  fragmentProductMedia,
   fragmentVariant,
   productFragmentDetails
 } from "@saleor/fragments/products";
@@ -81,7 +84,7 @@ import { VariantUpdate, VariantUpdateVariables } from "./types/VariantUpdate";
 
 export const productMediaCreateMutation = gql`
   ${productErrorFragment}
-  ${productFragmentDetails}
+  ${fragmentProductMedia}
   mutation ProductMediaCreate(
     $product: ID!
     $image: Upload
@@ -100,7 +103,10 @@ export const productMediaCreateMutation = gql`
         ...ProductErrorFragment
       }
       product {
-        ...Product
+        id
+        media {
+          ...ProductMediaFragment
+        }
       }
     }
   }
@@ -154,14 +160,21 @@ export const useProductMediaReorder = makeMutation<
 
 const productVariantSetDefault = gql`
   ${productErrorFragment}
-  ${productFragmentDetails}
   mutation ProductVariantSetDefault($productId: ID!, $variantId: ID!) {
     productVariantSetDefault(productId: $productId, variantId: $variantId) {
       errors {
         ...ProductErrorFragment
       }
       product {
-        ...Product
+        id
+        defaultVariant {
+          id
+          name
+        }
+        variants {
+          id
+          name
+        }
       }
     }
   }
@@ -175,7 +188,14 @@ export const useProductVariantSetDefaultMutation = makeMutation<
 export const productUpdateMutation = gql`
   ${productErrorWithAttributesFragment}
   ${productFragmentDetails}
-  mutation ProductUpdate($id: ID!, $input: ProductInput!) {
+  mutation ProductUpdate(
+    $id: ID!
+    $input: ProductInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     productUpdate(id: $id, input: $input) {
       errors {
         ...ProductErrorWithAttributesFragment
@@ -205,6 +225,10 @@ export const simpleProductUpdateMutation = gql`
     $addStocks: [StockInput!]!
     $deleteStocks: [ID!]!
     $updateStocks: [StockInput!]!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
   ) {
     productUpdate(id: $id, input: $input) {
       errors {
@@ -264,14 +288,13 @@ export const useSimpleProductUpdateMutation = makeMutation<
 
 export const productCreateMutation = gql`
   ${productErrorWithAttributesFragment}
-  ${productFragmentDetails}
   mutation ProductCreate($input: ProductCreateInput!) {
     productCreate(input: $input) {
       errors {
         ...ProductErrorWithAttributesFragment
       }
       product {
-        ...Product
+        id
       }
     }
   }
@@ -312,6 +335,10 @@ export const variantUpdateMutation = gql`
     $trackInventory: Boolean!
     $stocks: [StockInput!]!
     $weight: WeightScalar
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
   ) {
     productVariantUpdate(
       id: $id
@@ -370,7 +397,13 @@ export const useVariantUpdateMutation = makeMutation<
 export const variantCreateMutation = gql`
   ${fragmentVariant}
   ${productErrorWithAttributesFragment}
-  mutation VariantCreate($input: ProductVariantCreateInput!) {
+  mutation VariantCreate(
+    $input: ProductVariantCreateInput!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     productVariantCreate(input: $input) {
       errors {
         ...ProductErrorWithAttributesFragment
@@ -409,14 +442,17 @@ export const useProductMediaDeleteMutation = makeMutation<
 
 export const productMediaUpdateMutation = gql`
   ${productErrorFragment}
-  ${productFragmentDetails}
+  ${fragmentProductMedia}
   mutation ProductMediaUpdate($id: ID!, $alt: String!) {
     productMediaUpdate(id: $id, input: { alt: $alt }) {
       errors {
         ...ProductErrorFragment
       }
       product {
-        ...Product
+        id
+        media {
+          ...ProductMediaFragment
+        }
       }
     }
   }
@@ -427,7 +463,7 @@ export const useProductMediaUpdateMutation = makeMutation<
 >(productMediaUpdateMutation);
 
 export const variantMediaAssignMutation = gql`
-  ${fragmentVariant}
+  ${fragmentProductMedia}
   ${productErrorFragment}
   mutation VariantMediaAssign($variantId: ID!, $mediaId: ID!) {
     variantMediaAssign(variantId: $variantId, mediaId: $mediaId) {
@@ -435,7 +471,24 @@ export const variantMediaAssignMutation = gql`
         ...ProductErrorFragment
       }
       productVariant {
-        ...ProductVariant
+        id
+        media {
+          ...ProductMediaFragment
+        }
+        product {
+          id
+          media {
+            ...ProductMediaFragment
+          }
+          variants {
+            id
+            name
+            sku
+            media {
+              ...ProductMediaFragment
+            }
+          }
+        }
       }
     }
   }
@@ -446,7 +499,7 @@ export const useVariantMediaAssignMutation = makeMutation<
 >(variantMediaAssignMutation);
 
 export const variantMediaUnassignMutation = gql`
-  ${fragmentVariant}
+  ${fragmentProductMedia}
   ${productErrorFragment}
   mutation VariantMediaUnassign($variantId: ID!, $mediaId: ID!) {
     variantMediaUnassign(variantId: $variantId, mediaId: $mediaId) {
@@ -454,7 +507,24 @@ export const variantMediaUnassignMutation = gql`
         ...ProductErrorFragment
       }
       productVariant {
-        ...ProductVariant
+        id
+        media {
+          ...ProductMediaFragment
+        }
+        product {
+          id
+          media {
+            ...ProductMediaFragment
+          }
+          variants {
+            id
+            name
+            sku
+            media {
+              ...ProductMediaFragment
+            }
+          }
+        }
       }
     }
   }
@@ -532,7 +602,8 @@ export const useProductExport = makeMutation<
 >(productExportMutation);
 
 export const ProductChannelListingUpdateMutation = gql`
-  ${productFragmentDetails}
+  ${channelListingProductFragment}
+  ${channelListingProductVariantFragment}
   ${productChannelListingErrorFragment}
   mutation ProductChannelListingUpdate(
     $id: ID!
@@ -540,7 +611,16 @@ export const ProductChannelListingUpdateMutation = gql`
   ) {
     productChannelListingUpdate(id: $id, input: $input) {
       product {
-        ...Product
+        id
+        channelListings {
+          ...ChannelListingProductFragment
+        }
+        variants {
+          id
+          channelListings {
+            ...ChannelListingProductVariantFragment
+          }
+        }
       }
       errors {
         ...ProductChannelListingErrorFragment
@@ -551,14 +631,16 @@ export const ProductChannelListingUpdateMutation = gql`
 
 const productVariantReorder = gql`
   ${productErrorFragment}
-  ${productFragmentDetails}
   mutation ProductVariantReorder($move: ReorderInput!, $productId: ID!) {
     productVariantReorder(moves: [$move], productId: $productId) {
       errors {
         ...ProductErrorFragment
       }
       product {
-        ...Product
+        id
+        variants {
+          id
+        }
       }
     }
   }
@@ -573,7 +655,8 @@ export const useProductChannelListingUpdate = makeMutation<
 >(ProductChannelListingUpdateMutation);
 
 export const ProductVariantChannelListingUpdateMutation = gql`
-  ${fragmentVariant}
+  ${channelListingProductVariantFragment}
+  ${channelListingProductFragment}
   ${productChannelListingErrorFragment}
   mutation ProductVariantChannelListingUpdate(
     $id: ID!
@@ -581,7 +664,15 @@ export const ProductVariantChannelListingUpdateMutation = gql`
   ) {
     productVariantChannelListingUpdate(id: $id, input: $input) {
       variant {
-        ...ProductVariant
+        id
+        channelListings {
+          ...ChannelListingProductVariantFragment
+        }
+        product {
+          channelListings {
+            ...ChannelListingProductFragment
+          }
+        }
       }
       errors {
         ...ProductChannelListingErrorFragment

src/products/queries.ts

@@ -1,4 +1,7 @@
-import { attributeValueFragment } from "@saleor/fragments/attributes";
+import {
+  attributeValueFragment,
+  attributeValueListFragment
+} from "@saleor/fragments/attributes";
 import { pageInfoFragment } from "@saleor/fragments/pageInfo";
 import {
   fragmentVariant,
@@ -24,7 +27,10 @@ import {
   GridAttributes,
   GridAttributesVariables
 } from "./types/GridAttributes";
-import { InitialProductFilterAttributes } from "./types/InitialProductFilterAttributes";
+import {
+  InitialProductFilterAttributes,
+  InitialProductFilterAttributesVariables
+} from "./types/InitialProductFilterAttributes";
 import {
   InitialProductFilterCategories,
   InitialProductFilterCategoriesVariables
@@ -54,7 +60,13 @@ import {
 } from "./types/ProductVariantDetails";
 
 const initialProductFilterAttributesQuery = gql`
-  query InitialProductFilterAttributes {
+  ${pageInfoFragment}
+  query InitialProductFilterAttributes(
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     attributes(
       first: 100
       filter: { filterableInDashboard: true, type: PRODUCT_TYPE }
@@ -64,10 +76,23 @@ const initialProductFilterAttributesQuery = gql`
           id
           name
           slug
-          values {
+          choices(
-            id
+            first: $firstValues
-            name
+            after: $afterValues
-            slug
+            last: $lastValues
+            before: $beforeValues
+          ) {
+            pageInfo {
+              ...PageInfoFragment
+            }
+            edges {
+              cursor
+              node {
+                id
+                name
+                slug
+              }
+            }
           }
         }
       }
@@ -76,7 +101,7 @@ const initialProductFilterAttributesQuery = gql`
 `;
 export const useInitialProductFilterAttributesQuery = makeQuery<
   InitialProductFilterAttributes,
-  null
+  InitialProductFilterAttributesVariables
 >(initialProductFilterAttributesQuery);
 
 const initialProductFilterCategoriesQuery = gql`
@@ -192,7 +217,14 @@ export const useProductCountQuery = makeQuery<
 const productDetailsQuery = gql`
   ${productFragmentDetails}
   ${taxTypeFragment}
-  query ProductDetails($id: ID!, $channel: String) {
+  query ProductDetails(
+    $id: ID!
+    $channel: String
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     product(id: $id, channel: $channel) {
       ...Product
     }
@@ -208,8 +240,14 @@ export const useProductDetails = makeQuery<
 
 const productTypeQuery = gql`
   ${taxTypeFragment}
-  ${attributeValueFragment}
+  ${attributeValueListFragment}
-  query ProductType($id: ID!) {
+  query ProductType(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     productType(id: $id) {
       id
       name
@@ -222,8 +260,13 @@ const productTypeQuery = gql`
         name
         valueRequired
         unit
-        values {
+        choices(
-          ...AttributeValueFragment
+          first: $firstValues
+          after: $afterValues
+          last: $lastValues
+          before: $beforeValues
+        ) {
+          ...AttributeValueListFragment
         }
       }
       taxType {
@@ -238,7 +281,13 @@ export const useProductTypeQuery = makeQuery<ProductType, ProductTypeVariables>(
 
 const productVariantQuery = gql`
   ${fragmentVariant}
-  query ProductVariantDetails($id: ID!) {
+  query ProductVariantDetails(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     productVariant(id: $id) {
       ...ProductVariant
     }
@@ -251,7 +300,13 @@ export const useProductVariantQuery = makeQuery<
 
 const productVariantCreateQuery = gql`
   ${variantAttributeFragment}
-  query ProductVariantCreateData($id: ID!) {
+  query ProductVariantCreateData(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     product(id: $id) {
       id
       media {
@@ -370,7 +425,13 @@ export const useAvailableInGridAttributesQuery = makeQuery<
 const createMultipleVariantsData = gql`
   ${productVariantAttributesFragment}
   ${warehouseFragment}
-  query CreateMultipleVariantsData($id: ID!) {
+  query CreateMultipleVariantsData(
+    $id: ID!
+    $firstValues: Int
+    $afterValues: String
+    $lastValues: Int
+    $beforeValues: String
+  ) {
     product(id: $id) {
       ...ProductVariantAttributesFragment
     }

src/products/types/CreateMultipleVariantsData.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL query operation: CreateMultipleVariantsData
 // ====================================================
 
-export interface CreateMultipleVariantsData_product_attributes_attribute_values_file {
+export interface CreateMultipleVariantsData_product_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface CreateMultipleVariantsData_product_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface CreateMultipleVariantsData_product_attributes_attribute_values {
+export interface CreateMultipleVariantsData_product_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: CreateMultipleVariantsData_product_attributes_attribute_values_file | null;
+  file: CreateMultipleVariantsData_product_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface CreateMultipleVariantsData_product_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: CreateMultipleVariantsData_product_attributes_attribute_choices_edges_node;
+}
+
+export interface CreateMultipleVariantsData_product_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: CreateMultipleVariantsData_product_attributes_attribute_choices_pageInfo;
+  edges: CreateMultipleVariantsData_product_attributes_attribute_choices_edges[];
+}
+
 export interface CreateMultipleVariantsData_product_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface CreateMultipleVariantsData_product_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (CreateMultipleVariantsData_product_attributes_attribute_values | null)[] | null;
+  choices: CreateMultipleVariantsData_product_attributes_attribute_choices | null;
 }
 
 export interface CreateMultipleVariantsData_product_attributes_values_file {
@@ -59,27 +79,47 @@ export interface CreateMultipleVariantsData_product_attributes {
   values: (CreateMultipleVariantsData_product_attributes_values | null)[];
 }
 
-export interface CreateMultipleVariantsData_product_productType_variantAttributes_values_file {
+export interface CreateMultipleVariantsData_product_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface CreateMultipleVariantsData_product_productType_variantAttributes_values {
+export interface CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: CreateMultipleVariantsData_product_productType_variantAttributes_values_file | null;
+  file: CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges_node;
+}
+
+export interface CreateMultipleVariantsData_product_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: CreateMultipleVariantsData_product_productType_variantAttributes_choices_pageInfo;
+  edges: CreateMultipleVariantsData_product_productType_variantAttributes_choices_edges[];
+}
+
 export interface CreateMultipleVariantsData_product_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (CreateMultipleVariantsData_product_productType_variantAttributes_values | null)[] | null;
+  choices: CreateMultipleVariantsData_product_productType_variantAttributes_choices | null;
 }
 
 export interface CreateMultipleVariantsData_product_productType {
@@ -165,4 +205,8 @@ export interface CreateMultipleVariantsData {
 
 export interface CreateMultipleVariantsDataVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/InitialProductFilterAttributes.ts

@@ -7,19 +7,39 @@
 // GraphQL query operation: InitialProductFilterAttributes
 // ====================================================
 
-export interface InitialProductFilterAttributes_attributes_edges_node_values {
+export interface InitialProductFilterAttributes_attributes_edges_node_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface InitialProductFilterAttributes_attributes_edges_node_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
 }
 
+export interface InitialProductFilterAttributes_attributes_edges_node_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: InitialProductFilterAttributes_attributes_edges_node_choices_edges_node;
+}
+
+export interface InitialProductFilterAttributes_attributes_edges_node_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: InitialProductFilterAttributes_attributes_edges_node_choices_pageInfo;
+  edges: InitialProductFilterAttributes_attributes_edges_node_choices_edges[];
+}
+
 export interface InitialProductFilterAttributes_attributes_edges_node {
   __typename: "Attribute";
   id: string;
   name: string | null;
   slug: string | null;
-  values: (InitialProductFilterAttributes_attributes_edges_node_values | null)[] | null;
+  choices: InitialProductFilterAttributes_attributes_edges_node_choices | null;
 }
 
 export interface InitialProductFilterAttributes_attributes_edges {
@@ -35,3 +55,10 @@ export interface InitialProductFilterAttributes_attributes {
 export interface InitialProductFilterAttributes {
   attributes: InitialProductFilterAttributes_attributes | null;
 }
+
+export interface InitialProductFilterAttributesVariables {
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
+}

src/products/types/ProductChannelListingUpdate.ts

@@ -3,100 +3,12 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductChannelListingUpdateInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
+import { ProductChannelListingUpdateInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductChannelListingUpdate
 // ====================================================
 
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute;
-  values: (ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values | null)[];
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductChannelListingUpdate_productChannelListingUpdate_product_productType_taxType | null;
-}
-
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings_channel {
   __typename: "Channel";
   id: string;
@@ -139,71 +51,13 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings {
   __typename: "ProductChannelListing";
-  channel: ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings_channel;
-  pricing: ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings_pricing | null;
   isPublished: boolean;
   publicationDate: any | null;
   isAvailableForPurchase: boolean | null;
   availableForPurchase: any | null;
   visibleInListings: boolean;
-}
+  channel: ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings_channel;
-
+  pricing: ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings_pricing | null;
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_category {
-  __typename: "Category";
-  id: string;
-  name: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_media {
-  __typename: "ProductMedia";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductChannelListingUpdate_productChannelListingUpdate_product_variants_stocks_warehouse;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants_channelListings_channel {
@@ -235,50 +89,14 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants {
   __typename: "ProductVariant";
   id: string;
-  sku: string;
-  name: string;
-  margin: number | null;
-  media: ProductChannelListingUpdate_productChannelListingUpdate_product_variants_media[] | null;
-  stocks: (ProductChannelListingUpdate_productChannelListingUpdate_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
   channelListings: ProductChannelListingUpdate_productChannelListingUpdate_product_variants_channelListings[] | null;
 }
 
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product {
   __typename: "Product";
   id: string;
-  attributes: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes[];
-  productType: ProductChannelListingUpdate_productChannelListingUpdate_product_productType;
   channelListings: ProductChannelListingUpdate_productChannelListingUpdate_product_channelListings[] | null;
-  metadata: (ProductChannelListingUpdate_productChannelListingUpdate_product_metadata | null)[];
-  privateMetadata: (ProductChannelListingUpdate_productChannelListingUpdate_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
-  defaultVariant: ProductChannelListingUpdate_productChannelListingUpdate_product_defaultVariant | null;
-  category: ProductChannelListingUpdate_productChannelListingUpdate_product_category | null;
-  collections: (ProductChannelListingUpdate_productChannelListingUpdate_product_collections | null)[] | null;
-  chargeTaxes: boolean;
-  media: ProductChannelListingUpdate_productChannelListingUpdate_product_media[] | null;
-  isAvailable: boolean | null;
   variants: (ProductChannelListingUpdate_productChannelListingUpdate_product_variants | null)[] | null;
-  weight: ProductChannelListingUpdate_productChannelListingUpdate_product_weight | null;
-  taxType: ProductChannelListingUpdate_productChannelListingUpdate_product_taxType | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_errors {

src/products/types/ProductCreate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductCreateInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductCreateInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductCreate
@@ -16,276 +16,9 @@ export interface ProductCreate_productCreate_errors {
   attributes: string[] | null;
 }
 
-export interface ProductCreate_productCreate_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductCreate_productCreate_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductCreate_productCreate_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductCreate_productCreate_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductCreate_productCreate_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductCreate_productCreate_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductCreate_productCreate_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductCreate_productCreate_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductCreate_productCreate_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductCreate_productCreate_product_attributes_attribute;
-  values: (ProductCreate_productCreate_product_attributes_values | null)[];
-}
-
-export interface ProductCreate_productCreate_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductCreate_productCreate_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductCreate_productCreate_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductCreate_productCreate_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductCreate_productCreate_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductCreate_productCreate_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductCreate_productCreate_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductCreate_productCreate_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductCreate_productCreate_product_productType_taxType | null;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: ProductCreate_productCreate_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: ProductCreate_productCreate_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: ProductCreate_productCreate_product_channelListings_pricing_priceRange_start | null;
-  stop: ProductCreate_productCreate_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface ProductCreate_productCreate_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: ProductCreate_productCreate_product_channelListings_pricing_priceRange | null;
-}
-
-export interface ProductCreate_productCreate_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: ProductCreate_productCreate_product_channelListings_channel;
-  pricing: ProductCreate_productCreate_product_channelListings_pricing | null;
-  isPublished: boolean;
-  publicationDate: any | null;
-  isAvailableForPurchase: boolean | null;
-  availableForPurchase: any | null;
-  visibleInListings: boolean;
-}
-
-export interface ProductCreate_productCreate_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductCreate_productCreate_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductCreate_productCreate_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductCreate_productCreate_product_category {
-  __typename: "Category";
-  id: string;
-  name: string;
-}
-
-export interface ProductCreate_productCreate_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
-export interface ProductCreate_productCreate_product_media {
-  __typename: "ProductMedia";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductCreate_productCreate_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductCreate_productCreate_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductCreate_productCreate_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductCreate_productCreate_product_variants_stocks_warehouse;
-}
-
-export interface ProductCreate_productCreate_product_variants_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductCreate_productCreate_product_variants_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductCreate_productCreate_product_variants_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductCreate_productCreate_product_variants_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductCreate_productCreate_product_variants_channelListings_channel;
-  price: ProductCreate_productCreate_product_variants_channelListings_price | null;
-  costPrice: ProductCreate_productCreate_product_variants_channelListings_costPrice | null;
-}
-
-export interface ProductCreate_productCreate_product_variants {
-  __typename: "ProductVariant";
-  id: string;
-  sku: string;
-  name: string;
-  margin: number | null;
-  media: ProductCreate_productCreate_product_variants_media[] | null;
-  stocks: (ProductCreate_productCreate_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
-  channelListings: ProductCreate_productCreate_product_variants_channelListings[] | null;
-}
-
-export interface ProductCreate_productCreate_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductCreate_productCreate_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
 export interface ProductCreate_productCreate_product {
   __typename: "Product";
   id: string;
-  attributes: ProductCreate_productCreate_product_attributes[];
-  productType: ProductCreate_productCreate_product_productType;
-  channelListings: ProductCreate_productCreate_product_channelListings[] | null;
-  metadata: (ProductCreate_productCreate_product_metadata | null)[];
-  privateMetadata: (ProductCreate_productCreate_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
-  defaultVariant: ProductCreate_productCreate_product_defaultVariant | null;
-  category: ProductCreate_productCreate_product_category | null;
-  collections: (ProductCreate_productCreate_product_collections | null)[] | null;
-  chargeTaxes: boolean;
-  media: ProductCreate_productCreate_product_media[] | null;
-  isAvailable: boolean | null;
-  variants: (ProductCreate_productCreate_product_variants | null)[] | null;
-  weight: ProductCreate_productCreate_product_weight | null;
-  taxType: ProductCreate_productCreate_product_taxType | null;
 }
 
 export interface ProductCreate_productCreate {

src/products/types/ProductDetails.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum,
 // GraphQL query operation: ProductDetails
 // ====================================================
 
-export interface ProductDetails_product_attributes_attribute_values_file {
+export interface ProductDetails_product_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductDetails_product_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductDetails_product_attributes_attribute_values {
+export interface ProductDetails_product_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductDetails_product_attributes_attribute_values_file | null;
+  file: ProductDetails_product_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductDetails_product_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductDetails_product_attributes_attribute_choices_edges_node;
+}
+
+export interface ProductDetails_product_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductDetails_product_attributes_attribute_choices_pageInfo;
+  edges: ProductDetails_product_attributes_attribute_choices_edges[];
+}
+
 export interface ProductDetails_product_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface ProductDetails_product_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductDetails_product_attributes_attribute_values | null)[] | null;
+  choices: ProductDetails_product_attributes_attribute_choices | null;
 }
 
 export interface ProductDetails_product_attributes_values_file {
@@ -59,27 +79,47 @@ export interface ProductDetails_product_attributes {
   values: (ProductDetails_product_attributes_values | null)[];
 }
 
-export interface ProductDetails_product_productType_variantAttributes_values_file {
+export interface ProductDetails_product_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductDetails_product_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductDetails_product_productType_variantAttributes_values {
+export interface ProductDetails_product_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductDetails_product_productType_variantAttributes_values_file | null;
+  file: ProductDetails_product_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductDetails_product_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductDetails_product_productType_variantAttributes_choices_edges_node;
+}
+
+export interface ProductDetails_product_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductDetails_product_productType_variantAttributes_choices_pageInfo;
+  edges: ProductDetails_product_productType_variantAttributes_choices_edges[];
+}
+
 export interface ProductDetails_product_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (ProductDetails_product_productType_variantAttributes_values | null)[] | null;
+  choices: ProductDetails_product_productType_variantAttributes_choices | null;
 }
 
 export interface ProductDetails_product_productType_taxType {
@@ -295,4 +335,8 @@ export interface ProductDetails {
 export interface ProductDetailsVariables {
   id: string;
   channel?: string | null;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/ProductMediaCreate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductErrorCode, ProductMediaType } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductMediaCreate
@@ -15,174 +15,6 @@ export interface ProductMediaCreate_productMediaCreate_errors {
   field: string | null;
 }
 
-export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaCreate_productMediaCreate_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductMediaCreate_productMediaCreate_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaCreate_productMediaCreate_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductMediaCreate_productMediaCreate_product_attributes_attribute;
-  values: (ProductMediaCreate_productMediaCreate_product_attributes_values | null)[];
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductMediaCreate_productMediaCreate_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductMediaCreate_productMediaCreate_product_productType_taxType | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start | null;
-  stop: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: ProductMediaCreate_productMediaCreate_product_channelListings_channel;
-  pricing: ProductMediaCreate_productMediaCreate_product_channelListings_pricing | null;
-  isPublished: boolean;
-  publicationDate: any | null;
-  isAvailableForPurchase: boolean | null;
-  availableForPurchase: any | null;
-  visibleInListings: boolean;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_category {
-  __typename: "Category";
-  id: string;
-  name: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
 export interface ProductMediaCreate_productMediaCreate_product_media {
   __typename: "ProductMedia";
   id: string;
@@ -193,98 +25,10 @@ export interface ProductMediaCreate_productMediaCreate_product_media {
   oembedData: any;
 }
 
-export interface ProductMediaCreate_productMediaCreate_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductMediaCreate_productMediaCreate_product_variants_stocks_warehouse;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductMediaCreate_productMediaCreate_product_variants_channelListings_channel;
-  price: ProductMediaCreate_productMediaCreate_product_variants_channelListings_price | null;
-  costPrice: ProductMediaCreate_productMediaCreate_product_variants_channelListings_costPrice | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_variants {
-  __typename: "ProductVariant";
-  id: string;
-  sku: string;
-  name: string;
-  margin: number | null;
-  media: ProductMediaCreate_productMediaCreate_product_variants_media[] | null;
-  stocks: (ProductMediaCreate_productMediaCreate_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
-  channelListings: ProductMediaCreate_productMediaCreate_product_variants_channelListings[] | null;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductMediaCreate_productMediaCreate_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
 export interface ProductMediaCreate_productMediaCreate_product {
   __typename: "Product";
   id: string;
-  attributes: ProductMediaCreate_productMediaCreate_product_attributes[];
-  productType: ProductMediaCreate_productMediaCreate_product_productType;
-  channelListings: ProductMediaCreate_productMediaCreate_product_channelListings[] | null;
-  metadata: (ProductMediaCreate_productMediaCreate_product_metadata | null)[];
-  privateMetadata: (ProductMediaCreate_productMediaCreate_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
-  defaultVariant: ProductMediaCreate_productMediaCreate_product_defaultVariant | null;
-  category: ProductMediaCreate_productMediaCreate_product_category | null;
-  collections: (ProductMediaCreate_productMediaCreate_product_collections | null)[] | null;
-  chargeTaxes: boolean;
   media: ProductMediaCreate_productMediaCreate_product_media[] | null;
-  isAvailable: boolean | null;
-  variants: (ProductMediaCreate_productMediaCreate_product_variants | null)[] | null;
-  weight: ProductMediaCreate_productMediaCreate_product_weight | null;
-  taxType: ProductMediaCreate_productMediaCreate_product_taxType | null;
 }
 
 export interface ProductMediaCreate_productMediaCreate {

src/products/types/ProductMediaUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductErrorCode, ProductMediaType } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductMediaUpdate
@@ -15,174 +15,6 @@ export interface ProductMediaUpdate_productMediaUpdate_errors {
   field: string | null;
 }
 
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaUpdate_productMediaUpdate_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductMediaUpdate_productMediaUpdate_product_attributes_attribute;
-  values: (ProductMediaUpdate_productMediaUpdate_product_attributes_values | null)[];
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductMediaUpdate_productMediaUpdate_product_productType_taxType | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start | null;
-  stop: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: ProductMediaUpdate_productMediaUpdate_product_channelListings_channel;
-  pricing: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing | null;
-  isPublished: boolean;
-  publicationDate: any | null;
-  isAvailableForPurchase: boolean | null;
-  availableForPurchase: any | null;
-  visibleInListings: boolean;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_category {
-  __typename: "Category";
-  id: string;
-  name: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
 export interface ProductMediaUpdate_productMediaUpdate_product_media {
   __typename: "ProductMedia";
   id: string;
@@ -193,98 +25,10 @@ export interface ProductMediaUpdate_productMediaUpdate_product_media {
   oembedData: any;
 }
 
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductMediaUpdate_productMediaUpdate_product_variants_stocks_warehouse;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_channel;
-  price: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_price | null;
-  costPrice: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_costPrice | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_variants {
-  __typename: "ProductVariant";
-  id: string;
-  sku: string;
-  name: string;
-  margin: number | null;
-  media: ProductMediaUpdate_productMediaUpdate_product_variants_media[] | null;
-  stocks: (ProductMediaUpdate_productMediaUpdate_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
-  channelListings: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings[] | null;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductMediaUpdate_productMediaUpdate_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
 export interface ProductMediaUpdate_productMediaUpdate_product {
   __typename: "Product";
   id: string;
-  attributes: ProductMediaUpdate_productMediaUpdate_product_attributes[];
-  productType: ProductMediaUpdate_productMediaUpdate_product_productType;
-  channelListings: ProductMediaUpdate_productMediaUpdate_product_channelListings[] | null;
-  metadata: (ProductMediaUpdate_productMediaUpdate_product_metadata | null)[];
-  privateMetadata: (ProductMediaUpdate_productMediaUpdate_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
-  defaultVariant: ProductMediaUpdate_productMediaUpdate_product_defaultVariant | null;
-  category: ProductMediaUpdate_productMediaUpdate_product_category | null;
-  collections: (ProductMediaUpdate_productMediaUpdate_product_collections | null)[] | null;
-  chargeTaxes: boolean;
   media: ProductMediaUpdate_productMediaUpdate_product_media[] | null;
-  isAvailable: boolean | null;
-  variants: (ProductMediaUpdate_productMediaUpdate_product_variants | null)[] | null;
-  weight: ProductMediaUpdate_productMediaUpdate_product_weight | null;
-  taxType: ProductMediaUpdate_productMediaUpdate_product_taxType | null;
 }
 
 export interface ProductMediaUpdate_productMediaUpdate {

src/products/types/ProductType.ts

@@ -9,22 +9,42 @@ import { AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum }
 // GraphQL query operation: ProductType
 // ====================================================
 
-export interface ProductType_productType_productAttributes_values_file {
+export interface ProductType_productType_productAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductType_productType_productAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductType_productType_productAttributes_values {
+export interface ProductType_productType_productAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductType_productType_productAttributes_values_file | null;
+  file: ProductType_productType_productAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductType_productType_productAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductType_productType_productAttributes_choices_edges_node;
+}
+
+export interface ProductType_productType_productAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductType_productType_productAttributes_choices_pageInfo;
+  edges: ProductType_productType_productAttributes_choices_edges[];
+}
+
 export interface ProductType_productType_productAttributes {
   __typename: "Attribute";
   id: string;
@@ -34,7 +54,7 @@ export interface ProductType_productType_productAttributes {
   name: string | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductType_productType_productAttributes_values | null)[] | null;
+  choices: ProductType_productType_productAttributes_choices | null;
 }
 
 export interface ProductType_productType_taxType {
@@ -58,4 +78,8 @@ export interface ProductType {
 
 export interface ProductTypeVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/ProductUpdate.ts

@@ -16,22 +16,42 @@ export interface ProductUpdate_productUpdate_errors {
   attributes: string[] | null;
 }
 
-export interface ProductUpdate_productUpdate_product_attributes_attribute_values_file {
+export interface ProductUpdate_productUpdate_product_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductUpdate_productUpdate_product_attributes_attribute_values {
+export interface ProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
+  file: ProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductUpdate_productUpdate_product_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node;
+}
+
+export interface ProductUpdate_productUpdate_product_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductUpdate_productUpdate_product_attributes_attribute_choices_pageInfo;
+  edges: ProductUpdate_productUpdate_product_attributes_attribute_choices_edges[];
+}
+
 export interface ProductUpdate_productUpdate_product_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -41,7 +61,7 @@ export interface ProductUpdate_productUpdate_product_attributes_attribute {
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductUpdate_productUpdate_product_attributes_attribute_values | null)[] | null;
+  choices: ProductUpdate_productUpdate_product_attributes_attribute_choices | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes_values_file {
@@ -66,27 +86,47 @@ export interface ProductUpdate_productUpdate_product_attributes {
   values: (ProductUpdate_productUpdate_product_attributes_values | null)[];
 }
 
-export interface ProductUpdate_productUpdate_product_productType_variantAttributes_values_file {
+export interface ProductUpdate_productUpdate_product_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductUpdate_productUpdate_product_productType_variantAttributes_values {
+export interface ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
+  file: ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node;
+}
+
+export interface ProductUpdate_productUpdate_product_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductUpdate_productUpdate_product_productType_variantAttributes_choices_pageInfo;
+  edges: ProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges[];
+}
+
 export interface ProductUpdate_productUpdate_product_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (ProductUpdate_productUpdate_product_productType_variantAttributes_values | null)[] | null;
+  choices: ProductUpdate_productUpdate_product_productType_variantAttributes_choices | null;
 }
 
 export interface ProductUpdate_productUpdate_product_productType_taxType {
@@ -301,4 +341,8 @@ export interface ProductUpdate {
 export interface ProductUpdateVariables {
   id: string;
   input: ProductInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/ProductVariantChannelListingUpdate.ts

@@ -3,150 +3,36 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductVariantChannelListingAddInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
+import { ProductVariantChannelListingAddInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantChannelListingUpdate
 // ====================================================
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_metadata {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_channel {
-  __typename: "MetadataItem";
+  __typename: "Channel";
-  key: string;
-  value: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
   id: string;
-  name: string | null;
+  name: string;
-  slug: string | null;
+  currencyCode: string;
-  file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_price {
-  __typename: "Attribute";
+  __typename: "Money";
-  id: string;
+  amount: number;
-  name: string | null;
+  currency: string;
-  slug: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values | null)[] | null;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values_file {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_costPrice {
-  __typename: "File";
+  __typename: "Money";
-  url: string;
+  amount: number;
-  contentType: string | null;
+  currency: string;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings {
-  __typename: "AttributeValue";
+  __typename: "ProductVariantChannelListing";
-  id: string;
+  channel: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_channel;
-  name: string | null;
+  price: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_price | null;
-  slug: string | null;
+  costPrice: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_costPrice | null;
-  file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute;
-  values: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values | null)[];
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values | null)[] | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute;
-  values: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values | null)[];
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_media {
-  __typename: "ProductMedia";
-  id: string;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_media {
-  __typename: "ProductMedia";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_thumbnail {
-  __typename: "Image";
-  url: string;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings_channel {
@@ -191,100 +77,25 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings {
   __typename: "ProductChannelListing";
-  publicationDate: any | null;
   isPublished: boolean;
+  publicationDate: any | null;
+  isAvailableForPurchase: boolean | null;
+  availableForPurchase: any | null;
+  visibleInListings: boolean;
   channel: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings_channel;
   pricing: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings_pricing | null;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_media {
-  __typename: "ProductMedia";
-  id: string;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants {
-  __typename: "ProductVariant";
-  id: string;
-  name: string;
-  sku: string;
-  media: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_media[] | null;
-}
-
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product {
   __typename: "Product";
-  id: string;
-  defaultVariant: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_defaultVariant | null;
-  media: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_media[] | null;
-  name: string;
-  thumbnail: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_thumbnail | null;
   channelListings: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings[] | null;
-  variants: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants | null)[] | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_channel;
-  price: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_price | null;
-  costPrice: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings_costPrice | null;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_stocks_warehouse;
-}
-
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant {
   __typename: "ProductVariant";
   id: string;
-  metadata: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_metadata | null)[];
-  privateMetadata: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_privateMetadata | null)[];
-  selectionAttributes: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes[];
-  nonSelectionAttributes: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes[];
-  media: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_media[] | null;
-  name: string;
-  product: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product;
   channelListings: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings[] | null;
-  sku: string;
+  product: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product;
-  stocks: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_stocks | null)[] | null;
-  trackInventory: boolean;
-  weight: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_weight | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_errors {

src/products/types/ProductVariantCreateData.ts

@@ -28,22 +28,42 @@ export interface ProductVariantCreateData_product_channelListings {
   channel: ProductVariantCreateData_product_channelListings_channel;
 }
 
-export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_values_file {
+export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_values {
+export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantCreateData_product_productType_selectionVariantAttributes_values_file | null;
+  file: ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges_node;
+}
+
+export interface ProductVariantCreateData_product_productType_selectionVariantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_pageInfo;
+  edges: ProductVariantCreateData_product_productType_selectionVariantAttributes_choices_edges[];
+}
+
 export interface ProductVariantCreateData_product_productType_selectionVariantAttributes {
   __typename: "Attribute";
   id: string;
@@ -53,25 +73,45 @@ export interface ProductVariantCreateData_product_productType_selectionVariantAt
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantCreateData_product_productType_selectionVariantAttributes_values | null)[] | null;
+  choices: ProductVariantCreateData_product_productType_selectionVariantAttributes_choices | null;
 }
 
-export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values_file {
+export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values {
+export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values_file | null;
+  file: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges_node;
+}
+
+export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_pageInfo;
+  edges: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices_edges[];
+}
+
 export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes {
   __typename: "Attribute";
   id: string;
@@ -81,7 +121,7 @@ export interface ProductVariantCreateData_product_productType_nonSelectionVarian
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values | null)[] | null;
+  choices: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_choices | null;
 }
 
 export interface ProductVariantCreateData_product_productType {
@@ -128,4 +168,8 @@ export interface ProductVariantCreateData {
 
 export interface ProductVariantCreateDataVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/ProductVariantDetails.ts

@@ -21,22 +21,42 @@ export interface ProductVariantDetails_productVariant_privateMetadata {
   value: string;
 }
 
-export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_values_file {
+export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_values {
+export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantDetails_productVariant_selectionAttributes_attribute_values_file | null;
+  file: ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges_node;
+}
+
+export interface ProductVariantDetails_productVariant_selectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_pageInfo;
+  edges: ProductVariantDetails_productVariant_selectionAttributes_attribute_choices_edges[];
+}
+
 export interface ProductVariantDetails_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -46,7 +66,7 @@ export interface ProductVariantDetails_productVariant_selectionAttributes_attrib
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantDetails_productVariant_selectionAttributes_attribute_values | null)[] | null;
+  choices: ProductVariantDetails_productVariant_selectionAttributes_attribute_choices | null;
 }
 
 export interface ProductVariantDetails_productVariant_selectionAttributes_values_file {
@@ -71,22 +91,42 @@ export interface ProductVariantDetails_productVariant_selectionAttributes {
   values: (ProductVariantDetails_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values_file {
+export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values {
+export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  file: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges_node;
+}
+
+export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_pageInfo;
+  edges: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices_edges[];
+}
+
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -96,7 +136,7 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes_att
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
+  choices: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_choices | null;
 }
 
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes_values_file {
@@ -293,4 +333,8 @@ export interface ProductVariantDetails {
 
 export interface ProductVariantDetailsVariables {
   id: string;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/ProductVariantReorder.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ReorderInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ReorderInput, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantReorder
@@ -15,276 +15,15 @@ export interface ProductVariantReorder_productVariantReorder_errors {
   field: string | null;
 }
 
-export interface ProductVariantReorder_productVariantReorder_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantReorder_productVariantReorder_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantReorder_productVariantReorder_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantReorder_productVariantReorder_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductVariantReorder_productVariantReorder_product_attributes_attribute;
-  values: (ProductVariantReorder_productVariantReorder_product_attributes_values | null)[];
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductVariantReorder_productVariantReorder_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductVariantReorder_productVariantReorder_product_productType_taxType | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_start | null;
-  stop: ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: ProductVariantReorder_productVariantReorder_product_channelListings_pricing_priceRange | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: ProductVariantReorder_productVariantReorder_product_channelListings_channel;
-  pricing: ProductVariantReorder_productVariantReorder_product_channelListings_pricing | null;
-  isPublished: boolean;
-  publicationDate: any | null;
-  isAvailableForPurchase: boolean | null;
-  availableForPurchase: any | null;
-  visibleInListings: boolean;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_category {
-  __typename: "Category";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_media {
-  __typename: "ProductMedia";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductVariantReorder_productVariantReorder_product_variants_stocks_warehouse;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_variants_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductVariantReorder_productVariantReorder_product_variants_channelListings_channel;
-  price: ProductVariantReorder_productVariantReorder_product_variants_channelListings_price | null;
-  costPrice: ProductVariantReorder_productVariantReorder_product_variants_channelListings_costPrice | null;
-}
-
 export interface ProductVariantReorder_productVariantReorder_product_variants {
   __typename: "ProductVariant";
   id: string;
-  sku: string;
-  name: string;
-  margin: number | null;
-  media: ProductVariantReorder_productVariantReorder_product_variants_media[] | null;
-  stocks: (ProductVariantReorder_productVariantReorder_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
-  channelListings: ProductVariantReorder_productVariantReorder_product_variants_channelListings[] | null;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductVariantReorder_productVariantReorder_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product {
   __typename: "Product";
   id: string;
-  attributes: ProductVariantReorder_productVariantReorder_product_attributes[];
-  productType: ProductVariantReorder_productVariantReorder_product_productType;
-  channelListings: ProductVariantReorder_productVariantReorder_product_channelListings[] | null;
-  metadata: (ProductVariantReorder_productVariantReorder_product_metadata | null)[];
-  privateMetadata: (ProductVariantReorder_productVariantReorder_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
-  defaultVariant: ProductVariantReorder_productVariantReorder_product_defaultVariant | null;
-  category: ProductVariantReorder_productVariantReorder_product_category | null;
-  collections: (ProductVariantReorder_productVariantReorder_product_collections | null)[] | null;
-  chargeTaxes: boolean;
-  media: ProductVariantReorder_productVariantReorder_product_media[] | null;
-  isAvailable: boolean | null;
   variants: (ProductVariantReorder_productVariantReorder_product_variants | null)[] | null;
-  weight: ProductVariantReorder_productVariantReorder_product_weight | null;
-  taxType: ProductVariantReorder_productVariantReorder_product_taxType | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder {

src/products/types/ProductVariantSetDefault.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, MeasurementUnitsEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantSetDefault
@@ -15,276 +15,23 @@ export interface ProductVariantSetDefault_productVariantSetDefault_errors {
   field: string | null;
 }
 
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  slug: string | null;
-  name: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  unit: MeasurementUnitsEnum | null;
-  values: (ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values | null)[] | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes {
-  __typename: "SelectedAttribute";
-  attribute: ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute;
-  values: (ProductVariantSetDefault_productVariantSetDefault_product_attributes_values | null)[];
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  values: (ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values | null)[] | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_productType {
-  __typename: "ProductType";
-  id: string;
-  variantAttributes: (ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes | null)[] | null;
-  name: string;
-  hasVariants: boolean;
-  taxType: ProductVariantSetDefault_productVariantSetDefault_product_productType_taxType | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_start | null;
-  stop: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing_priceRange | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_channel;
-  pricing: ProductVariantSetDefault_productVariantSetDefault_product_channelListings_pricing | null;
-  isPublished: boolean;
-  publicationDate: any | null;
-  isAvailableForPurchase: boolean | null;
-  availableForPurchase: any | null;
-  visibleInListings: boolean;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
 export interface ProductVariantSetDefault_productVariantSetDefault_product_defaultVariant {
   __typename: "ProductVariant";
   id: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_category {
-  __typename: "Category";
-  id: string;
   name: string;
 }
 
-export interface ProductVariantSetDefault_productVariantSetDefault_product_collections {
-  __typename: "Collection";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_media {
-  __typename: "ProductMedia";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-  type: ProductMediaType;
-  oembedData: any;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_media {
-  __typename: "ProductMedia";
-  url: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: ProductVariantSetDefault_productVariantSetDefault_product_variants_stocks_warehouse;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_channel;
-  price: ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_price | null;
-  costPrice: ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings_costPrice | null;
-}
-
 export interface ProductVariantSetDefault_productVariantSetDefault_product_variants {
   __typename: "ProductVariant";
   id: string;
-  sku: string;
   name: string;
-  margin: number | null;
-  media: ProductVariantSetDefault_productVariantSetDefault_product_variants_media[] | null;
-  stocks: (ProductVariantSetDefault_productVariantSetDefault_product_variants_stocks | null)[] | null;
-  trackInventory: boolean;
-  channelListings: ProductVariantSetDefault_productVariantSetDefault_product_variants_channelListings[] | null;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface ProductVariantSetDefault_productVariantSetDefault_product_taxType {
-  __typename: "TaxType";
-  description: string | null;
-  taxCode: string | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product {
   __typename: "Product";
   id: string;
-  attributes: ProductVariantSetDefault_productVariantSetDefault_product_attributes[];
-  productType: ProductVariantSetDefault_productVariantSetDefault_product_productType;
-  channelListings: ProductVariantSetDefault_productVariantSetDefault_product_channelListings[] | null;
-  metadata: (ProductVariantSetDefault_productVariantSetDefault_product_metadata | null)[];
-  privateMetadata: (ProductVariantSetDefault_productVariantSetDefault_product_privateMetadata | null)[];
-  name: string;
-  slug: string;
-  description: any | null;
-  seoTitle: string | null;
-  seoDescription: string | null;
-  rating: number | null;
   defaultVariant: ProductVariantSetDefault_productVariantSetDefault_product_defaultVariant | null;
-  category: ProductVariantSetDefault_productVariantSetDefault_product_category | null;
-  collections: (ProductVariantSetDefault_productVariantSetDefault_product_collections | null)[] | null;
-  chargeTaxes: boolean;
-  media: ProductVariantSetDefault_productVariantSetDefault_product_media[] | null;
-  isAvailable: boolean | null;
   variants: (ProductVariantSetDefault_productVariantSetDefault_product_variants | null)[] | null;
-  weight: ProductVariantSetDefault_productVariantSetDefault_product_weight | null;
-  taxType: ProductVariantSetDefault_productVariantSetDefault_product_taxType | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault {

src/products/types/SimpleProductUpdate.ts

@@ -16,22 +16,42 @@ export interface SimpleProductUpdate_productUpdate_errors {
   attributes: string[] | null;
 }
 
-export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_values_file {
+export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_values {
+export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: SimpleProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
+  file: SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges_node;
+}
+
+export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_pageInfo;
+  edges: SimpleProductUpdate_productUpdate_product_attributes_attribute_choices_edges[];
+}
+
 export interface SimpleProductUpdate_productUpdate_product_attributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -41,7 +61,7 @@ export interface SimpleProductUpdate_productUpdate_product_attributes_attribute
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productUpdate_product_attributes_attribute_values | null)[] | null;
+  choices: SimpleProductUpdate_productUpdate_product_attributes_attribute_choices | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes_values_file {
@@ -66,27 +86,47 @@ export interface SimpleProductUpdate_productUpdate_product_attributes {
   values: (SimpleProductUpdate_productUpdate_product_attributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values_file {
+export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values {
+export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
+  file: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges_node;
+}
+
+export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_pageInfo;
+  edges: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices_edges[];
+}
+
 export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes {
   __typename: "Attribute";
   id: string;
   name: string | null;
-  values: (SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values | null)[] | null;
+  choices: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_choices | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_productType_taxType {
@@ -313,22 +353,6 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_private
   value: string;
 }
 
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -338,7 +362,6 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_values_file {
@@ -363,22 +386,6 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   values: (SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -388,7 +395,6 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values_file {
@@ -604,22 +610,6 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   value: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -629,7 +619,6 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_values_file {
@@ -654,22 +643,6 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   values: (SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -679,7 +652,6 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_values_file {
@@ -894,22 +866,6 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   value: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -919,7 +875,6 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_values_file {
@@ -944,22 +899,6 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   values: (SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -969,7 +908,6 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_values_file {
@@ -1185,22 +1123,6 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   value: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -1210,7 +1132,6 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values_file {
@@ -1235,22 +1156,6 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   values: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-  richText: any | null;
-}
-
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -1260,7 +1165,6 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values_file {
@@ -1473,4 +1377,8 @@ export interface SimpleProductUpdateVariables {
   addStocks: StockInput[];
   deleteStocks: string[];
   updateStocks: StockInput[];
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }

src/products/types/VariantCreate.ts

@@ -28,22 +28,42 @@ export interface VariantCreate_productVariantCreate_productVariant_privateMetada
   value: string;
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values_file {
+export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values {
+export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values_file | null;
+  file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges_node;
+}
+
+export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_pageInfo;
+  edges: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices_edges[];
+}
+
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -53,7 +73,7 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values | null)[] | null;
+  choices: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_choices | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_values_file {
@@ -78,22 +98,42 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   values: (VariantCreate_productVariantCreate_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values_file {
+export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges_node_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values {
+export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges_node {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges_node_file | null;
   reference: string | null;
   richText: any | null;
 }
 
+export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges {
+  __typename: "AttributeValueCountableEdge";
+  cursor: string;
+  node: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges_node;
+}
+
+export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices {
+  __typename: "AttributeValueCountableConnection";
+  pageInfo: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_pageInfo;
+  edges: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices_edges[];
+}
+
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
@@ -103,7 +143,7 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
   unit: MeasurementUnitsEnum | null;
-  values: (VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
+  choices: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_choices | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_values_file {
@@ -306,4 +346,8 @@ export interface VariantCreate {
 
 export interface VariantCreateVariables {
   input: ProductVariantCreateInput;
+  firstValues?: number | null;
+  afterValues?: string | null;
+  lastValues?: number | null;
+  beforeValues?: string | null;
 }