mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Use fragments
This commit is contained in:
parent
5bd31d254d
commit
22bd962b71
@ -8,7 +8,7 @@
|
||||
},
|
||||
"documents": [
|
||||
{
|
||||
"./lib/bigcommerce/api/operations/**/*.ts": {
|
||||
"./lib/bigcommerce/api/{operations,fragments}/**/*.ts": {
|
||||
"noRequire": true
|
||||
}
|
||||
}
|
||||
|
66
lib/bigcommerce/api/fragments/product.ts
Normal file
66
lib/bigcommerce/api/fragments/product.ts
Normal 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}
|
||||
`;
|
@ -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> {
|
||||
|
@ -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> {
|
||||
|
172
lib/bigcommerce/schema.d.ts
vendored
172
lib/bigcommerce/schema.d.ts
vendored
@ -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' }> }
|
||||
) }
|
||||
) }
|
||||
|
Loading…
x
Reference in New Issue
Block a user