Add a Key Value Store to your app

$
wrangler types

1
import { APIRoute } from "astro";
2
3
// Get api/weather
4
export const GET: APIRoute = async ({ request, locals }) => {
5
    
6
//... Implementation will be added in the next steps
7
}

1
import { APIRoute } from "astro";
2
3
export const GET: APIRoute = async ({ request, locals }) => {
4
5
    // Access the environment bindings
6
    { env } = locals.runtime;
7
    const weatherCache = env.WEATHER_CACHE;
8
        
9
    //... continue with the next steps
10
}

1
import { APIRoute } from "astro";
2
3
export const GET: APIRoute = async ({ request, locals }) => {
4
5
    { env } = locals.runtime;
6
    const weatherCache = env.WEATHER_CACHE;
7
        
8
    // Get User's location from Cloudflare headers
9
    if (!request.cf) {
10
        return new Response("No Cloudflare headers found", { status: 400 });
11
    }
12
    const { latitude, longitude } = request.cf;
13
    
14
15
    //... continue with the next steps
16
}

1
// ...previous code
2
3
    // Create a cache key from latitude and longitude
4
    const cacheKey = `${latitude}-${longitude}`;
5
6
    try {
7
        // Try to get the weather data from the cache
8
        const cachedWeather = await weatherCache.get(cacheKey);
9
10
        // If the cached data exists, return it
11
        if (cachedWeather) {
12
            return new Response(cachedWeather, {
13
            status: 200,
14
            headers: { 
15
                "Content-Type": "application/json",
16
                "X-Cache-Status": "HIT"
17
            },
18
            });
19
        }
20
21
        //... continue with fetching weather data from the API if not cached

1
// ...previous code
2
3
// If NOT cached, fetch weather data from Open-Meteo API
4
const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true&temperature_unit=fahrenheit`;
5
const weatherData = await fetch(weatherUrl);
6
7
// If error, return error message
8
if (!weatherData.ok) {
9
    throw new Error(`Weather API error: ${weatherData.status}`);
10
}
11
12
// Parse the weather data
13
const weatherDataJson = await weatherData.json();
14
15
// Cache the weather data for 10 minutes (600 seconds)
16
await weatherCache.put(cacheKey, JSON.stringify(weatherDataJson), {
17
    expirationTtl: 600,
18
});
19
20
// Return the weather data with a cache status header
21
return new Response(JSON.stringify(weatherDataJson), {
22
    status: 200,
23
    headers: { 
24
        "Content-Type": "application/json",
25
        "X-Cache-Status": "MISS"
26
            },
27
});
28
29
// Add error handling
30
} catch (error) {
31
    console.error("Error fetching or caching weather data:", error);
32
    return new Response(
33
        JSON.stringify({ error: "Failed to fetch weather data" }),
34
        {
35
            status: 502,
36
            headers: { "Content-Type": "application/json" },
37
        }
38
    );
39
}
40
};

1
---
2
import Layout from '../layouts/Layout.astro';
3
import { Navbar } from '../../devlink/Navbar.jsx';
4
import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
5
import 'weather-icons/css/weather-icons.css';
6
import ICON_MAP from '../utils/iconMap.js';
7
8
// Get base url for API calls
9
const url = Astro.url.origin + import.meta.env.BASE_URL;
10
11
//  Get weather data
12
const weather = await fetch(`${url}/api/weather`);
13
console.log(weather);
14
const weatherData = await weather.json();
15
const { temperature, weathercode }: { temperature: number; weathercode: number } = weatherData?.current_weather;
16
17
const iconClass = ICON_MAP[weathercode];
18
19
---
20
21
<Layout>
22
<Navbar
23
/>
24
<Section
25
    client:load
26
    tag="section"
27
    className="margin-bottom-24px"
28
    style={{
29
    minHeight: '100vh',
30
    display: 'flex',
31
    alignItems: 'center',
32
    justifyContent: 'center'
33
    }}
34
>
35
    <Container>
36
    <Block
37
        tag="div"
38
        className="hero-split"
39
        style={{
40
        textAlign: 'center',
41
        maxWidth: '600px',
42
        margin: '0 auto'
43
        }}
44
    >
45
        <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
46
        <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
47
        <h2>{temperature}°F <i class={`wi ${iconClass}`}></i></h2>
48
        <div>
49
        <Link
50
            button={true}
51
            options={{
52
            href: "#"
53
            }}
54
            className="button-primary"
55
        >
56
            Get Started
57
        </Link>
58
        </div>
59
    </Block>
60
    </Container>
61
</Section>
62
</Layout>
63
64
<style>
65
h1 {
66
    font-size: 2.5rem;
67
    font-weight: 700;
68
    background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
69
    -webkit-background-clip: text;
70
    -webkit-text-fill-color: transparent;
71
    background-clip: text;
72
}
73
</style>