@studiocms/cfetch

Esta es una integración de Astro^ que proporciona una función fetch con caché para proyectos Astro SSR

Uso

Requisitos previos

• Usando con un proyecto Astro SSR, aunque podrías importar y usar esto en un proyecto Astro SSG (estático), no tendría ningún beneficio ya que las páginas estáticas de Astro se pre-renderizan.

Instalación

1. Instala la integración automáticamente usando la CLI de Astro:

   npm

   npm run studiocms add @studiocms/cfetch

   pnpm

   pnpm run studiocms add @studiocms/cfetch

   yarn

   yarn run studiocms add @studiocms/cfetch

   O instálala manualmente:

   npm

   npm i @studiocms/cfetch

   pnpm

   pnpm add @studiocms/cfetch

   yarn

   yarn add @studiocms/cfetch

2. Instala las dependencias homólogas

   Si tu gestor de paquetes no instala automáticamente las dependencias homólogas, necesitarás asegurarte de que Effect está instalado.

   npm

   npm i effect

   pnpm

   pnpm add effect

   yarn

   yarn add effect

3. Añade la integración a tu configuración de Astro

   astro.config.mts

   import { defineConfig } from 'astro/config';
   import cFetch from "@studiocms/cfetch";
   
   export default defineConfig({
     integrations: [
       cFetch(),
     ],
   });

Uso

Esta integración incluye varias versiones de funciones fetch con caché y Effects^ para permitir un control completo de cómo trabajas con tus datos.

Efectos

Todos los efectos tienen el siguiente patrón de retorno o derivados de él.

Effect.Effect<CachedResponse<T>, FetchError, never>;

Tipo CachedResponse<T>

interface CachedResponse<T> {
  data: T;
  ok: boolean;
  status: number;
  statusText: string;
  headers: Record<string, string>;
}

Tipo CFetchConfig

interface CFetchConfig {
    ttl?: Duration.DurationInput;
    tags?: string[];
    key?: string;
    verbose?: boolean;
}

cFetchEffect

Interfaz

const cFetchEffect: <T>(
  url: string | URL,
  parser: (response: Response) => Promise<T>,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<T>, FetchError, never>

Ejemplo de uso

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
  }
);
/*
Tipo de retorno:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/

cFetchEffectJson

Interfaz

const cFetchEffectJson: <T>(
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<T>, FetchError, never>

Ejemplo de uso

import { cFetchEffectJson } from "c:fetch"

const effect = cFetchEffectJson<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Tipo de retorno:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/

cFetchEffectText

Interfaz

const cFetchEffectText: (
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<string>, FetchError, never>

Ejemplo de uso

import { cFetchEffectText } from "c:fetch"

const effect = cFetchEffectText(
  'https://example.com',
  { method: "GET" }
);
/*
Tipo de retorno:
  Effect.Effect<CachedResponse<string>, FetchError, never>
*/

cFetchEffectBlob

Interfaz

const cFetchEffectBlob: (
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<Blob>, FetchError, never>

Ejemplo de uso

import { cFetchEffectBlob } from "c:fetch"

const effect = cFetchEffectBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Tipo de retorno:
  Effect.Effect<CachedResponse<Blob>, FetchError, never>
*/

Funciones

Todas las funciones tienen el siguiente patrón de retorno o derivados de él.

CachedResponse<T>;

cFetch

Interfaz

const cFetch: <T>(
  url: string | URL,
  parser: (response: Response) => Promise<T>,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<T>>

Ejemplo de uso

import { cFetch } from "c:fetch"

const effect = await cFetch<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  (res) => res.json(),
  { method: "GET" }
);
/*
Tipo de retorno:
  CachedResponse<{ foo: string; bar: number; }>
*/

cFetchJson

Interfaz

const cFetchJson: <T>(
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<T>>

Ejemplo de uso

import { cFetchJson } from "c:fetch"

const effect = await cFetchJson<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Tipo de retorno:
  CachedResponse<{ foo: string; bar: number; }>
*/

cFetchText

Interfaz

const cFetchText: (
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<string>>

Ejemplo de uso

import { cFetchText } from "c:fetch"

const effect = await cFetchText(
  'https://example.com',
  { method: "GET" }
);
/*
Tipo de retorno:
  CachedResponse<string>
*/

cFetchBlob

Interfaz

const cFetchBlob: (
  url: string | URL,
  options?: RequestInit | undefined,
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<Blob>>

Ejemplo de uso

import { cFetchBlob } from "c:fetch"

const effect = await cFetchBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Tipo de retorno:
  CachedResponse<Blob>
*/