Use fragments

This commit is contained in:
Luis Alvarez 2020-10-01 18:55:50 -05:00
parent 5bd31d254d
commit 22bd962b71
6 changed files with 143 additions and 232 deletions

View File

@ -8,7 +8,7 @@
},
"documents": [
{
"./lib/bigcommerce/api/operations/**/*.ts": {
"./lib/bigcommerce/api/{operations,fragments}/**/*.ts": {
"noRequire": true
}
}

View File

@ -0,0 +1,66 @@
export const responsiveImageFragment = /* GraphQL */ `
fragment responsiveImage on Image {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
`;
export const productInfoFragment = /* GraphQL */ `
fragment productInfo on Product {
entityId
name
path
brand {
name
}
description
prices {
price {
value
currencyCode
}
salePrice {
value
currencyCode
}
}
images {
edges {
node {
...responsiveImage
}
}
}
variants {
edges {
node {
entityId
defaultImage {
...responsiveImage
}
}
}
}
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
}
${responsiveImageFragment}
`;

View File

@ -2,7 +2,8 @@ import type {
GetAllProductsQuery,
GetAllProductsQueryVariables,
} from 'lib/bigcommerce/schema';
import type { RecursivePartial, RecursiveRequired } from '../types';
import type { RecursivePartial, RecursiveRequired } from '../utils/types';
import { productInfoFragment } from '../fragments/product';
import { getConfig, Images, ProductImageVariables } from '..';
export const getAllProductsQuery = /* GraphQL */ `
@ -26,80 +27,14 @@ export const getAllProductsQuery = /* GraphQL */ `
edges {
cursor
node {
entityId
name
path
brand {
name
}
description
prices {
price {
value
currencyCode
}
salePrice {
value
currencyCode
}
}
images {
edges {
node {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(
width: $imgMediumWidth
height: $imgMediumHeight
)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
}
}
variants {
edges {
node {
entityId
defaultImage {
urlSmall: url(
width: $imgSmallWidth
height: $imgSmallHeight
)
urlMedium: url(
width: $imgMediumWidth
height: $imgMediumHeight
)
urlLarge: url(
width: $imgLargeWidth
height: $imgLargeHeight
)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
}
}
}
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
...productInfo
}
}
}
}
}
${productInfoFragment}
`;
export interface GetAllProductsResult<T> {

View File

@ -2,7 +2,8 @@ import type {
GetProductQuery,
GetProductQueryVariables,
} from 'lib/bigcommerce/schema';
import type { RecursivePartial, RecursiveRequired } from '../types';
import type { RecursivePartial, RecursiveRequired } from '../utils/types';
import { productInfoFragment } from '../fragments/product';
import { getConfig, Images, ProductImageVariables } from '..';
export const getProductQuery = /* GraphQL */ `
@ -22,65 +23,14 @@ export const getProductQuery = /* GraphQL */ `
node {
__typename
... on Product {
entityId
name
path
brand {
name
}
description
prices {
price {
currencyCode
value
}
salePrice {
currencyCode
value
}
}
images {
edges {
node {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(
width: $imgMediumWidth
height: $imgMediumHeight
)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
}
}
variants {
edges {
node {
entityId
}
}
}
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
...productInfo
}
}
}
}
}
${productInfoFragment}
`;
export interface GetProductResult<T> {

View File

@ -1649,6 +1649,70 @@ export enum CurrencyCode {
export type ResponsiveImageFragment = (
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
);
export type ProductInfoFragment = (
{ __typename?: 'Product' }
& Pick<Product, 'entityId' | 'name' | 'path' | 'description'>
& { brand?: Maybe<(
{ __typename?: 'Brand' }
& Pick<Brand, 'name'>
)>, prices?: Maybe<(
{ __typename?: 'Prices' }
& { price: (
{ __typename?: 'Money' }
& Pick<Money, 'value' | 'currencyCode'>
), salePrice?: Maybe<(
{ __typename?: 'Money' }
& Pick<Money, 'value' | 'currencyCode'>
)> }
)>, images: (
{ __typename?: 'ImageConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'ImageEdge' }
& { node: (
{ __typename?: 'Image' }
& ResponsiveImageFragment
) }
)>>> }
), variants: (
{ __typename?: 'VariantConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'VariantEdge' }
& { node: (
{ __typename?: 'Variant' }
& Pick<Variant, 'entityId'>
& { defaultImage?: Maybe<(
{ __typename?: 'Image' }
& ResponsiveImageFragment
)> }
) }
)>>> }
), options: (
{ __typename?: 'OptionConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionEdge' }
& { node: (
{ __typename?: 'ProductOption' }
& Pick<ProductOption, 'entityId' | 'displayName' | 'isRequired'>
& { values: (
{ __typename?: 'OptionValueConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionValueEdge' }
& { node: (
{ __typename?: 'ProductOptionValue' }
& Pick<ProductOptionValue, 'entityId' | 'label'>
) }
)>>> }
) }
) }
)>>> }
) }
);
export type GetAllProductsQueryVariables = Exact<{
first?: Maybe<Scalars['Int']>;
imgSmallWidth?: Maybe<Scalars['Int']>;
@ -1676,61 +1740,7 @@ export type GetAllProductsQuery = (
& Pick<ProductEdge, 'cursor'>
& { node: (
{ __typename?: 'Product' }
& Pick<Product, 'entityId' | 'name' | 'path' | 'description'>
& { brand?: Maybe<(
{ __typename?: 'Brand' }
& Pick<Brand, 'name'>
)>, prices?: Maybe<(
{ __typename?: 'Prices' }
& { price: (
{ __typename?: 'Money' }
& Pick<Money, 'value' | 'currencyCode'>
), salePrice?: Maybe<(
{ __typename?: 'Money' }
& Pick<Money, 'value' | 'currencyCode'>
)> }
)>, images: (
{ __typename?: 'ImageConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'ImageEdge' }
& { node: (
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
) }
)>>> }
), variants: (
{ __typename?: 'VariantConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'VariantEdge' }
& { node: (
{ __typename?: 'Variant' }
& Pick<Variant, 'entityId'>
& { defaultImage?: Maybe<(
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
)> }
) }
)>>> }
), options: (
{ __typename?: 'OptionConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionEdge' }
& { node: (
{ __typename?: 'ProductOption' }
& Pick<ProductOption, 'entityId' | 'displayName' | 'isRequired'>
& { values: (
{ __typename?: 'OptionValueConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionValueEdge' }
& { node: (
{ __typename?: 'ProductOptionValue' }
& Pick<ProductOptionValue, 'entityId' | 'label'>
) }
)>>> }
) }
) }
)>>> }
) }
& ProductInfoFragment
) }
)>>> }
) }
@ -1758,57 +1768,7 @@ export type GetProductQuery = (
{ __typename?: 'Route' }
& { node?: Maybe<{ __typename: 'Brand' } | { __typename: 'Category' } | (
{ __typename: 'Product' }
& Pick<Product, 'entityId' | 'name' | 'path' | 'description'>
& { brand?: Maybe<(
{ __typename?: 'Brand' }
& Pick<Brand, 'name'>
)>, prices?: Maybe<(
{ __typename?: 'Prices' }
& { price: (
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
), salePrice?: Maybe<(
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
)> }
)>, images: (
{ __typename?: 'ImageConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'ImageEdge' }
& { node: (
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
) }
)>>> }
), variants: (
{ __typename?: 'VariantConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'VariantEdge' }
& { node: (
{ __typename?: 'Variant' }
& Pick<Variant, 'entityId'>
) }
)>>> }
), options: (
{ __typename?: 'OptionConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionEdge' }
& { node: (
{ __typename?: 'ProductOption' }
& Pick<ProductOption, 'entityId' | 'displayName' | 'isRequired'>
& { values: (
{ __typename?: 'OptionValueConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionValueEdge' }
& { node: (
{ __typename?: 'ProductOptionValue' }
& Pick<ProductOptionValue, 'entityId' | 'label'>
) }
)>>> }
) }
) }
)>>> }
) }
& ProductInfoFragment
) | { __typename: 'Variant' }> }
) }
) }