diff --git a/CHANGELOG.md b/CHANGELOG.md index 67ef838091..0946c1d934 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ All notable, unreleased changes to this project will be documented in this file. - Persist payment gateways for the whole checkout - #828 by @orzechdev - Add test tags to address book - #847 by @dominik-zeglen - Refresh user data if mutation fails - #854 by @dominik-zeglen +- Fix product list data overfetching - #855 by @dominik-zeglen ## 2.10.4 diff --git a/src/views/Category/Page.tsx b/src/views/Category/Page.tsx index 3de919813a..d78b3f1969 100644 --- a/src/views/Category/Page.tsx +++ b/src/views/Category/Page.tsx @@ -17,7 +17,8 @@ import { FilterSidebar } from "../../@next/components/organisms/FilterSidebar"; import { maybe } from "../../core/utils"; -import { Category_category, Category_products } from "./gqlTypes/Category"; +import { Category_category } from "./gqlTypes/Category"; +import { CategoryProducts_products } from "./gqlTypes/CategoryProducts"; interface SortItem { label: string; @@ -34,7 +35,7 @@ interface PageProps { displayLoader: boolean; filters: IFilters; hasNextPage: boolean; - products: Category_products; + products: CategoryProducts_products; sortOptions: SortOptions; clearFilters: () => void; onLoadMore: () => void; diff --git a/src/views/Category/View.tsx b/src/views/Category/View.tsx index bf81506b7b..24c947db24 100644 --- a/src/views/Category/View.tsx +++ b/src/views/Category/View.tsx @@ -15,7 +15,10 @@ import { maybe, } from "../../core/utils"; import Page from "./Page"; -import { TypedCategoryProductsQuery } from "./queries"; +import { + TypedCategoryProductsQuery, + TypedCategoryProductsDataQuery, +} from "./queries"; type ViewProps = RouteComponentProps<{ id: string; @@ -133,76 +136,93 @@ export const View: React.FC = ({ match }) => { return ( {isOnline => ( - - {({ loading, data, loadMore }) => { - const canDisplayFilters = maybe( - () => !!data.attributes.edges && !!data.category.name, - false - ); - - if (canDisplayFilters) { - const handleLoadMore = () => - loadMore( - (prev, next) => ({ - ...prev, - products: { - ...prev.products, - edges: [...prev.products.edges, ...next.products.edges], - pageInfo: next.products.pageInfo, - }, - }), - { after: data.products.pageInfo.endCursor } - ); - - return ( - - edge.node)} - category={data.category} - displayLoader={loading} - hasNextPage={maybe( - () => data.products.pageInfo.hasNextPage, - false - )} - sortOptions={sortOptions} - activeSortOption={filters.sortBy} - filters={filters} - products={data.products} - onAttributeFiltersChange={onFiltersChange} - onLoadMore={handleLoadMore} - activeFilters={ - filters!.attributes - ? Object.keys(filters!.attributes).length - : 0 - } - onOrder={value => { - setSort(value.value); - }} - /> - - ); - } - - if (data && data.category === null) { + {categoryData => { + if (categoryData.data && categoryData.data.category === null) { return ; } if (!isOnline) { return ; } + + const canDisplayFilters = maybe( + () => + !!categoryData.data.attributes.edges && + !!categoryData.data.category.name, + false + ); + + return ( + + {categoryProducts => { + if (canDisplayFilters) { + const handleLoadMore = () => + categoryProducts.loadMore( + (prev, next) => ({ + ...prev, + products: { + ...prev.products, + edges: [ + ...prev.products.edges, + ...next.products.edges, + ], + pageInfo: next.products.pageInfo, + }, + }), + { + after: + categoryProducts.data.products.pageInfo.endCursor, + } + ); + + return ( + + edge.node + )} + category={categoryData.data.category} + displayLoader={categoryData.loading} + hasNextPage={ + categoryProducts.data?.products?.pageInfo + .hasNextPage + } + sortOptions={sortOptions} + activeSortOption={filters.sortBy} + filters={filters} + products={categoryProducts.data.products} + onAttributeFiltersChange={onFiltersChange} + onLoadMore={handleLoadMore} + activeFilters={ + filters!.attributes + ? Object.keys(filters!.attributes).length + : 0 + } + onOrder={value => { + setSort(value.value); + }} + /> + + ); + } + }} + + ); }} - + )} ); diff --git a/src/views/Category/gqlTypes/Category.ts b/src/views/Category/gqlTypes/Category.ts index dcdae5fbaf..ff52d1b335 100644 --- a/src/views/Category/gqlTypes/Category.ts +++ b/src/views/Category/gqlTypes/Category.ts @@ -2,288 +2,10 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { AttributeInput, ProductOrder } from "./../../../../gqlTypes/globalTypes"; - // ==================================================== // GraphQL query operation: Category // ==================================================== -export interface Category_products_edges_node_thumbnail { - __typename: "Image"; - /** - * The URL of the image. - */ - url: string; - /** - * Alt text for an image. - */ - alt: string | null; -} - -export interface Category_products_edges_node_thumbnail2x { - __typename: "Image"; - /** - * The URL of the image. - */ - url: string; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_start_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_start_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_start { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Category_products_edges_node_pricing_priceRangeUndiscounted_start_gross; - /** - * Amount of money without taxes. - */ - net: Category_products_edges_node_pricing_priceRangeUndiscounted_start_net; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_stop_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_stop_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted_stop { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Category_products_edges_node_pricing_priceRangeUndiscounted_stop_gross; - /** - * Amount of money without taxes. - */ - net: Category_products_edges_node_pricing_priceRangeUndiscounted_stop_net; -} - -export interface Category_products_edges_node_pricing_priceRangeUndiscounted { - __typename: "TaxedMoneyRange"; - /** - * Lower bound of a price range. - */ - start: Category_products_edges_node_pricing_priceRangeUndiscounted_start | null; - /** - * Upper bound of a price range. - */ - stop: Category_products_edges_node_pricing_priceRangeUndiscounted_stop | null; -} - -export interface Category_products_edges_node_pricing_priceRange_start_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRange_start_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRange_start { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Category_products_edges_node_pricing_priceRange_start_gross; - /** - * Amount of money without taxes. - */ - net: Category_products_edges_node_pricing_priceRange_start_net; -} - -export interface Category_products_edges_node_pricing_priceRange_stop_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRange_stop_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Category_products_edges_node_pricing_priceRange_stop { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Category_products_edges_node_pricing_priceRange_stop_gross; - /** - * Amount of money without taxes. - */ - net: Category_products_edges_node_pricing_priceRange_stop_net; -} - -export interface Category_products_edges_node_pricing_priceRange { - __typename: "TaxedMoneyRange"; - /** - * Lower bound of a price range. - */ - start: Category_products_edges_node_pricing_priceRange_start | null; - /** - * Upper bound of a price range. - */ - stop: Category_products_edges_node_pricing_priceRange_stop | null; -} - -export interface Category_products_edges_node_pricing { - __typename: "ProductPricingInfo"; - /** - * Whether it is in sale or not. - */ - onSale: boolean | null; - /** - * The undiscounted price range of the product variants. - */ - priceRangeUndiscounted: Category_products_edges_node_pricing_priceRangeUndiscounted | null; - /** - * The discounted price range of the product variants. - */ - priceRange: Category_products_edges_node_pricing_priceRange | null; -} - -export interface Category_products_edges_node_category { - __typename: "Category"; - /** - * The ID of the object. - */ - id: string; - name: string; -} - -export interface Category_products_edges_node { - __typename: "Product"; - /** - * The ID of the object. - */ - id: string; - name: string; - /** - * The main thumbnail for a product. - */ - thumbnail: Category_products_edges_node_thumbnail | null; - /** - * The main thumbnail for a product. - */ - thumbnail2x: Category_products_edges_node_thumbnail2x | null; - /** - * Lists the storefront product's pricing, the current price and discounts, only meant for displaying. - */ - pricing: Category_products_edges_node_pricing | null; - category: Category_products_edges_node_category | null; -} - -export interface Category_products_edges { - __typename: "ProductCountableEdge"; - /** - * The item at the end of the edge. - */ - node: Category_products_edges_node; -} - -export interface Category_products_pageInfo { - __typename: "PageInfo"; - /** - * When paginating forwards, the cursor to continue. - */ - endCursor: string | null; - /** - * When paginating forwards, are there more items? - */ - hasNextPage: boolean; - /** - * When paginating backwards, are there more items? - */ - hasPreviousPage: boolean; - /** - * When paginating backwards, the cursor to continue. - */ - startCursor: string | null; -} - -export interface Category_products { - __typename: "ProductCountableConnection"; - /** - * A total count of items in the collection. - */ - totalCount: number | null; - edges: Category_products_edges[]; - /** - * Pagination data for this connection. - */ - pageInfo: Category_products_pageInfo; -} - export interface Category_category_backgroundImage { __typename: "Image"; /** @@ -380,10 +102,6 @@ export interface Category_attributes { } export interface Category { - /** - * List of the shop's products. - */ - products: Category_products | null; /** * Look up a category by ID or slug. */ @@ -396,10 +114,4 @@ export interface Category { export interface CategoryVariables { id: string; - attributes?: (AttributeInput | null)[] | null; - after?: string | null; - pageSize?: number | null; - sortBy?: ProductOrder | null; - priceLte?: number | null; - priceGte?: number | null; } diff --git a/src/views/Category/gqlTypes/CategoryProducts.ts b/src/views/Category/gqlTypes/CategoryProducts.ts new file mode 100644 index 0000000000..f5f850e860 --- /dev/null +++ b/src/views/Category/gqlTypes/CategoryProducts.ts @@ -0,0 +1,302 @@ +/* tslint:disable */ +/* eslint-disable */ +// This file was automatically generated and should not be edited. + +import { AttributeInput, ProductOrder } from "./../../../../gqlTypes/globalTypes"; + +// ==================================================== +// GraphQL query operation: CategoryProducts +// ==================================================== + +export interface CategoryProducts_products_edges_node_thumbnail { + __typename: "Image"; + /** + * The URL of the image. + */ + url: string; + /** + * Alt text for an image. + */ + alt: string | null; +} + +export interface CategoryProducts_products_edges_node_thumbnail2x { + __typename: "Image"; + /** + * The URL of the image. + */ + url: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start_gross; + /** + * Amount of money without taxes. + */ + net: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start_net; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_gross; + /** + * Amount of money without taxes. + */ + net: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_net; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted { + __typename: "TaxedMoneyRange"; + /** + * Lower bound of a price range. + */ + start: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_start | null; + /** + * Upper bound of a price range. + */ + stop: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted_stop | null; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_start_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_start_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_start { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CategoryProducts_products_edges_node_pricing_priceRange_start_gross; + /** + * Amount of money without taxes. + */ + net: CategoryProducts_products_edges_node_pricing_priceRange_start_net; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_stop_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_stop_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange_stop { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CategoryProducts_products_edges_node_pricing_priceRange_stop_gross; + /** + * Amount of money without taxes. + */ + net: CategoryProducts_products_edges_node_pricing_priceRange_stop_net; +} + +export interface CategoryProducts_products_edges_node_pricing_priceRange { + __typename: "TaxedMoneyRange"; + /** + * Lower bound of a price range. + */ + start: CategoryProducts_products_edges_node_pricing_priceRange_start | null; + /** + * Upper bound of a price range. + */ + stop: CategoryProducts_products_edges_node_pricing_priceRange_stop | null; +} + +export interface CategoryProducts_products_edges_node_pricing { + __typename: "ProductPricingInfo"; + /** + * Whether it is in sale or not. + */ + onSale: boolean | null; + /** + * The undiscounted price range of the product variants. + */ + priceRangeUndiscounted: CategoryProducts_products_edges_node_pricing_priceRangeUndiscounted | null; + /** + * The discounted price range of the product variants. + */ + priceRange: CategoryProducts_products_edges_node_pricing_priceRange | null; +} + +export interface CategoryProducts_products_edges_node_category { + __typename: "Category"; + /** + * The ID of the object. + */ + id: string; + name: string; +} + +export interface CategoryProducts_products_edges_node { + __typename: "Product"; + /** + * The ID of the object. + */ + id: string; + name: string; + /** + * The main thumbnail for a product. + */ + thumbnail: CategoryProducts_products_edges_node_thumbnail | null; + /** + * The main thumbnail for a product. + */ + thumbnail2x: CategoryProducts_products_edges_node_thumbnail2x | null; + /** + * Lists the storefront product's pricing, the current price and discounts, only meant for displaying. + */ + pricing: CategoryProducts_products_edges_node_pricing | null; + category: CategoryProducts_products_edges_node_category | null; +} + +export interface CategoryProducts_products_edges { + __typename: "ProductCountableEdge"; + /** + * The item at the end of the edge. + */ + node: CategoryProducts_products_edges_node; +} + +export interface CategoryProducts_products_pageInfo { + __typename: "PageInfo"; + /** + * When paginating forwards, the cursor to continue. + */ + endCursor: string | null; + /** + * When paginating forwards, are there more items? + */ + hasNextPage: boolean; + /** + * When paginating backwards, are there more items? + */ + hasPreviousPage: boolean; + /** + * When paginating backwards, the cursor to continue. + */ + startCursor: string | null; +} + +export interface CategoryProducts_products { + __typename: "ProductCountableConnection"; + /** + * A total count of items in the collection. + */ + totalCount: number | null; + edges: CategoryProducts_products_edges[]; + /** + * Pagination data for this connection. + */ + pageInfo: CategoryProducts_products_pageInfo; +} + +export interface CategoryProducts { + /** + * List of the shop's products. + */ + products: CategoryProducts_products | null; +} + +export interface CategoryProductsVariables { + id: string; + attributes?: (AttributeInput | null)[] | null; + after?: string | null; + pageSize?: number | null; + sortBy?: ProductOrder | null; + priceLte?: number | null; + priceGte?: number | null; +} diff --git a/src/views/Category/queries.ts b/src/views/Category/queries.ts index 11c307b33a..e88a854bef 100644 --- a/src/views/Category/queries.ts +++ b/src/views/Category/queries.ts @@ -6,11 +6,59 @@ import { productPricingFragment, } from "../Product/queries"; import { Category, CategoryVariables } from "./gqlTypes/Category"; +import { + CategoryProducts, + CategoryProductsVariables, +} from "./gqlTypes/CategoryProducts"; + +export const categoryProductsDataQuery = gql` + query Category($id: ID!) { + category(id: $id) { + seoDescription + seoTitle + id + name + backgroundImage { + url + } + ancestors(last: 5) { + edges { + node { + id + name + } + } + } + } + attributes( + filter: { inCategory: $id, filterableInStorefront: true } + first: 100 + ) { + edges { + node { + id + name + slug + values { + id + name + slug + } + } + } + } + } +`; + +export const TypedCategoryProductsDataQuery = TypedQuery< + Category, + CategoryVariables +>(categoryProductsDataQuery); export const categoryProductsQuery = gql` ${basicProductFragment} ${productPricingFragment} - query Category( + query CategoryProducts( $id: ID! $attributes: [AttributeInput] $after: String @@ -47,44 +95,10 @@ export const categoryProductsQuery = gql` startCursor } } - category(id: $id) { - seoDescription - seoTitle - id - name - backgroundImage { - url - } - ancestors(last: 5) { - edges { - node { - id - name - } - } - } - } - attributes( - filter: { inCategory: $id, filterableInStorefront: true } - first: 100 - ) { - edges { - node { - id - name - slug - values { - id - name - slug - } - } - } - } } `; export const TypedCategoryProductsQuery = TypedQuery< - Category, - CategoryVariables + CategoryProducts, + CategoryProductsVariables >(categoryProductsQuery); diff --git a/src/views/Collection/Page.tsx b/src/views/Collection/Page.tsx index 49f7583fdb..7a1ae44b22 100644 --- a/src/views/Collection/Page.tsx +++ b/src/views/Collection/Page.tsx @@ -11,10 +11,8 @@ import { Breadcrumbs, ProductsFeatured } from "../../components"; import { getDBIdFromGraphqlId, maybe } from "../../core/utils"; import { FilterSidebar } from "../../@next/components/organisms/FilterSidebar"; -import { - Collection_collection, - Collection_products, -} from "./gqlTypes/Collection"; +import { Collection_collection } from "./gqlTypes/Collection"; +import { CollectionProducts_products } from "./gqlTypes/CollectionProducts"; interface SortItem { label: string; @@ -31,7 +29,7 @@ interface PageProps { displayLoader: boolean; filters: IFilters; hasNextPage: boolean; - products: Collection_products; + products: CollectionProducts_products; sortOptions: SortOptions; clearFilters: () => void; onLoadMore: () => void; diff --git a/src/views/Collection/View.tsx b/src/views/Collection/View.tsx index df4a0f20bd..ff26f1c730 100644 --- a/src/views/Collection/View.tsx +++ b/src/views/Collection/View.tsx @@ -15,7 +15,10 @@ import { maybe, } from "../../core/utils"; import Page from "./Page"; -import { TypedCollectionProductsQuery } from "./queries"; +import { + TypedCollectionProductsDataQuery, + TypedCollectionProductsQuery, +} from "./queries"; type ViewProps = RouteComponentProps<{ id: string; @@ -133,76 +136,98 @@ export const View: React.FC = ({ match }) => { return ( {isOnline => ( - - {({ loading, data, loadMore }) => { + {collectionData => { const canDisplayFilters = maybe( - () => !!data.attributes.edges && !!data.collection.name, + () => + !!collectionData.data.attributes.edges && + !!collectionData.data.collection.name, false ); - if (canDisplayFilters) { - const handleLoadMore = () => - loadMore( - (prev, next) => ({ - ...prev, - products: { - ...prev.products, - edges: [...prev.products.edges, ...next.products.edges], - pageInfo: next.products.pageInfo, - }, - }), - { after: data.products.pageInfo.endCursor } - ); - - return ( - - edge.node)} - collection={data.collection} - displayLoader={loading} - hasNextPage={maybe( - () => data.products.pageInfo.hasNextPage, - false - )} - sortOptions={sortOptions} - activeSortOption={filters.sortBy} - filters={filters} - products={data.products} - onAttributeFiltersChange={onFiltersChange} - onLoadMore={handleLoadMore} - activeFilters={ - filters!.attributes - ? Object.keys(filters!.attributes).length - : 0 - } - onOrder={value => { - setSort(value.value); - }} - /> - - ); - } - - if (data && data.collection === null) { + if ( + collectionData.data && + collectionData.data.collection === null + ) { return ; } if (!isOnline) { return ; } + + return ( + + {collectionProductsData => { + const handleLoadMore = () => + collectionProductsData.loadMore( + (prev, next) => ({ + ...prev, + products: { + ...prev.products, + edges: [ + ...prev.products.edges, + ...next.products.edges, + ], + pageInfo: next.products.pageInfo, + }, + }), + { + after: + collectionProductsData.data.products.pageInfo + .endCursor, + } + ); + if (canDisplayFilters) { + return ( + + edge.node + )} + collection={collectionData.data.collection} + displayLoader={collectionData.loading} + hasNextPage={maybe( + () => + collectionProductsData.data.products.pageInfo + .hasNextPage, + false + )} + sortOptions={sortOptions} + activeSortOption={filters.sortBy} + filters={filters} + products={collectionProductsData.data.products} + onAttributeFiltersChange={onFiltersChange} + onLoadMore={handleLoadMore} + activeFilters={ + filters!.attributes + ? Object.keys(filters!.attributes).length + : 0 + } + onOrder={value => { + setSort(value.value); + }} + /> + + ); + } + }} + + ); }} - + )} ); diff --git a/src/views/Collection/gqlTypes/Collection.ts b/src/views/Collection/gqlTypes/Collection.ts index f3ebc79713..1c70acd45f 100644 --- a/src/views/Collection/gqlTypes/Collection.ts +++ b/src/views/Collection/gqlTypes/Collection.ts @@ -2,8 +2,6 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { AttributeInput, ProductOrder } from "./../../../../gqlTypes/globalTypes"; - // ==================================================== // GraphQL query operation: Collection // ==================================================== @@ -29,282 +27,6 @@ export interface Collection_collection { backgroundImage: Collection_collection_backgroundImage | null; } -export interface Collection_products_edges_node_thumbnail { - __typename: "Image"; - /** - * The URL of the image. - */ - url: string; - /** - * Alt text for an image. - */ - alt: string | null; -} - -export interface Collection_products_edges_node_thumbnail2x { - __typename: "Image"; - /** - * The URL of the image. - */ - url: string; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_start_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_start_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_start { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Collection_products_edges_node_pricing_priceRangeUndiscounted_start_gross; - /** - * Amount of money without taxes. - */ - net: Collection_products_edges_node_pricing_priceRangeUndiscounted_start_net; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_stop_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_stop_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted_stop { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Collection_products_edges_node_pricing_priceRangeUndiscounted_stop_gross; - /** - * Amount of money without taxes. - */ - net: Collection_products_edges_node_pricing_priceRangeUndiscounted_stop_net; -} - -export interface Collection_products_edges_node_pricing_priceRangeUndiscounted { - __typename: "TaxedMoneyRange"; - /** - * Lower bound of a price range. - */ - start: Collection_products_edges_node_pricing_priceRangeUndiscounted_start | null; - /** - * Upper bound of a price range. - */ - stop: Collection_products_edges_node_pricing_priceRangeUndiscounted_stop | null; -} - -export interface Collection_products_edges_node_pricing_priceRange_start_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRange_start_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRange_start { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Collection_products_edges_node_pricing_priceRange_start_gross; - /** - * Amount of money without taxes. - */ - net: Collection_products_edges_node_pricing_priceRange_start_net; -} - -export interface Collection_products_edges_node_pricing_priceRange_stop_gross { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRange_stop_net { - __typename: "Money"; - /** - * Amount of money. - */ - amount: number; - /** - * Currency code. - */ - currency: string; -} - -export interface Collection_products_edges_node_pricing_priceRange_stop { - __typename: "TaxedMoney"; - /** - * Amount of money including taxes. - */ - gross: Collection_products_edges_node_pricing_priceRange_stop_gross; - /** - * Amount of money without taxes. - */ - net: Collection_products_edges_node_pricing_priceRange_stop_net; -} - -export interface Collection_products_edges_node_pricing_priceRange { - __typename: "TaxedMoneyRange"; - /** - * Lower bound of a price range. - */ - start: Collection_products_edges_node_pricing_priceRange_start | null; - /** - * Upper bound of a price range. - */ - stop: Collection_products_edges_node_pricing_priceRange_stop | null; -} - -export interface Collection_products_edges_node_pricing { - __typename: "ProductPricingInfo"; - /** - * Whether it is in sale or not. - */ - onSale: boolean | null; - /** - * The undiscounted price range of the product variants. - */ - priceRangeUndiscounted: Collection_products_edges_node_pricing_priceRangeUndiscounted | null; - /** - * The discounted price range of the product variants. - */ - priceRange: Collection_products_edges_node_pricing_priceRange | null; -} - -export interface Collection_products_edges_node_category { - __typename: "Category"; - /** - * The ID of the object. - */ - id: string; - name: string; -} - -export interface Collection_products_edges_node { - __typename: "Product"; - /** - * The ID of the object. - */ - id: string; - name: string; - /** - * The main thumbnail for a product. - */ - thumbnail: Collection_products_edges_node_thumbnail | null; - /** - * The main thumbnail for a product. - */ - thumbnail2x: Collection_products_edges_node_thumbnail2x | null; - /** - * Lists the storefront product's pricing, the current price and discounts, only meant for displaying. - */ - pricing: Collection_products_edges_node_pricing | null; - category: Collection_products_edges_node_category | null; -} - -export interface Collection_products_edges { - __typename: "ProductCountableEdge"; - /** - * The item at the end of the edge. - */ - node: Collection_products_edges_node; -} - -export interface Collection_products_pageInfo { - __typename: "PageInfo"; - /** - * When paginating forwards, the cursor to continue. - */ - endCursor: string | null; - /** - * When paginating forwards, are there more items? - */ - hasNextPage: boolean; - /** - * When paginating backwards, are there more items? - */ - hasPreviousPage: boolean; - /** - * When paginating backwards, the cursor to continue. - */ - startCursor: string | null; -} - -export interface Collection_products { - __typename: "ProductCountableConnection"; - /** - * A total count of items in the collection. - */ - totalCount: number | null; - edges: Collection_products_edges[]; - /** - * Pagination data for this connection. - */ - pageInfo: Collection_products_pageInfo; -} - export interface Collection_attributes_edges_node_values { __typename: "AttributeValue"; /** @@ -359,10 +81,6 @@ export interface Collection { * Look up a collection by ID. */ collection: Collection_collection | null; - /** - * List of the shop's products. - */ - products: Collection_products | null; /** * List of the shop's attributes. */ @@ -371,10 +89,4 @@ export interface Collection { export interface CollectionVariables { id: string; - attributes?: (AttributeInput | null)[] | null; - after?: string | null; - pageSize?: number | null; - sortBy?: ProductOrder | null; - priceLte?: number | null; - priceGte?: number | null; } diff --git a/src/views/Collection/gqlTypes/CollectionProducts.ts b/src/views/Collection/gqlTypes/CollectionProducts.ts new file mode 100644 index 0000000000..69a4874361 --- /dev/null +++ b/src/views/Collection/gqlTypes/CollectionProducts.ts @@ -0,0 +1,302 @@ +/* tslint:disable */ +/* eslint-disable */ +// This file was automatically generated and should not be edited. + +import { AttributeInput, ProductOrder } from "./../../../../gqlTypes/globalTypes"; + +// ==================================================== +// GraphQL query operation: CollectionProducts +// ==================================================== + +export interface CollectionProducts_products_edges_node_thumbnail { + __typename: "Image"; + /** + * The URL of the image. + */ + url: string; + /** + * Alt text for an image. + */ + alt: string | null; +} + +export interface CollectionProducts_products_edges_node_thumbnail2x { + __typename: "Image"; + /** + * The URL of the image. + */ + url: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start_gross; + /** + * Amount of money without taxes. + */ + net: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start_net; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_gross; + /** + * Amount of money without taxes. + */ + net: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop_net; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted { + __typename: "TaxedMoneyRange"; + /** + * Lower bound of a price range. + */ + start: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_start | null; + /** + * Upper bound of a price range. + */ + stop: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted_stop | null; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_start_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_start_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_start { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CollectionProducts_products_edges_node_pricing_priceRange_start_gross; + /** + * Amount of money without taxes. + */ + net: CollectionProducts_products_edges_node_pricing_priceRange_start_net; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_stop_gross { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_stop_net { + __typename: "Money"; + /** + * Amount of money. + */ + amount: number; + /** + * Currency code. + */ + currency: string; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange_stop { + __typename: "TaxedMoney"; + /** + * Amount of money including taxes. + */ + gross: CollectionProducts_products_edges_node_pricing_priceRange_stop_gross; + /** + * Amount of money without taxes. + */ + net: CollectionProducts_products_edges_node_pricing_priceRange_stop_net; +} + +export interface CollectionProducts_products_edges_node_pricing_priceRange { + __typename: "TaxedMoneyRange"; + /** + * Lower bound of a price range. + */ + start: CollectionProducts_products_edges_node_pricing_priceRange_start | null; + /** + * Upper bound of a price range. + */ + stop: CollectionProducts_products_edges_node_pricing_priceRange_stop | null; +} + +export interface CollectionProducts_products_edges_node_pricing { + __typename: "ProductPricingInfo"; + /** + * Whether it is in sale or not. + */ + onSale: boolean | null; + /** + * The undiscounted price range of the product variants. + */ + priceRangeUndiscounted: CollectionProducts_products_edges_node_pricing_priceRangeUndiscounted | null; + /** + * The discounted price range of the product variants. + */ + priceRange: CollectionProducts_products_edges_node_pricing_priceRange | null; +} + +export interface CollectionProducts_products_edges_node_category { + __typename: "Category"; + /** + * The ID of the object. + */ + id: string; + name: string; +} + +export interface CollectionProducts_products_edges_node { + __typename: "Product"; + /** + * The ID of the object. + */ + id: string; + name: string; + /** + * The main thumbnail for a product. + */ + thumbnail: CollectionProducts_products_edges_node_thumbnail | null; + /** + * The main thumbnail for a product. + */ + thumbnail2x: CollectionProducts_products_edges_node_thumbnail2x | null; + /** + * Lists the storefront product's pricing, the current price and discounts, only meant for displaying. + */ + pricing: CollectionProducts_products_edges_node_pricing | null; + category: CollectionProducts_products_edges_node_category | null; +} + +export interface CollectionProducts_products_edges { + __typename: "ProductCountableEdge"; + /** + * The item at the end of the edge. + */ + node: CollectionProducts_products_edges_node; +} + +export interface CollectionProducts_products_pageInfo { + __typename: "PageInfo"; + /** + * When paginating forwards, the cursor to continue. + */ + endCursor: string | null; + /** + * When paginating forwards, are there more items? + */ + hasNextPage: boolean; + /** + * When paginating backwards, are there more items? + */ + hasPreviousPage: boolean; + /** + * When paginating backwards, the cursor to continue. + */ + startCursor: string | null; +} + +export interface CollectionProducts_products { + __typename: "ProductCountableConnection"; + /** + * A total count of items in the collection. + */ + totalCount: number | null; + edges: CollectionProducts_products_edges[]; + /** + * Pagination data for this connection. + */ + pageInfo: CollectionProducts_products_pageInfo; +} + +export interface CollectionProducts { + /** + * List of the shop's products. + */ + products: CollectionProducts_products | null; +} + +export interface CollectionProductsVariables { + id: string; + attributes?: (AttributeInput | null)[] | null; + after?: string | null; + pageSize?: number | null; + sortBy?: ProductOrder | null; + priceLte?: number | null; + priceGte?: number | null; +} diff --git a/src/views/Collection/queries.ts b/src/views/Collection/queries.ts index 5a6959c8de..0e66907ff9 100644 --- a/src/views/Collection/queries.ts +++ b/src/views/Collection/queries.ts @@ -6,11 +6,52 @@ import { productPricingFragment, } from "../Product/queries"; import { Collection, CollectionVariables } from "./gqlTypes/Collection"; +import { + CollectionProducts, + CollectionProductsVariables, +} from "./gqlTypes/CollectionProducts"; + +export const collectionProductsDataQuery = gql` + query Collection($id: ID!) { + collection(id: $id) { + id + slug + name + seoDescription + seoTitle + backgroundImage { + url + } + } + attributes( + filter: { inCollection: $id, filterableInStorefront: true } + first: 100 + ) { + edges { + node { + id + name + slug + values { + id + name + slug + } + } + } + } + } +`; + +export const TypedCollectionProductsDataQuery = TypedQuery< + Collection, + CollectionVariables +>(collectionProductsDataQuery); export const collectionProductsQuery = gql` ${basicProductFragment} ${productPricingFragment} - query Collection( + query CollectionProducts( $id: ID! $attributes: [AttributeInput] $after: String @@ -19,16 +60,6 @@ export const collectionProductsQuery = gql` $priceLte: Float $priceGte: Float ) { - collection(id: $id) { - id - slug - name - seoDescription - seoTitle - backgroundImage { - url - } - } products( after: $after first: $pageSize @@ -57,27 +88,10 @@ export const collectionProductsQuery = gql` startCursor } } - attributes( - filter: { inCollection: $id, filterableInStorefront: true } - first: 100 - ) { - edges { - node { - id - name - slug - values { - id - name - slug - } - } - } - } } `; export const TypedCollectionProductsQuery = TypedQuery< - Collection, - CollectionVariables + CollectionProducts, + CollectionProductsVariables >(collectionProductsQuery);