Astro integration that allows you to have a cached fetch function in your Astro SSR project.
npm install @studiocms/cfetch@studiocms/cfetch
This is an Astro integration that provides a cacheable fetch function for Astro SSR
- Using with an Astro SSR project, While you could import and use this in an Astro SSG (static) project, it would have no benefit as Astro Static pages are pre-rendered.
1. Install the integration automatically using the Astro CLI:
``bash`
pnpm astro add @studiocms/cfetch
`bash`
npx astro add @studiocms/cfetch
`bash`
yarn astro add @studiocms/cfetch
Or install it manually:
1. Install the required dependencies
`bash`
pnpm add @studiocms/cfetch
`bash`
npm install @studiocms/cfetch
`bash`
yarn add @studiocms/cfetch
2. Install peer dependencies
If your package manager does not automatically install peer dependencies, you will need to ensure Effect is installed.
`bash`
pnpm add effect
`bash`
npm install effect
`bash`
yarn add effect
3. Add the integration to your astro config
`diff
+import cFetch from "@studiocms/cfetch";
export default defineConfig({
integrations: [
+ cFetch(),
],
});
`
This integration includes various versions of cached fetch functions and Effects to allow full control of how you work with your data.
#### Effects
All Effects have the following return pattern or derivatives there of
`ts`
Effect.Effect
##### CachedResponse type
`ts`
interface CachedResponse
data: T;
ok: boolean;
status: number;
statusText: string;
headers: Record
}
##### CFetchConfig type
`ts`
interface CFetchConfig {
ttl?: Duration.DurationInput;
tags?: string[];
key?: string;
verbose?: boolean;
}
##### InvalidateCacheOptions type
`ts`
interface InvalidateCacheOptions {
keys?: string[];
tags?: string[];
}
##### cFetchEffect
###### Interface
`ts`
const cFetchEffect:
url: string | URL,
parser: (response: Response) => Promise
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Effect.Effect
###### Example Usage
`ts
import { cFetchEffect, Duration } from "c:fetch"
const effect = cFetchEffect<{ foo: string; bar: number; }>(
'https://api.example.com/data',
(res) => res.json(),
{ method: "GET" },
{ ttl?: Duration.hours(1), tags?: ['example'], key?: "api-data-fetch", verbose?: false }
);
/*
Return type:
Effect.Effect
*/
`
##### invalidateCacheEffect
###### Interface
`ts`
const invalidateCacheEffect: (opts: InvalidateCacheOptions) => Effect.Effect
###### Example Usage
`ts`
const effect = invalidateCacheEffect({
tags: ['user'],
keys: ['user:123', 'user:456']
})
/*
Return type:
Effect.Effect
*/
##### cFetchEffectJson
###### Interface
`ts`
const cFetchEffectJson:
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Effect.Effect
###### Example Usage
`ts
import { cFetchEffectJson } from "c:fetch"
const effect = cFetchEffectJson<{ foo: string; bar: number; }>(
'https://api.example.com/data',
{ method: "GET" }
);
/*
Return type:
Effect.Effect
*/
`
##### cFetchEffectText
###### Interface
`ts`
const cFetchEffectText: (
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Effect.Effect
###### Example Usage
`ts
import { cFetchEffectText } from "c:fetch"
const effect = cFetchEffectText(
'https://example.com',
{ method: "GET" }
);
/*
Return type:
Effect.Effect
*/
`
##### cFetchEffectBlob
###### Interface
`ts`
const cFetchEffectBlob: (
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Effect.Effect
###### Example Usage
`ts
import { cFetchEffectBlob } from "c:fetch"
const effect = cFetchEffectBlob(
'https://example.com/image.png',
{ method: "GET" }
);
/*
Return type:
Effect.Effect
*/
`
#### Functions
All Functions have the following return pattern or derivatives there of
`ts`
CachedResponse
##### cFetch
###### Interface
`ts`
const cFetch:
url: string | URL,
parser: (response: Response) => Promise
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Promise
###### Example Usage
`ts
import { cFetch } from "c:fetch"
const response = await cFetch<{ foo: string; bar: number; }>(
'https://api.example.com/data',
(res) => res.json(),
{ method: "GET" }
);
/*
Return type:
CachedResponse<{ foo: string; bar: number; }>
*/
`
##### cFetchJson
###### Interface
`ts`
const cFetchJson:
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Promise
###### Example Usage
`ts
import { cFetchJson } from "c:fetch"
const response = await cFetchJson<{ foo: string; bar: number; }>(
'https://api.example.com/data',
{ method: "GET" }
);
/*
Return type:
CachedResponse<{ foo: string; bar: number; }>
*/
`
##### cFetchText
###### Interface
`ts`
const cFetchText: (
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Promise
###### Example Usage
`ts
import { cFetchText } from "c:fetch"
const response = await cFetchText(
'https://example.com',
{ method: "GET" }
);
/*
Return type:
CachedResponse
*/
`
##### cFetchBlob
###### Interface
`ts`
const cFetchBlob: (
url: string | URL,
options?: RequestInit | undefined,
cacheConfig?: CFetchConfig | undefined
) => Promise
###### Example Usage
`ts
import { cFetchBlob } from "c:fetch"
const response = await cFetchBlob(
'https://example.com/image.png',
{ method: "GET" }
);
/*
Return type:
CachedResponse
*/
`
##### invalidateCache
###### Interface
`ts`
const invalidateCache: (opts: InvalidateCacheOptions) => Promise
###### Example Usage
`ts``
const res = await invalidateCache({
tags: ['user'],
keys: ['user:123', 'user:456']
})
/*
Return type:
void
*/