Інтеграція Vendure GraphQL API з фронтендом
Vendure надає два окремих GraphQL endpoint: Shop API (/shop-api) для покупців та Admin API (/admin-api) для адміністраторів. Фронтенд використовує тільки Shop API. Аутентифікація через cookie-based сесії або Bearer token, вибір робиться на рівні конфігу сервера.
Налаштування клієнта (urql)
urql легше Apollo та краще підходить для Vendure — менше boilerplate при роботі з cookie-сесіями:
// lib/vendureClient.ts
import { createClient, fetchExchange, dedupExchange, cacheExchange } from "urql";
export const shopClient = createClient({
url: `${process.env.NEXT_PUBLIC_VENDURE_API_URL}/shop-api`,
exchanges: [dedupExchange, cacheExchange, fetchExchange],
fetchOptions: {
credentials: "include", // cookie-based auth
headers: { "vendure-token": process.env.NEXT_PUBLIC_CHANNEL_TOKEN! },
},
});
Генерація типів
# codegen.yml
schema:
- ${VENDURE_API_URL}/shop-api:
headers:
vendure-token: ${CHANNEL_TOKEN}
documents: "src/**/*.graphql"
generates:
src/generated/shop-types.ts:
plugins:
- typescript
- typescript-operations
- typescript-urql
config:
withHooks: true
VENDURE_API_URL=http://localhost:3000 CHANNEL_TOKEN=my-token npx graphql-codegen
Запити каталогу
query GetProductList($options: ProductListOptions) {
products(options: $options) {
totalItems
items {
id
name
slug
variants {
id
priceWithTax
stockLevel
}
}
}
}
Checkout flow
// hooks/useCheckout.ts
export function useCheckout() {
const [, setAddress] = useMutation(SetShippingAddressDocument);
const [, setShipping] = useMutation(SetShippingMethodDocument);
const [, addPayment] = useMutation(AddPaymentToOrderDocument);
async function completeCheckout(params: CheckoutParams) {
// 1. Адреса
const addr = await setAddress({ input: params.address });
// 2. Метод доставки
await setShipping({ id: [params.shippingMethodId] });
// 3. Додати платіж
const payment = await addPayment({
input: { method: "yookassa", metadata: { returnUrl: window.location.origin } },
});
return payment.data?.addPaymentToOrder;
}
return { completeCheckout };
}
SSR з Next.js
// app/shop/page.tsx
import { createServerClient } from "@/lib/vendureServerClient";
export default async function ShopPage() {
const client = createServerClient();
const result = await client.query(GetProductListDocument, {
options: { take: 24 },
}).toPromise();
return <ProductGrid initialData={result.data} />;
}
Терміни: Налаштування Vendure клієнта, генерація схеми, інтеграція каталогу, checkout — 3–5 робочих днів. Інтеграція платежів, доставка, панель адміністратора — +3–4 дні.