# cf-kv-fetcher

> Fetch data from both a server and Cloudflare KV and keep them in sync.

Latest version **1.0.1** (published 2023-11-11) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install cf-kv-fetcher
pnpm add cf-kv-fetcher
yarn add cf-kv-fetcher
bun add cf-kv-fetcher
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-11-11 |
| First published | 2023-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Greg Priday |
| Maintainers | gpriday |
| Keywords | cloudflare, kv, fetch, cache, sveltekit |

## Links

- npm: https://www.npmjs.com/package/cf-kv-fetcher
- Repository: https://github.com/gregpriday/cf-kv-fetcher
- Homepage: https://github.com/gregpriday/cf-kv-fetcher#readme
- Issues: https://github.com/gregpriday/cf-kv-fetcher/issues
- npm.io page: https://npm.io/package/cf-kv-fetcher

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-11-11
- 1.0.0 — 2023-11-11

## README

# cf-kv-fetcher

`cf-kv-fetcher` is an NPM package that provides a convenient way to fetch data from a server endpoint while utilizing Cloudflare KV for caching and ensuring data freshness. Designed to speed up dynamic SvelteKit applications, `cf-kv-fetcher` provides a simple API for fetching data and managing it in your Svelte components.

## Features

- Seamless integration with SvelteKit for server-side rendering.
- Efficient data fetching with Cloudflare KV as a caching layer.
- Straightforward API for fetching and managing data.

## Installation

Using npm:

```bash
npm install cf-kv-fetcher
```

## Usage

### Fetching Data in SvelteKit

In your SvelteKit `load` function:

```javascript
import { env } from "$env/dynamic/public";
import { error } from "@sveltejs/kit";
import { Fetcher } from "cf-kv-fetcher";

export async function load({ fetch, platform }) {
    const apiUrl = `${env.PUBLIC_API_URL}/`;
    const fetcher = new Fetcher(platform.env.CF_KV_NAMESPACE);

    const { data, server } = await fetcher.fetchAndGroup({
        projects: apiUrl
    });

    // ... additional logic to handle fetched data
}
```

### Using DataManager in +page.svelte

To manage and reactively update your Svelte components with fetched data:

```svelte
<script>
    import { DataManager } from "cf-kv-fetcher";
    import ProjectGrid from "$lib/components/projects/ProjectGrid.svelte";
    import Hero from "$lib/components/home/Hero.svelte";
    import Pagination from "$lib/components/common/Pagination.svelte";

    export let data = {};
    const dm = new DataManager();

    let projects;
    let pagination;

    $: if (data) {
        dm.set(data);
        // This will trigger a refresh of projects when the fresh server data is available.
        projects = dm.load('projects.data', updatedProjects => {
            projects = updatedProjects;
        });
        pagination = dm.load('projects.pagination', updatedPagination => {
            pagination = updatedPagination;
        });
    }
</script>

<!-- Your template HTML goes here -->
```

### Handling Multiple Endpoints

When your SvelteKit application needs to handle multiple related endpoints:

```javascript
import { Fetcher } from "cf-kv-fetcher";
import { env } from "$env/dynamic/public";
import { error } from "@sveltejs/kit";

export async function load({ params, platform }) {
    const { slug } = params;
    const baseUrl = `${env.PUBLIC_API_URL}/project/${slug}`;  // Construct the API URL
    const fetcher = new Fetcher();

    const { data, server } = await fetcher.fetchAndGroup({
        project: `${baseUrl}`,
        similar: `${baseUrl}/similar`,
        sponsors: `${baseUrl}/sponsors`,
    });

    // Check if this is a 404
    if (data.project && data.project.status === 404) {
        throw error(404, { message: 'Not Found' });
    }

    return {
        ...data,
        server
    };
}
```

```svelte
<script>
    import { DataManager } from "cf-kv-fetcher";
    // ... import your Svelte components

    export let data;
    const dm = new DataManager();

    let project;
    let similar;
    let sponsors;

    $: if(data) {
        dm.set(data);
        project = dm.load('project.data', d => project = d);
        similar = dm.load('similar.data', d => similar = d);
        sponsors = dm.load('sponsors.data', d => sponsors = d);
    }
</script>

<!-- Your template HTML and reactive statements for updates go here -->
```

## Support

For support, please open an issue on the GitHub repository issue tracker.

## License

This project is licensed under the MIT License.

---
_Source: https://npm.io/package/cf-kv-fetcher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._