mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Vendure provider (#223)
* Minimal list/detail views working with Vendure * Implement useCart/useAddItem * Implement useUpdateItem & useRemoveItem * Implement useSearch * Add operations codegen, tidy up * Dummy checkout page * Implement auth/customer hooks * Use env var for Shop API url * Add some documentation * Improve error handling * Optimize preview image size * Fix accidental change * Update Vendure provider to latest changes * Vendure provider: split out gql operations, remove unused files * Update Vendure provider readme * Add local next.config to Vendure provider, update docs * Update to use demo server * Fix build errors * Use proxy for vendure api * Simplify instructions in Vendure readme * Refactor Vendure checkout api handler * Improve image quality
This commit is contained in:
1
framework/vendure/api/cart/index.ts
Normal file
1
framework/vendure/api/cart/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
1
framework/vendure/api/catalog/index.ts
Normal file
1
framework/vendure/api/catalog/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
1
framework/vendure/api/catalog/products.ts
Normal file
1
framework/vendure/api/catalog/products.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
60
framework/vendure/api/checkout/index.ts
Normal file
60
framework/vendure/api/checkout/index.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { NextApiHandler } from 'next'
|
||||
|
||||
const checkoutApi = async (req: any, res: any, config: any) => {
|
||||
try {
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Checkout</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica'>
|
||||
<h1>Checkout not implemented :(</h1>
|
||||
<p>
|
||||
See <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>#64</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
res.status(200)
|
||||
res.setHeader('Content-Type', 'text/html')
|
||||
res.write(html)
|
||||
res.end()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
|
||||
const message = 'An unexpected error ocurred'
|
||||
|
||||
res.status(500).json({ data: null, errors: [{ message }] })
|
||||
}
|
||||
}
|
||||
|
||||
export function createApiHandler<T = any, H = {}, Options extends {} = {}>(
|
||||
handler: any,
|
||||
handlers: H,
|
||||
defaultOptions: Options
|
||||
) {
|
||||
return function getApiHandler({
|
||||
config,
|
||||
operations,
|
||||
options,
|
||||
}: {
|
||||
config?: any
|
||||
operations?: Partial<H>
|
||||
options?: Options extends {} ? Partial<Options> : never
|
||||
} = {}): NextApiHandler {
|
||||
const ops = { ...operations, ...handlers }
|
||||
const opts = { ...defaultOptions, ...options }
|
||||
|
||||
return function apiHandler(req, res) {
|
||||
return handler(req, res, config, ops, opts)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default createApiHandler(checkoutApi, {}, {})
|
1
framework/vendure/api/customers/index.ts
Normal file
1
framework/vendure/api/customers/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
1
framework/vendure/api/customers/login.ts
Normal file
1
framework/vendure/api/customers/login.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
1
framework/vendure/api/customers/logout.ts
Normal file
1
framework/vendure/api/customers/logout.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
1
framework/vendure/api/customers/signup.ts
Normal file
1
framework/vendure/api/customers/signup.ts
Normal file
@@ -0,0 +1 @@
|
||||
export default function () {}
|
51
framework/vendure/api/index.ts
Normal file
51
framework/vendure/api/index.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import type { CommerceAPIConfig } from '@commerce/api'
|
||||
import fetchGraphqlApi from './utils/fetch-graphql-api'
|
||||
|
||||
export interface VendureConfig extends CommerceAPIConfig {}
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL
|
||||
|
||||
if (!API_URL) {
|
||||
throw new Error(
|
||||
`The environment variable NEXT_PUBLIC_VENDURE_SHOP_API_URL is missing and it's required to access your store`
|
||||
)
|
||||
}
|
||||
|
||||
export class Config {
|
||||
private config: VendureConfig
|
||||
|
||||
constructor(config: VendureConfig) {
|
||||
this.config = {
|
||||
...config,
|
||||
}
|
||||
}
|
||||
|
||||
getConfig(userConfig: Partial<VendureConfig> = {}) {
|
||||
return Object.entries(userConfig).reduce<VendureConfig>(
|
||||
(cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
|
||||
{ ...this.config }
|
||||
)
|
||||
}
|
||||
|
||||
setConfig(newConfig: Partial<VendureConfig>) {
|
||||
Object.assign(this.config, newConfig)
|
||||
}
|
||||
}
|
||||
|
||||
const ONE_DAY = 60 * 60 * 24
|
||||
const config = new Config({
|
||||
commerceUrl: API_URL,
|
||||
apiToken: '',
|
||||
cartCookie: '',
|
||||
customerCookie: '',
|
||||
cartCookieMaxAge: ONE_DAY * 30,
|
||||
fetch: fetchGraphqlApi,
|
||||
})
|
||||
|
||||
export function getConfig(userConfig?: Partial<VendureConfig>) {
|
||||
return config.getConfig(userConfig)
|
||||
}
|
||||
|
||||
export function setConfig(newConfig: Partial<VendureConfig>) {
|
||||
return config.setConfig(newConfig)
|
||||
}
|
37
framework/vendure/api/utils/fetch-graphql-api.ts
Normal file
37
framework/vendure/api/utils/fetch-graphql-api.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { FetcherError } from '@commerce/utils/errors'
|
||||
import type { GraphQLFetcher } from '@commerce/api'
|
||||
import { getConfig } from '..'
|
||||
import fetch from './fetch'
|
||||
|
||||
const fetchGraphqlApi: GraphQLFetcher = async (
|
||||
query: string,
|
||||
{ variables, preview } = {},
|
||||
fetchOptions
|
||||
) => {
|
||||
const config = getConfig()
|
||||
const res = await fetch(config.commerceUrl, {
|
||||
...fetchOptions,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${config.apiToken}`,
|
||||
...fetchOptions?.headers,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
variables,
|
||||
}),
|
||||
})
|
||||
|
||||
const json = await res.json()
|
||||
if (json.errors) {
|
||||
throw new FetcherError({
|
||||
errors: json.errors ?? [{ message: 'Failed to fetch Vendure API' }],
|
||||
status: res.status,
|
||||
})
|
||||
}
|
||||
|
||||
return { data: json.data, res }
|
||||
}
|
||||
|
||||
export default fetchGraphqlApi
|
3
framework/vendure/api/utils/fetch.ts
Normal file
3
framework/vendure/api/utils/fetch.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import zeitFetch from '@vercel/fetch'
|
||||
|
||||
export default zeitFetch()
|
2
framework/vendure/api/wishlist/index.tsx
Normal file
2
framework/vendure/api/wishlist/index.tsx
Normal file
@@ -0,0 +1,2 @@
|
||||
export type WishlistItem = { product: any; id: number }
|
||||
export default function () {}
|
Reference in New Issue
Block a user