1# Framer Fetch: Basic
2
3A basic example of an API endpoint to use with Framer Fetch. CORS headers are permissive by default on Val Town, so no need to set them.
36
37 useEffect(() => {
38 async function fetchStats() {
39 const response = await fetch("/dashboard-stats");
40 const data = await response.json();
41 setStats(data);
42 }
43 fetchStats();
44 }, []);
45
128
129 useEffect(() => {
130 async function fetchUsageStats() {
131 const response = await fetch("/usage-stats");
132 const data = await response.json();
133 setUsageStats(data);
134 }
135 fetchUsageStats();
136 }, []);
137
141
142 try {
143 const response = await fetch("/", {
144 method: "POST",
145 body: JSON.stringify({
20 setError("");
21 try {
22 const response = await fetch("/recipes", {
23 method: "POST",
24 headers: { "Content-Type": "application/json" },
32 }
33 } catch (err) {
34 setError("An error occurred while fetching recipes. Please try again.");
35 } finally {
36 setLoading(false);
339
340async function generateImage(recipeName: string): Promise<string> {
341 const response = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(recipeName)}`);
342 if (!response.ok) {
343 throw new Error(`Failed to generate image for ${recipeName}`);
1import { email } from "https://esm.town/v/std/email?v=9";
2
3// Fetches a random joke.
4// Fetches a random joke.
5async function fetchRandomJoke() {
6 const response = await fetch(
7 "https://official-joke-api.appspot.com/random_joke",
8 );
10}
11
12const randomJoke = await fetchRandomJoke();
13const setup = randomJoke.setup;
14const punchline = randomJoke.punchline;
1import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
2
3export async function socialDataSearch(query: string): Promise<SocialDataResponse> {
4 const url = new URL("https://stevekrouse-socialdataproxy.web.val.run/twitter/search");
5 url.searchParams.set("query", query);
6 return await fetchJSON(url.toString(), {
7 bearer: Deno.env.get("valtown"),
8 });
171 // Existing API proxy logic
172 const { API_URL } = await import("https://esm.town/v/std/API_URL?v=5");
173 const { fetchJSON } = await import("https://esm.town/v/stevekrouse/fetchJSON");
174 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
175 const Authorization = req.headers.get("Authorization") as string;
176 const meRes = await fetch(`${API_URL}/v1/me`, { headers: { Authorization } });
177 if (!meRes.ok) {
178 return new Response("Unauthorized", { status: 401 });
234 const socialDataURL = new URL("https://api.socialdata.tools/twitter/search");
235 socialDataURL.searchParams.set("query", query);
236 const socialDataResults = await fetchJSON(socialDataURL.toString(), {
237 bearer: Deno.env.get("SOCIAL_DATA_API_KEY"),
238 });
6
7import { API_URL } from "https://esm.town/v/std/API_URL?v=5";
8import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
9import { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
10
19
20 useEffect(() => {
21 async function fetchUsageData() {
22 const response = await fetch('/usage-data');
23 const data = await response.json();
24 setUsageData(data);
25 }
26 fetchUsageData();
27 }, []);
28
132 // Existing social data proxy logic remains unchanged
133 const Authorization = req.headers.get("Authorization") as string;
134 const meRes = await fetch(`${API_URL}/v1/me`, { headers: { Authorization } });
135 if (!meRes.ok) {
136 return new Response("Unauthorized", { status: 401 });
192 const socialDataURL = new URL("https://api.socialdata.tools/twitter/search");
193 socialDataURL.searchParams.set("query", query);
194 const socialDataResults = await fetchJSON(socialDataURL.toString(), {
195 bearer: Deno.env.get("SOCIAL_DATA_API_KEY"),
196 });
61
62export default async function server(req: Request): Promise<Response> {
63 return app.fetch(req);
64}
1/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
2
3import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
4import { iframeHandler } from "https://esm.town/v/nbbaier/iframeHandler";
5import { resetStyle } from "https://esm.town/v/nbbaier/resetStyle";
16import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
17import { ResultSet, sqlite } from "https://esm.town/v/std/sqlite";
18import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
19import { Hono } from "npm:hono";
20import type { FC } from "npm:hono/jsx";
175});
176
177export const handler = app.fetch;
178export default iframeHandler(modifyFetchHandler(passwordAuth(handler, { verifyPassword: verifyToken })));
5
6def get_quotes():
7 """Fetches quotes from Wikiquote."""
8
9 url = "https://en.wikiquote.org/wiki/Main_Page"