@studiocms/cfetch

Il s’agit d’une intégration Astro^ qui fournit une fonction de récupération mise en cache pour Astro SSR.

Utilisation

Prérequis

• Utilisation avec un projet Astro SSR : Bien que vous puissiez importer et utiliser ceci dans un projet Astro SSG (statique), cela ne présenterait aucun avantage car les pages statiques d’Astro sont pré-rendues.

Installation

1. Installez l’intégration automatiquement à l’aide de la CLI d’Astro :

   npm

   npm run studiocms add @studiocms/cfetch

   pnpm

   pnpm run studiocms add @studiocms/cfetch

   yarn

   yarn run studiocms add @studiocms/cfetch

   Ou installez-la manuellement :

   npm

   npm i @studiocms/cfetch

   pnpm

   pnpm add @studiocms/cfetch

   yarn

   yarn add @studiocms/cfetch

2. Installez les dépendances homologues

   Si votre gestionnaire de paquets n’installe pas automatiquement les dépendances homologues, vous devrez vous assurer que Effect est installé.

   npm

   npm i effect

   pnpm

   pnpm add effect

   yarn

   yarn add effect

3. Ajoutez l’intégration à votre configuration Astro.

   astro.config.mts

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

Utilisation

Cette intégration comprend différentes versions de fonctions de récupération mises en cache et d’Effects^ pour vous permettre de contrôler pleinement la façon dont vous travaillez avec vos données.

Effects

Toutes les méthodes d’Effects ont le schéma de retour suivant ou sont dérivées de

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

Type CachedResponse<T>

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

Type CFetchConfig

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

cFetchEffect

Interface

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

Exemple d’utilisation

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

cFetchEffectJson

Interface

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

Exemple d’utilisation

import { cFetchEffectJson } from "c:fetch"

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

cFetchEffectText

Interface

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

Exemple d’utilisation

import { cFetchEffectText } from "c:fetch"

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

cFetchEffectBlob

Interface

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

Exemple d’utilisation

import { cFetchEffectBlob } from "c:fetch"

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

Fonctions

Toutes les fonctions ont le modèle de retour suivant ou sont dérivées de :

CachedResponse<T>;

cFetch

Interface

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

Exemple d’utilisation

import { cFetch } from "c:fetch"

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

cFetchJson

Interface

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

Exemple d’utilisation

import { cFetchJson } from "c:fetch"

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

cFetchText

Interface

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

Exemple d’utilisation

import { cFetchText } from "c:fetch"

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

cFetchBlob

Interface

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

Exemple d’utilisation

import { cFetchBlob } from "c:fetch"

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