4
0
forked from crowetic/commerce

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

@@ -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> {