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:
Michael Bromley
2021-05-27 23:06:56 +02:00
committed by GitHub
parent 8fb6c7b206
commit da4371090d
71 changed files with 8593 additions and 51 deletions

View File

@@ -0,0 +1 @@
export default function () {}

View File

@@ -0,0 +1 @@
export default function () {}

View File

@@ -0,0 +1 @@
export default function () {}

View 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, {}, {})

View File

@@ -0,0 +1 @@
export default function () {}

View File

@@ -0,0 +1 @@
export default function () {}

View File

@@ -0,0 +1 @@
export default function () {}

View File

@@ -0,0 +1 @@
export default function () {}

View 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)
}

View 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

View File

@@ -0,0 +1,3 @@
import zeitFetch from '@vercel/fetch'
export default zeitFetch()

View File

@@ -0,0 +1,2 @@
export type WishlistItem = { product: any; id: number }
export default function () {}