mirror of
https://github.com/vercel/commerce.git
synced 2025-05-17 15:06:59 +00:00
Update queries & structure
This commit is contained in:
parent
0b41b4e618
commit
d4858910e4
@ -6,7 +6,16 @@ import { GetSiteInfoQueryVariables } from '../../../schema'
|
||||
import type { ShopifyConfig, Provider } from '..'
|
||||
import { GetSiteInfoOperation } from '../../types/site'
|
||||
|
||||
import { getCategories, getBrands, getSiteInfoQuery } from '../../utils'
|
||||
import { getBrands } from '../utils/get-brands'
|
||||
import { getCategories } from '../utils/get-categories'
|
||||
|
||||
export const getSiteInfoQuery = /* GraphQL */ `
|
||||
query getSiteInfo {
|
||||
shop {
|
||||
name
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export default function getSiteInfoOperation({
|
||||
commerce,
|
||||
@ -37,20 +46,6 @@ export default function getSiteInfoOperation({
|
||||
|
||||
const categoriesPromise = getCategories(cfg)
|
||||
const brandsPromise = getBrands(cfg)
|
||||
/*
|
||||
const { fetch, locale } = cfg
|
||||
const { data } = await fetch<GetSiteInfoQuery, GetSiteInfoQueryVariables>(
|
||||
query,
|
||||
{ variables },
|
||||
{
|
||||
...(locale && {
|
||||
headers: {
|
||||
'Accept-Language': locale,
|
||||
},
|
||||
}),
|
||||
}
|
||||
)
|
||||
*/
|
||||
|
||||
return {
|
||||
categories: await categoriesPromise,
|
||||
|
@ -3,6 +3,7 @@ import fetch from './fetch'
|
||||
|
||||
import { API_URL, API_TOKEN } from '../../const'
|
||||
import { getError } from '../../utils/handle-fetch-response'
|
||||
import { CommerceError } from '@vercel/commerce/utils/errors'
|
||||
|
||||
const fetchGraphqlApi: GraphQLFetcher = async (
|
||||
query: string,
|
||||
@ -32,6 +33,11 @@ const fetchGraphqlApi: GraphQLFetcher = async (
|
||||
|
||||
return { data, res }
|
||||
} catch (err) {
|
||||
// if the error is a CommerceError, we can use it as-is
|
||||
if (err instanceof CommerceError) {
|
||||
throw err
|
||||
} else {
|
||||
// otherwise, we'll wrap unknown errors in a CommerceError
|
||||
throw getError(
|
||||
[
|
||||
{
|
||||
@ -42,4 +48,5 @@ const fetchGraphqlApi: GraphQLFetcher = async (
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default fetchGraphqlApi
|
||||
|
@ -1,11 +1,11 @@
|
||||
import { ShopifyConfig } from '../api'
|
||||
import { ShopifyConfig } from '..'
|
||||
|
||||
import {
|
||||
GetAllProductVendorsQuery,
|
||||
GetAllProductVendorsQueryVariables,
|
||||
} from '../../schema'
|
||||
} from '../../../schema'
|
||||
|
||||
import { getAllProductVendors } from './queries'
|
||||
import { getAllProductVendors } from '../../utils/queries'
|
||||
|
||||
export type Brand = {
|
||||
entityId: string
|
@ -1,8 +1,7 @@
|
||||
import type { Category } from '../types/site'
|
||||
import { ShopifyConfig } from '../api'
|
||||
import { CollectionEdge } from '../../schema'
|
||||
import { normalizeCategory } from './normalize'
|
||||
import { getSiteCollectionsQuery } from './queries/get-all-collections-query'
|
||||
import { ShopifyConfig } from '..'
|
||||
import type { Category } from '../../types/site'
|
||||
import { CollectionEdge } from '../../../schema'
|
||||
import { normalizeCategory, getSiteCollectionsQuery } from '../../utils'
|
||||
|
||||
export const getCategories = async ({
|
||||
fetch,
|
@ -1,15 +1,13 @@
|
||||
import { useMemo } from 'react'
|
||||
import useCommerceCart, { UseCart } from '@vercel/commerce/cart/use-cart'
|
||||
|
||||
import { SWRHook } from '@vercel/commerce/utils/types'
|
||||
import { getCartQuery, normalizeCart } from '../utils'
|
||||
import { GetCartHook } from '../types/cart'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import { GetCartQueryVariables, QueryRoot } from '../../schema'
|
||||
import { getCartQuery, normalizeCart, setCartUrlCookie } from '../utils'
|
||||
import { GetCartHook } from '../types/cart'
|
||||
|
||||
import { GetCartQueryVariables, QueryRoot } from '../../schema'
|
||||
import { SHOPIFY_CART_ID_COOKIE } from '../const'
|
||||
import { setCartUrlCookie } from '../utils/set-cart-url-cookie'
|
||||
|
||||
export default useCommerceCart as UseCart<typeof handler>
|
||||
export const handler: SWRHook<GetCartHook> = {
|
||||
|
@ -10,6 +10,18 @@ import useRemoveItem, {
|
||||
import type { Cart, LineItem, RemoveItemHook } from '../types/cart'
|
||||
import useCart from './use-cart'
|
||||
|
||||
import {
|
||||
getCartId,
|
||||
normalizeCart,
|
||||
throwUserErrors,
|
||||
cartLinesRemoveMutation,
|
||||
} from '../utils'
|
||||
|
||||
import {
|
||||
CartLinesRemoveMutation,
|
||||
CartLinesRemoveMutationVariables,
|
||||
} from '../../schema'
|
||||
|
||||
export type RemoveItemFn<T = any> = T extends LineItem
|
||||
? (input?: RemoveItemActionInput<T>) => Promise<Cart | null | undefined>
|
||||
: (input: RemoveItemActionInput<T>) => Promise<Cart | null>
|
||||
@ -20,17 +32,6 @@ export type RemoveItemActionInput<T = any> = T extends LineItem
|
||||
|
||||
export default useRemoveItem as UseRemoveItem<typeof handler>
|
||||
|
||||
import {
|
||||
cartLinesRemoveMutation,
|
||||
getCartId,
|
||||
normalizeCart,
|
||||
throwUserErrors,
|
||||
} from '../utils'
|
||||
import {
|
||||
CartLinesRemoveMutation,
|
||||
CartLinesRemoveMutationVariables,
|
||||
} from '../../schema'
|
||||
|
||||
export const handler = {
|
||||
fetchOptions: {
|
||||
query: cartLinesRemoveMutation,
|
||||
|
@ -11,9 +11,12 @@ import useUpdateItem, {
|
||||
|
||||
import useCart from './use-cart'
|
||||
import { handler as removeItemHandler } from './use-remove-item'
|
||||
|
||||
import { getCartId, normalizeCart, cartLinesUpdateMutation } from '../utils'
|
||||
|
||||
import type { UpdateItemHook, LineItem } from '../types/cart'
|
||||
import { getCartId, cartLinesUpdateMutation, normalizeCart } from '../utils'
|
||||
import {
|
||||
|
||||
import type {
|
||||
CartLinesUpdateMutation,
|
||||
CartLinesUpdateMutationVariables,
|
||||
} from '../../schema'
|
||||
|
@ -1,13 +1,16 @@
|
||||
export const API_VERSION = '2022-04'
|
||||
|
||||
export const SHOPIFY_CART_ID_COOKIE = 'shopify_cartId'
|
||||
|
||||
export const SHOPIFY_CART_URL_COOKIE = 'shopify_cartUrl'
|
||||
|
||||
export const SHOPIFY_CUSTOMER_TOKEN_COOKIE = 'shopify_customerToken'
|
||||
|
||||
export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
|
||||
export const STORE_DOMAIN =
|
||||
process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN?.replace(/(^\w+:|^)\/\//, '')
|
||||
|
||||
export const SHOPIFY_COOKIE_EXPIRE = 30
|
||||
|
||||
export const API_URL = `https://${STORE_DOMAIN}/api/2022-04/graphql.json`
|
||||
export const API_URL = `https://${STORE_DOMAIN}/api/${API_VERSION}/graphql.json`
|
||||
|
||||
export const API_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Cookies from 'js-cookie'
|
||||
import { SHOPIFY_CART_ID_COOKIE, SHOPIFY_COOKIE_EXPIRE } from '../const'
|
||||
import { cartCreateMutation } from './mutations/cart-create'
|
||||
import { cartCreateMutation } from './mutations/cart-mutations'
|
||||
|
||||
import {
|
||||
CartCreateMutation,
|
||||
@ -9,9 +9,9 @@ import {
|
||||
CartLineInput,
|
||||
} from '../../schema'
|
||||
|
||||
import { setCartUrlCookie } from './helpers'
|
||||
import { throwUserErrors } from './throw-user-errors'
|
||||
import { setCartUrlCookie } from './set-cart-url-cookie'
|
||||
import { FetcherOptions } from '@vercel/commerce/utils/types'
|
||||
import type { FetcherOptions } from '@vercel/commerce/utils/types'
|
||||
|
||||
export const cartCreate = async (
|
||||
fetch: <T = any, B = Body>(options: FetcherOptions<B>) => Promise<T>,
|
||||
@ -44,5 +44,3 @@ export const cartCreate = async (
|
||||
|
||||
return cart
|
||||
}
|
||||
|
||||
export default cartCreate
|
||||
|
@ -1,21 +0,0 @@
|
||||
import Cookies, { CookieAttributes } from 'js-cookie'
|
||||
import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
|
||||
|
||||
export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||
|
||||
export const setCustomerToken = (
|
||||
token: string | null,
|
||||
options?: CookieAttributes
|
||||
) => {
|
||||
if (!token) {
|
||||
Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||
} else {
|
||||
Cookies.set(
|
||||
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||
token,
|
||||
options ?? {
|
||||
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,82 @@
|
||||
export const cartDetailsFragment = /* GraphQL */ `
|
||||
fragment cartDetails on Cart {
|
||||
id
|
||||
checkoutUrl
|
||||
createdAt
|
||||
updatedAt
|
||||
lines(first: 10) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
quantity
|
||||
merchandise {
|
||||
... on ProductVariant {
|
||||
id
|
||||
id
|
||||
sku
|
||||
title
|
||||
selectedOptions {
|
||||
name
|
||||
value
|
||||
}
|
||||
image {
|
||||
url
|
||||
altText
|
||||
width
|
||||
height
|
||||
}
|
||||
priceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
compareAtPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
product {
|
||||
title
|
||||
handle
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
attributes {
|
||||
key
|
||||
value
|
||||
}
|
||||
buyerIdentity {
|
||||
email
|
||||
customer {
|
||||
id
|
||||
}
|
||||
}
|
||||
estimatedCost {
|
||||
totalAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
subtotalAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalTaxAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalDutyAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const userErrorsFragment = /* GraphQL */ `
|
||||
fragment userErrors on UserError {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
`
|
15
packages/shopify/src/utils/fragments/customer-fragments.ts
Normal file
15
packages/shopify/src/utils/fragments/customer-fragments.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export const customerUserErrorsFragment = /* GraphQL */ `
|
||||
fragment customerUserErrors on CustomerUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
`
|
||||
|
||||
export const customerAccessTokenFragment = /* GraphQL */ `
|
||||
fragment customerAccessToken on CustomerAccessToken {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
`
|
36
packages/shopify/src/utils/fragments/media-fragment.ts
Normal file
36
packages/shopify/src/utils/fragments/media-fragment.ts
Normal file
@ -0,0 +1,36 @@
|
||||
export const mediaFragment = /* GraphQL */ `
|
||||
fragment Media on Media {
|
||||
mediaContentType
|
||||
alt
|
||||
previewImage {
|
||||
url
|
||||
}
|
||||
... on MediaImage {
|
||||
id
|
||||
image {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
}
|
||||
# ... on Video {
|
||||
# id
|
||||
# sources {
|
||||
# mimeType
|
||||
# url
|
||||
# }
|
||||
# }
|
||||
# ... on Model3d {
|
||||
# id
|
||||
# sources {
|
||||
# mimeType
|
||||
# url
|
||||
# }
|
||||
# }
|
||||
# ... on ExternalVideo {
|
||||
# id
|
||||
# embedUrl
|
||||
# host
|
||||
# }
|
||||
}
|
||||
`
|
@ -0,0 +1,36 @@
|
||||
export const productCardFragment = /* GraphQL */ `
|
||||
fragment productCard on Product {
|
||||
id
|
||||
handle
|
||||
availableForSale
|
||||
title
|
||||
productType
|
||||
vendor
|
||||
variants(first: 1) {
|
||||
nodes {
|
||||
id
|
||||
title
|
||||
requiresShipping
|
||||
availableForSale
|
||||
selectedOptions {
|
||||
name
|
||||
value
|
||||
}
|
||||
image {
|
||||
url
|
||||
altText
|
||||
width
|
||||
height
|
||||
}
|
||||
priceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
compareAtPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,6 +0,0 @@
|
||||
import Cookies from 'js-cookie'
|
||||
import { SHOPIFY_CART_ID_COOKIE } from '../const'
|
||||
|
||||
export const getCartId = (id?: string) => {
|
||||
return id || Cookies.get(SHOPIFY_CART_ID_COOKIE)
|
||||
}
|
@ -1,29 +0,0 @@
|
||||
import { getSortVariables } from './get-sort-variables'
|
||||
import { SearchProductsBody } from '../types/product'
|
||||
|
||||
export const getSearchVariables = ({
|
||||
brandId,
|
||||
search,
|
||||
categoryId,
|
||||
sort,
|
||||
locale,
|
||||
}: SearchProductsBody) => {
|
||||
let query = ''
|
||||
|
||||
if (search) {
|
||||
query += `product_type:${search} OR title:${search} OR tag:${search} `
|
||||
}
|
||||
|
||||
if (brandId) {
|
||||
query += `${search ? 'AND ' : ''}vendor:${brandId}`
|
||||
}
|
||||
|
||||
return {
|
||||
categoryId,
|
||||
query,
|
||||
...getSortVariables(sort, !!categoryId),
|
||||
...(locale && {
|
||||
locale,
|
||||
}),
|
||||
}
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
export const getSortVariables = (
|
||||
sort?: string,
|
||||
isCategory: boolean = false
|
||||
) => {
|
||||
let output = {}
|
||||
switch (sort) {
|
||||
case 'price-asc':
|
||||
output = {
|
||||
sortKey: 'PRICE',
|
||||
reverse: false,
|
||||
}
|
||||
break
|
||||
case 'price-desc':
|
||||
output = {
|
||||
sortKey: 'PRICE',
|
||||
reverse: true,
|
||||
}
|
||||
break
|
||||
case 'trending-desc':
|
||||
output = {
|
||||
sortKey: 'BEST_SELLING',
|
||||
reverse: false,
|
||||
}
|
||||
break
|
||||
case 'latest-desc':
|
||||
output = {
|
||||
sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
|
||||
reverse: true,
|
||||
}
|
||||
break
|
||||
}
|
||||
return output
|
||||
}
|
@ -1,12 +1,17 @@
|
||||
import { FetcherError } from '@vercel/commerce/utils/errors'
|
||||
|
||||
export function getError(errors: any[] | null, status: number) {
|
||||
errors = errors ?? [{ message: 'Failed to fetch Shopify API' }]
|
||||
export function getError(err: any[] | string | null, status: number) {
|
||||
console.log(JSON.stringify(err, null, 2))
|
||||
|
||||
const errors = Array.isArray(err)
|
||||
? err
|
||||
: [{ message: err || 'Failed to fetch Shopify API' }]
|
||||
return new FetcherError({ errors, status })
|
||||
}
|
||||
|
||||
export async function getAsyncError(res: Response) {
|
||||
const data = await res.json()
|
||||
|
||||
return getError(data.errors, res.status)
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { FetcherOptions } from '@vercel/commerce/utils/types'
|
||||
import { CustomerAccessTokenCreateInput } from '../../schema'
|
||||
import { setCustomerToken } from './customer-token'
|
||||
import { setCustomerToken } from './helpers'
|
||||
import { customerAccessTokenCreateMutation } from './mutations'
|
||||
import { throwUserErrors } from './throw-user-errors'
|
||||
|
||||
|
104
packages/shopify/src/utils/helpers.ts
Normal file
104
packages/shopify/src/utils/helpers.ts
Normal file
@ -0,0 +1,104 @@
|
||||
import Cookies, { CookieAttributes } from 'js-cookie'
|
||||
import { SearchProductsBody } from '../types/product'
|
||||
|
||||
import {
|
||||
SHOPIFY_CART_URL_COOKIE,
|
||||
SHOPIFY_COOKIE_EXPIRE,
|
||||
SHOPIFY_CART_ID_COOKIE,
|
||||
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||
} from '../const'
|
||||
|
||||
export const setCartUrlCookie = (cartUrl: string) => {
|
||||
if (cartUrl) {
|
||||
const oldCookie = Cookies.get(SHOPIFY_CART_URL_COOKIE)
|
||||
if (oldCookie !== cartUrl) {
|
||||
Cookies.set(SHOPIFY_CART_URL_COOKIE, cartUrl, {
|
||||
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getCartId = (id?: string) => {
|
||||
return id || Cookies.get(SHOPIFY_CART_ID_COOKIE)
|
||||
}
|
||||
|
||||
export const getSortVariables = (
|
||||
sort?: string,
|
||||
isCategory: boolean = false
|
||||
) => {
|
||||
let output = {}
|
||||
switch (sort) {
|
||||
case 'price-asc':
|
||||
output = {
|
||||
sortKey: 'PRICE',
|
||||
reverse: false,
|
||||
}
|
||||
break
|
||||
case 'price-desc':
|
||||
output = {
|
||||
sortKey: 'PRICE',
|
||||
reverse: true,
|
||||
}
|
||||
break
|
||||
case 'trending-desc':
|
||||
output = {
|
||||
sortKey: 'BEST_SELLING',
|
||||
reverse: false,
|
||||
}
|
||||
break
|
||||
case 'latest-desc':
|
||||
output = {
|
||||
sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
|
||||
reverse: true,
|
||||
}
|
||||
break
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
export const getSearchVariables = ({
|
||||
brandId,
|
||||
search,
|
||||
categoryId,
|
||||
sort,
|
||||
locale,
|
||||
}: SearchProductsBody) => {
|
||||
let query = ''
|
||||
|
||||
if (search) {
|
||||
query += `product_type:${search} OR title:${search} OR tag:${search} `
|
||||
}
|
||||
|
||||
if (brandId) {
|
||||
query += `${search ? 'AND ' : ''}vendor:${brandId}`
|
||||
}
|
||||
|
||||
return {
|
||||
categoryId,
|
||||
query,
|
||||
...getSortVariables(sort, !!categoryId),
|
||||
...(locale && {
|
||||
locale,
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||
|
||||
export const setCustomerToken = (
|
||||
token: string | null,
|
||||
options?: CookieAttributes
|
||||
) => {
|
||||
if (!token) {
|
||||
Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||
} else {
|
||||
Cookies.set(
|
||||
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||
token,
|
||||
options ?? {
|
||||
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
@ -1,15 +1,10 @@
|
||||
export { throwUserErrors } from './throw-user-errors'
|
||||
export { handleFetchResponse } from './handle-fetch-response'
|
||||
export { getSearchVariables } from './get-search-variables'
|
||||
export { getSortVariables } from './get-sort-variables'
|
||||
export { getBrands } from './get-brands'
|
||||
export { getCategories } from './get-categories'
|
||||
export { getCartId } from './get-cart-id'
|
||||
export { cartCreate } from './cart-create'
|
||||
export { handleLogin, handleAutomaticLogin } from './handle-login'
|
||||
export { handleAccountActivation } from './handle-account-activation'
|
||||
export { throwUserErrors } from './throw-user-errors'
|
||||
|
||||
export * from './helpers'
|
||||
export * from './queries'
|
||||
export * from './mutations'
|
||||
export * from './normalize'
|
||||
export * from './customer-token'
|
||||
|
@ -1,17 +0,0 @@
|
||||
export const associateCustomerWithCheckoutMutation = /* GraphQl */ `
|
||||
mutation associateCustomerWithCheckout($checkoutId: ID!, $customerAccessToken: String!) {
|
||||
checkoutCustomerAssociateV2(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) {
|
||||
checkout {
|
||||
id
|
||||
}
|
||||
checkoutUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
customer {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,17 +0,0 @@
|
||||
import { cartDetailsFragment } from '../queries/get-cart-query'
|
||||
|
||||
export const cartCreateMutation = /* GraphQL */ `
|
||||
mutation cartCreate($input: CartInput = {}) {
|
||||
cartCreate(input: $input) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
`
|
@ -1,17 +0,0 @@
|
||||
import { cartDetailsFragment } from '../queries/get-cart-query'
|
||||
|
||||
export const cartLinesAddMutation = /* GraphQL */ `
|
||||
mutation cartLinesAdd($lines: [CartLineInput!]!, $cartId: ID!) {
|
||||
cartLinesAdd(lines: $lines, cartId: $cartId) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
`
|
@ -1,17 +0,0 @@
|
||||
import { cartDetailsFragment } from '../queries/get-cart-query'
|
||||
|
||||
export const cartLinesRemoveMutation = /* GraphQL */ `
|
||||
mutation cartLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
|
||||
cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
`
|
@ -1,17 +0,0 @@
|
||||
import { cartDetailsFragment } from '../queries/get-cart-query'
|
||||
|
||||
export const cartLinesUpdateMutation = /* GraphQL */ `
|
||||
mutation cartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
|
||||
cartLinesUpdate(cartId: $cartId, lines: $lines) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
`
|
64
packages/shopify/src/utils/mutations/cart-mutations.ts
Normal file
64
packages/shopify/src/utils/mutations/cart-mutations.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import {
|
||||
cartDetailsFragment,
|
||||
userErrorsFragment,
|
||||
} from '../fragments/cart-details-fragment'
|
||||
|
||||
export const cartCreateMutation = /* GraphQL */ `
|
||||
mutation cartCreate($input: CartInput = {}) {
|
||||
cartCreate(input: $input) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
...userErrors
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
${userErrorsFragment}
|
||||
`
|
||||
|
||||
export const cartLinesAddMutation = /* GraphQL */ `
|
||||
mutation cartLinesAdd($lines: [CartLineInput!]!, $cartId: ID!) {
|
||||
cartLinesAdd(lines: $lines, cartId: $cartId) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
...userErrors
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
${userErrorsFragment}
|
||||
`
|
||||
|
||||
export const cartLinesRemoveMutation = /* GraphQL */ `
|
||||
mutation cartLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
|
||||
cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
...userErrors
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
${userErrorsFragment}
|
||||
`
|
||||
|
||||
export const cartLinesUpdateMutation = /* GraphQL */ `
|
||||
mutation cartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
|
||||
cartLinesUpdate(cartId: $cartId, lines: $lines) {
|
||||
cart {
|
||||
...cartDetails
|
||||
}
|
||||
userErrors {
|
||||
...userErrors
|
||||
}
|
||||
}
|
||||
}
|
||||
${cartDetailsFragment}
|
||||
${userErrorsFragment}
|
||||
`
|
@ -1,15 +0,0 @@
|
||||
export const customerAccessTokenCreateMutation = /* GraphQL */ `
|
||||
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
|
||||
customerAccessTokenCreate(input: $input) {
|
||||
customerAccessToken {
|
||||
accessToken
|
||||
expiresAt
|
||||
}
|
||||
customerUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,12 +0,0 @@
|
||||
export const customerAccessTokenDeleteMutation = /* GraphQL */ `
|
||||
mutation customerAccessTokenDelete($customerAccessToken: String!) {
|
||||
customerAccessTokenDelete(customerAccessToken: $customerAccessToken) {
|
||||
deletedAccessToken
|
||||
deletedCustomerAccessTokenId
|
||||
userErrors {
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,18 +0,0 @@
|
||||
export const customerActivateByUrlMutation = /* GraphQL */ `
|
||||
mutation customerActivateByUrl($activationUrl: URL!, $password: String!) {
|
||||
customerActivateByUrl(activationUrl: $activationUrl, password: $password) {
|
||||
customer {
|
||||
id
|
||||
}
|
||||
customerAccessToken {
|
||||
accessToken
|
||||
expiresAt
|
||||
}
|
||||
customerUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,18 +0,0 @@
|
||||
export const customerActivateMutation = /* GraphQL */ `
|
||||
mutation customerActivate($id: ID!, $input: CustomerActivateInput!) {
|
||||
customerActivate(id: $id, input: $input) {
|
||||
customer {
|
||||
id
|
||||
}
|
||||
customerAccessToken {
|
||||
accessToken
|
||||
expiresAt
|
||||
}
|
||||
customerUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
@ -1,14 +0,0 @@
|
||||
export const customerCreateMutation = /* GraphQL */ `
|
||||
mutation customerCreate($input: CustomerCreateInput!) {
|
||||
customerCreate(input: $input) {
|
||||
customerUserErrors {
|
||||
code
|
||||
field
|
||||
message
|
||||
}
|
||||
customer {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
65
packages/shopify/src/utils/mutations/customer-mutations.ts
Normal file
65
packages/shopify/src/utils/mutations/customer-mutations.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import {
|
||||
customerUserErrorsFragment,
|
||||
customerAccessTokenFragment,
|
||||
} from '../fragments/customer-fragments'
|
||||
|
||||
export const customerActivateMutation = /* GraphQL */ `
|
||||
mutation customerActivate($id: ID!, $input: CustomerActivateInput!) {
|
||||
customerActivate(id: $id, input: $input) {
|
||||
customer {
|
||||
id
|
||||
}
|
||||
...customerAccessToken
|
||||
...customerUserErrors
|
||||
}
|
||||
}
|
||||
${customerUserErrorsFragment}
|
||||
${customerAccessTokenFragment}
|
||||
`
|
||||
export const customerActivateByUrlMutation = /* GraphQL */ `
|
||||
mutation customerActivateByUrl($activationUrl: URL!, $password: String!) {
|
||||
customerActivateByUrl(activationUrl: $activationUrl, password: $password) {
|
||||
customer {
|
||||
id
|
||||
}
|
||||
...customerAccessToken
|
||||
...customerUserErrors
|
||||
}
|
||||
}
|
||||
${customerUserErrorsFragment}
|
||||
${customerAccessTokenFragment}
|
||||
`
|
||||
|
||||
export const customerAccessTokenCreateMutation = /* GraphQL */ `
|
||||
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
|
||||
customerAccessTokenCreate(input: $input) {
|
||||
...customerAccessToken
|
||||
...customerUserErrors
|
||||
}
|
||||
}
|
||||
${customerUserErrorsFragment}
|
||||
${customerAccessTokenFragment}
|
||||
`
|
||||
|
||||
export const customerAccessTokenDeleteMutation = /* GraphQL */ `
|
||||
mutation customerAccessTokenDelete($customerAccessToken: String!) {
|
||||
customerAccessTokenDelete(customerAccessToken: $customerAccessToken) {
|
||||
deletedAccessToken
|
||||
deletedCustomerAccessTokenId
|
||||
...customerUserErrors
|
||||
}
|
||||
}
|
||||
${customerUserErrorsFragment}
|
||||
`
|
||||
|
||||
export const customerCreateMutation = /* GraphQL */ `
|
||||
mutation customerCreate($input: CustomerCreateInput!) {
|
||||
customerCreate(input: $input) {
|
||||
...customerUserErrors
|
||||
customer {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
${customerUserErrorsFragment}
|
||||
`
|
@ -1,9 +1,2 @@
|
||||
export { customerCreateMutation } from './customer-create'
|
||||
export { cartCreateMutation } from './cart-create'
|
||||
export { cartLinesAddMutation } from './cart-lines-item-add'
|
||||
export { cartLinesUpdateMutation } from './cart-lines-item-update'
|
||||
export { cartLinesRemoveMutation } from './cart-lines-item-remove'
|
||||
export { customerAccessTokenCreateMutation } from './customer-access-token-create'
|
||||
export { customerAccessTokenDeleteMutation } from './customer-access-token-delete'
|
||||
export { customerActivateMutation } from './customer-activate'
|
||||
export { customerActivateByUrlMutation } from './customer-activate-by-url'
|
||||
export * from './cart-mutations'
|
||||
export * from './customer-mutations'
|
||||
|
@ -1,5 +1,5 @@
|
||||
import type { Page } from '../types/page'
|
||||
import type { Product } from '../types/product'
|
||||
import type { Product, ProductPrice } from '../types/product'
|
||||
import type { Cart, LineItem } from '../types/cart'
|
||||
import type { Category } from '../types/site'
|
||||
|
||||
@ -18,10 +18,14 @@ import {
|
||||
import { colorMap } from './colors'
|
||||
import { CommerceError } from '@vercel/commerce/utils/errors'
|
||||
|
||||
const money = ({ amount, currencyCode }: MoneyV2) => {
|
||||
type MoneyProps = MoneyV2 & { retailPrice?: string }
|
||||
|
||||
const money = (money: MoneyProps): ProductPrice => {
|
||||
const { amount, currencyCode, retailPrice } = money || { currencyCode: 'USD' }
|
||||
return {
|
||||
value: +amount,
|
||||
currencyCode,
|
||||
...(retailPrice && { retailPrice: +retailPrice }),
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,33 +56,33 @@ const normalizeProductOption = ({
|
||||
}
|
||||
}
|
||||
|
||||
const normalizeProductImages = ({ edges }: ImageConnection) =>
|
||||
edges?.map(({ node: { altText: alt, url, ...rest } }) => ({
|
||||
const normalizeProductImages = (images: ImageConnection) =>
|
||||
images?.nodes?.map(({ altText: alt, url, ...rest }) => ({
|
||||
...rest,
|
||||
url,
|
||||
alt,
|
||||
}))
|
||||
})) ?? []
|
||||
|
||||
const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
|
||||
return edges?.map(
|
||||
const normalizeProductVariants = (variants: ProductVariantConnection) => {
|
||||
return (
|
||||
variants?.nodes?.map(
|
||||
({
|
||||
node: {
|
||||
id,
|
||||
selectedOptions,
|
||||
sku,
|
||||
title,
|
||||
priceV2,
|
||||
image,
|
||||
compareAtPriceV2,
|
||||
requiresShipping,
|
||||
availableForSale,
|
||||
},
|
||||
}) => {
|
||||
return {
|
||||
id,
|
||||
name: title,
|
||||
sku: sku ?? id,
|
||||
price: +priceV2.amount,
|
||||
listPrice: +compareAtPriceV2?.amount,
|
||||
image,
|
||||
price: money({ ...priceV2, retailPrice: compareAtPriceV2?.amount }),
|
||||
requiresShipping,
|
||||
availableForSale,
|
||||
options: selectedOptions.map(({ name, value }: SelectedOption) => {
|
||||
@ -92,6 +96,7 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
|
||||
}),
|
||||
}
|
||||
}
|
||||
) ?? []
|
||||
)
|
||||
}
|
||||
|
||||
@ -104,20 +109,24 @@ export function normalizeProduct({
|
||||
description,
|
||||
descriptionHtml,
|
||||
handle,
|
||||
priceRange,
|
||||
options,
|
||||
metafields,
|
||||
...rest
|
||||
}: ShopifyProduct): Product {
|
||||
const variant = variants?.nodes?.[0]
|
||||
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
vendor,
|
||||
path: `/${handle}`,
|
||||
slug: handle?.replace(/^\/+|\/+$/g, ''),
|
||||
price: money(priceRange?.minVariantPrice),
|
||||
images: normalizeProductImages(images),
|
||||
variants: variants ? normalizeProductVariants(variants) : [],
|
||||
price: money({
|
||||
...variant?.priceV2,
|
||||
retailPrice: variant?.compareAtPriceV2?.amount,
|
||||
}),
|
||||
images: images ? normalizeProductImages(images) : [variant?.image],
|
||||
variants: normalizeProductVariants(variants),
|
||||
options: options
|
||||
? options
|
||||
.filter((o) => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
|
||||
@ -148,7 +157,7 @@ function normalizeLineItem({
|
||||
},
|
||||
requiresShipping: variant?.requiresShipping ?? false,
|
||||
price: +variant?.priceV2?.amount,
|
||||
listPrice: variant?.compareAtPriceV2?.amount,
|
||||
listPrice: +variant?.compareAtPriceV2?.amount,
|
||||
},
|
||||
path: variant?.product?.handle,
|
||||
discounts: [],
|
||||
|
@ -1,39 +1,4 @@
|
||||
export const productConnectionFragment = /* GraphQL */ `
|
||||
fragment productConnection on ProductConnection {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
vendor
|
||||
handle
|
||||
priceRange {
|
||||
minVariantPrice {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
}
|
||||
images(first: 1) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
url
|
||||
altText
|
||||
width
|
||||
height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
import { productCardFragment } from '../fragments/product-card-fragment'
|
||||
|
||||
export const getAllProductsQuery = /* GraphQL */ `
|
||||
query getAllProducts(
|
||||
@ -48,9 +13,16 @@ export const getAllProductsQuery = /* GraphQL */ `
|
||||
reverse: $reverse
|
||||
query: $query
|
||||
) {
|
||||
...productConnection
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
...productCard
|
||||
}
|
||||
}
|
||||
|
||||
${productConnectionFragment}
|
||||
}
|
||||
}
|
||||
${productCardFragment}
|
||||
`
|
||||
|
@ -1,77 +1,4 @@
|
||||
export const cartDetailsFragment = /* GraphQL */ `
|
||||
fragment cartDetails on Cart {
|
||||
id
|
||||
checkoutUrl
|
||||
createdAt
|
||||
updatedAt
|
||||
lines(first: 10) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
quantity
|
||||
merchandise {
|
||||
... on ProductVariant {
|
||||
id
|
||||
id
|
||||
sku
|
||||
title
|
||||
selectedOptions {
|
||||
name
|
||||
value
|
||||
}
|
||||
image {
|
||||
url
|
||||
altText
|
||||
width
|
||||
height
|
||||
}
|
||||
priceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
compareAtPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
product {
|
||||
title
|
||||
handle
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
attributes {
|
||||
key
|
||||
value
|
||||
}
|
||||
buyerIdentity {
|
||||
email
|
||||
customer {
|
||||
id
|
||||
}
|
||||
}
|
||||
estimatedCost {
|
||||
totalAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
subtotalAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalTaxAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalDutyAmount {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
import { cartDetailsFragment } from '../fragments/cart-details-fragment'
|
||||
|
||||
export const getCartQuery = /* GraphQL */ `
|
||||
query getCart($cartId: ID!) {
|
||||
|
@ -1,69 +0,0 @@
|
||||
export const checkoutDetailsFragment = /* GraphQL */ `
|
||||
fragment checkoutDetails on Checkout {
|
||||
id
|
||||
webUrl
|
||||
subtotalPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalTaxV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
totalPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
completedAt
|
||||
createdAt
|
||||
taxesIncluded
|
||||
lineItems(first: 250) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
variant {
|
||||
id
|
||||
sku
|
||||
title
|
||||
selectedOptions {
|
||||
name
|
||||
value
|
||||
}
|
||||
image {
|
||||
url
|
||||
altText
|
||||
width
|
||||
height
|
||||
}
|
||||
priceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
compareAtPriceV2 {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
product {
|
||||
handle
|
||||
}
|
||||
}
|
||||
quantity
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const getCheckoutQuery = /* GraphQL */ `
|
||||
query getCheckout($checkoutId: ID!) {
|
||||
node(id: $checkoutId) {
|
||||
...checkoutDetails
|
||||
}
|
||||
}
|
||||
${checkoutDetailsFragment}
|
||||
`
|
@ -1,4 +1,4 @@
|
||||
import { productConnectionFragment } from './get-all-products-query'
|
||||
import { productCardFragment } from '../fragments/product-card-fragment'
|
||||
|
||||
export const getCollectionProductsQuery = /* GraphQL */ `
|
||||
query getProductsFromCollection(
|
||||
@ -11,10 +11,20 @@ export const getCollectionProductsQuery = /* GraphQL */ `
|
||||
id
|
||||
... on Collection {
|
||||
products(first: $first, sortKey: $sortKey, reverse: $reverse) {
|
||||
...productConnection
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
startCursor
|
||||
endCursor
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
...productCard
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${productConnectionFragment}
|
||||
}
|
||||
}
|
||||
${productCardFragment}
|
||||
`
|
||||
|
@ -14,28 +14,24 @@ export const getProductQuery = /* GraphQL */ `
|
||||
name
|
||||
values
|
||||
}
|
||||
priceRange {
|
||||
maxVariantPrice {
|
||||
amount
|
||||
currencyCode
|
||||
seo {
|
||||
description
|
||||
title
|
||||
}
|
||||
minVariantPrice {
|
||||
amount
|
||||
currencyCode
|
||||
}
|
||||
}
|
||||
variants(first: 250) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
variants(first: 100) {
|
||||
nodes {
|
||||
id
|
||||
title
|
||||
sku
|
||||
availableForSale
|
||||
requiresShipping
|
||||
image {
|
||||
id
|
||||
altText
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
selectedOptions {
|
||||
name
|
||||
value
|
||||
@ -50,14 +46,8 @@ export const getProductQuery = /* GraphQL */ `
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
images(first: 250) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
hasPreviousPage
|
||||
}
|
||||
edges {
|
||||
node {
|
||||
images(first: 15) {
|
||||
nodes {
|
||||
url
|
||||
altText
|
||||
width
|
||||
@ -65,6 +55,15 @@ export const getProductQuery = /* GraphQL */ `
|
||||
}
|
||||
}
|
||||
}
|
||||
shop {
|
||||
shippingPolicy {
|
||||
body
|
||||
handle
|
||||
}
|
||||
refundPolicy {
|
||||
body
|
||||
handle
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
@ -1,7 +0,0 @@
|
||||
export const getSiteInfoQuery = /* GraphQL */ `
|
||||
query getSiteInfo {
|
||||
shop {
|
||||
name
|
||||
}
|
||||
}
|
||||
`
|
@ -7,5 +7,4 @@ export { getCollectionProductsQuery } from './get-collection-products-query'
|
||||
export { getAllPagesQuery } from './get-all-pages-query'
|
||||
export { getPageQuery } from './get-page-query'
|
||||
export { getCustomerQuery } from './get-customer-query'
|
||||
export { getSiteInfoQuery } from './get-site-info-query'
|
||||
export { getCartQuery } from './get-cart-query'
|
||||
|
@ -1,14 +0,0 @@
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import { SHOPIFY_CART_URL_COOKIE, SHOPIFY_COOKIE_EXPIRE } from '../const'
|
||||
|
||||
export const setCartUrlCookie = (cartUrl: string) => {
|
||||
if (cartUrl) {
|
||||
const oldCookie = Cookies.get(SHOPIFY_CART_URL_COOKIE)
|
||||
if (oldCookie !== cartUrl) {
|
||||
Cookies.set(SHOPIFY_CART_URL_COOKIE, cartUrl, {
|
||||
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user