Cloudflare Developers•12mo ago

cf options in fetch with typecript

Im fetching from turso in my Next.js app some data. I need it to not be cached and I read that I could change those options with cf as described here https://developers.cloudflare.com/workers/examples/cache-using-fetch/ I have a custom fetch that I use for my libsql client But it cries and says that cf cant be used, is there any workaround for this?

import { createClient } from "@libsql/client/web";

const customFetch = (
  input: RequestInfo | URL,
  init?: RequestInit | undefined
) => {
  return fetch(input, {
    cf: {},
  });
};
export const getClientLibsql = () => {
  return createClient({
    url: process.env.LIBSQL_URL || "",
    authToken: process.env.LIBSQL_TOKEN,
    fetch: customFetch,
  });
};

import { createClient } from "@libsql/client/web";

const customFetch = (
  input: RequestInfo | URL,
  init?: RequestInit | undefined
) => {
  return fetch(input, {
    cf: {},
  });
};
export const getClientLibsql = () => {
  return createClient({
    url: process.env.LIBSQL_URL || "",
    authToken: process.env.LIBSQL_TOKEN,
    fetch: customFetch,
  });
};

4 Replies

James•12mo ago

I don't believe the cf property would do anything on the fetch anyway because of how Next.js patches the fetch function. Anything caching with fetch should be handled through the Next.js fetch cache stuff - https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching

Data Fetching: Fetching, Caching, and Revalidating | Next.js

Learn how to fetch, cache, and revalidate data in your Next.js application.

santosaOP•12mo ago

You were correct sir, this did the trick

import { createClient } from "@libsql/client/web";

const customFetch = (
  input: RequestInfo | URL,
  init?: RequestInit | undefined
) => {
  return fetch(input, {
    ...init,
    next: {
      revalidate: 0,
    },
  });
};
export const getClientLibsql = () => {
  return createClient({
    url: process.env.LIBSQL_URL || "",
    authToken: process.env.LIBSQL_TOKEN,
    fetch: customFetch,
  });
};

import { createClient } from "@libsql/client/web";

const customFetch = (
  input: RequestInfo | URL,
  init?: RequestInit | undefined
) => {
  return fetch(input, {
    ...init,
    next: {
      revalidate: 0,
    },
  });
};
export const getClientLibsql = () => {
  return createClient({
    url: process.env.LIBSQL_URL || "",
    authToken: process.env.LIBSQL_TOKEN,
    fetch: customFetch,
  });
};

Then now I'm kinda confused, there is no cache from cloudflare at all if I don't set anything in the cf vars? think3d

if I ever need them, the typescript stuff would persist?

James•12mo ago

In Next.js apps, you use next.revalidate and cache, and the fetch cache is then handled internally in the adaptor, due to how next.js' data fetching works

santosaOP•12mo ago

Ahhhh, I think I got it, thank you

Gaming

Programming

cf options in fetch with typecript