mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Create checkout on add to cart
This commit is contained in:
@@ -29,16 +29,18 @@ export const handler: MutationHook<AddItemHook> = {
|
|||||||
|
|
||||||
return data
|
return data
|
||||||
},
|
},
|
||||||
useHook: ({ fetch }) => () => {
|
useHook:
|
||||||
const { mutate } = useCart()
|
({ fetch }) =>
|
||||||
|
() => {
|
||||||
|
const { mutate } = useCart()
|
||||||
|
|
||||||
return useCallback(
|
return useCallback(
|
||||||
async function addItem(input) {
|
async function addItem(input) {
|
||||||
const data = await fetch({ input })
|
const data = await fetch({ input })
|
||||||
await mutate(data, false)
|
await mutate(data, false)
|
||||||
return data
|
return data
|
||||||
},
|
},
|
||||||
[fetch, mutate]
|
[fetch, mutate]
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@@ -9,6 +9,7 @@ import {
|
|||||||
checkoutLineItemAddMutation,
|
checkoutLineItemAddMutation,
|
||||||
getCheckoutId,
|
getCheckoutId,
|
||||||
checkoutToCart,
|
checkoutToCart,
|
||||||
|
checkoutCreate,
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
||||||
|
|
||||||
@@ -28,13 +29,20 @@ export const handler: MutationHook<AddItemHook> = {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let checkoutId = getCheckoutId()
|
||||||
|
|
||||||
|
if (!checkoutId) {
|
||||||
|
const checkout = await checkoutCreate(fetch)
|
||||||
|
checkoutId = checkout.id
|
||||||
|
}
|
||||||
|
|
||||||
const { checkoutLineItemsAdd } = await fetch<
|
const { checkoutLineItemsAdd } = await fetch<
|
||||||
Mutation,
|
Mutation,
|
||||||
MutationCheckoutLineItemsAddArgs
|
MutationCheckoutLineItemsAddArgs
|
||||||
>({
|
>({
|
||||||
...options,
|
...options,
|
||||||
variables: {
|
variables: {
|
||||||
checkoutId: getCheckoutId(),
|
checkoutId,
|
||||||
lineItems: [
|
lineItems: [
|
||||||
{
|
{
|
||||||
variantId: item.variantId,
|
variantId: item.variantId,
|
||||||
@@ -46,16 +54,18 @@ export const handler: MutationHook<AddItemHook> = {
|
|||||||
|
|
||||||
return checkoutToCart(checkoutLineItemsAdd)
|
return checkoutToCart(checkoutLineItemsAdd)
|
||||||
},
|
},
|
||||||
useHook: ({ fetch }) => () => {
|
useHook:
|
||||||
const { mutate } = useCart()
|
({ fetch }) =>
|
||||||
|
() => {
|
||||||
|
const { mutate } = useCart()
|
||||||
|
|
||||||
return useCallback(
|
return useCallback(
|
||||||
async function addItem(input) {
|
async function addItem(input) {
|
||||||
const data = await fetch({ input })
|
const data = await fetch({ input })
|
||||||
await mutate(data, false)
|
await mutate(data, false)
|
||||||
return data
|
return data
|
||||||
},
|
},
|
||||||
[fetch, mutate]
|
[fetch, mutate]
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@@ -6,52 +6,43 @@ import { checkoutCreate, checkoutToCart } from '../utils'
|
|||||||
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
||||||
import { GetCartHook } from '../types/cart'
|
import { GetCartHook } from '../types/cart'
|
||||||
|
|
||||||
import {
|
|
||||||
GetCheckoutQuery,
|
|
||||||
GetCheckoutQueryVariables,
|
|
||||||
CheckoutDetailsFragment,
|
|
||||||
} from '../schema'
|
|
||||||
|
|
||||||
export default useCommerceCart as UseCart<typeof handler>
|
export default useCommerceCart as UseCart<typeof handler>
|
||||||
|
|
||||||
export const handler: SWRHook<GetCartHook> = {
|
export const handler: SWRHook<GetCartHook> = {
|
||||||
fetchOptions: {
|
fetchOptions: {
|
||||||
query: getCheckoutQuery,
|
query: getCheckoutQuery,
|
||||||
},
|
},
|
||||||
async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
|
async fetcher({ input: { cartId }, options, fetch }) {
|
||||||
let checkout
|
if (cartId) {
|
||||||
|
const { node } = await fetch({
|
||||||
if (checkoutId) {
|
|
||||||
const data = await fetch({
|
|
||||||
...options,
|
...options,
|
||||||
variables: {
|
variables: {
|
||||||
checkoutId: checkoutId,
|
checkoutId: cartId,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
checkout = data.node
|
return checkoutToCart({
|
||||||
|
checkout: node?.completedAt ? await checkoutCreate(fetch) : node,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
return null
|
||||||
if (checkout?.completedAt || !checkoutId) {
|
|
||||||
checkout = await checkoutCreate(fetch)
|
|
||||||
}
|
|
||||||
|
|
||||||
return checkoutToCart({ checkout })
|
|
||||||
},
|
},
|
||||||
useHook: ({ useData }) => (input) => {
|
useHook:
|
||||||
const response = useData({
|
({ useData }) =>
|
||||||
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
|
(input) => {
|
||||||
})
|
const response = useData({
|
||||||
return useMemo(
|
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
|
||||||
() =>
|
})
|
||||||
Object.create(response, {
|
return useMemo(
|
||||||
isEmpty: {
|
() =>
|
||||||
get() {
|
Object.create(response, {
|
||||||
return (response.data?.lineItems.length ?? 0) <= 0
|
isEmpty: {
|
||||||
|
get() {
|
||||||
|
return (response.data?.lineItems.length ?? 0) <= 0
|
||||||
|
},
|
||||||
|
enumerable: true,
|
||||||
},
|
},
|
||||||
enumerable: true,
|
}),
|
||||||
},
|
[response]
|
||||||
}),
|
)
|
||||||
[response]
|
},
|
||||||
)
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
@@ -7,11 +7,9 @@ import {
|
|||||||
} from '../const'
|
} from '../const'
|
||||||
|
|
||||||
import checkoutCreateMutation from './mutations/checkout-create'
|
import checkoutCreateMutation from './mutations/checkout-create'
|
||||||
import { CheckoutCreatePayload } from '../schema'
|
import { Checkout } from '../schema'
|
||||||
|
|
||||||
export const checkoutCreate = async (
|
export const checkoutCreate = async (fetch: any): Promise<Checkout> => {
|
||||||
fetch: any
|
|
||||||
): Promise<CheckoutCreatePayload> => {
|
|
||||||
const data = await fetch({
|
const data = await fetch({
|
||||||
query: checkoutCreateMutation,
|
query: checkoutCreateMutation,
|
||||||
})
|
})
|
||||||
|
@@ -23,8 +23,8 @@
|
|||||||
"@components/*": ["components/*"],
|
"@components/*": ["components/*"],
|
||||||
"@commerce": ["framework/commerce"],
|
"@commerce": ["framework/commerce"],
|
||||||
"@commerce/*": ["framework/commerce/*"],
|
"@commerce/*": ["framework/commerce/*"],
|
||||||
"@framework": ["framework/local"],
|
"@framework": ["framework/shopify"],
|
||||||
"@framework/*": ["framework/local/*"]
|
"@framework/*": ["framework/shopify/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||||
|
Reference in New Issue
Block a user