michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make the SSR example infer the origin (#2932)

Browse source
This commit is contained in:
Matthew Phillips 2022-03-29 09:17:49 -04:00 • committed by GitHub
parent 9fa013b4fa
commit 7fd49f1887
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/ssr/src/api.ts
View file

@ -17,11 +17,12 @@ interface Cart {
}>; }>;
} }
const { MODE } = import.meta.env; function getOrigin(request: Request): string {
const origin = MODE === 'development' ? `http://127.0.0.1:3000` : `http://127.0.0.1:8085`; return new URL(request.url).origin.replace('localhost', '127.0.0.1');
}
async function get<T>(endpoint: string, cb: (response: Response) => Promise<T>): Promise<T> { async function get<T>(incomingReq: Request, endpoint: string, cb: (response: Response) => Promise<T>): Promise<T> {
const response = await fetch(`${origin}${endpoint}`, { const response = await fetch(`${getOrigin(incomingReq)}${endpoint}`, {
credentials: 'same-origin', credentials: 'same-origin',
}); });
if (!response.ok) { if (!response.ok) {
@ -31,36 +32,36 @@ async function get<T>(endpoint: string, cb: (response: Response) => Promise<T>):
return cb(response); return cb(response);
} }
export async function getProducts(): Promise<Product[]> { export async function getProducts(incomingReq: Request): Promise<Product[]> {
return get<Product[]>('/api/products', async (response) => { return get<Product[]>(incomingReq, '/api/products', async (response) => {
const products: Product[] = await response.json(); const products: Product[] = await response.json();
return products; return products;
}); });
} }
export async function getProduct(id: number): Promise<Product> { export async function getProduct(incomingReq: Request, id: number): Promise<Product> {
return get<Product>(`/api/products/${id}`, async (response) => { return get<Product>(incomingReq, `/api/products/${id}`, async (response) => {
const product: Product = await response.json(); const product: Product = await response.json();
return product; return product;
}); });
} }
export async function getUser(): Promise<User> { export async function getUser(incomingReq: Request): Promise<User> {
return get<User>(`/api/user`, async (response) => { return get<User>(incomingReq, `/api/user`, async (response) => {
const user: User = await response.json(); const user: User = await response.json();
return user; return user;
}); });
} }
export async function getCart(): Promise<Cart> { export async function getCart(incomingReq: Request): Promise<Cart> {
return get<Cart>(`/api/cart`, async (response) => { return get<Cart>(incomingReq, `/api/cart`, async (response) => {
const cart: Cart = await response.json(); const cart: Cart = await response.json();
return cart; return cart;
}); });
} }
export async function addToUserCart( id: number | string, name: string): Promise<void> { export async function addToUserCart( id: number | string, name: string): Promise<void> {
await fetch(`${origin}/api/cart`, { await fetch(`${location.origin}/api/cart`, {
credentials: 'same-origin', credentials: 'same-origin',
method: 'POST', method: 'POST',
mode: 'no-cors', mode: 'no-cors',

2
examples/ssr/src/components/Header.astro
View file

@ -3,7 +3,7 @@ import TextDecorationSkip from './TextDecorationSkip.astro';
import Cart from './Cart.svelte'; import Cart from './Cart.svelte';
import { getCart } from '../api'; import { getCart } from '../api';
const cart = await getCart(); const cart = await getCart(Astro.request);
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
--- ---
<style> <style>

2
examples/ssr/src/pages/cart.astro
View file

@ -11,7 +11,7 @@ if(!isLoggedIn(Astro.request)) {
// They must be logged in. // They must be logged in.
const user = { name: 'test'}; // getUser? const user = { name: 'test'}; // getUser?
const cart = await getCart(); const cart = await getCart(Astro.request);
--- ---
<html> <html>
<head> <head>

2
examples/ssr/src/pages/index.astro
View file

@ -5,7 +5,7 @@ import ProductListing from '../components/ProductListing.astro';
import { getProducts } from '../api'; import { getProducts } from '../api';
import '../styles/common.css'; import '../styles/common.css';
const products = await getProducts(); const products = await getProducts(Astro.request);
--- ---
<html> <html>
<head> <head>

2
examples/ssr/src/pages/products/[id].astro
View file

@ -6,7 +6,7 @@ import { getProduct } from '../../api';
import '../../styles/common.css'; import '../../styles/common.css';
const id = Number(Astro.params.id); const id = Number(Astro.params.id);
const product = await getProduct(id); const product = await getProduct(Astro.request, id);
--- ---
<html lang="en"> <html lang="en">