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,
  });
};

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,
  });
};

James•12/15/23, 6:14 PM

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•12/15/23, 8:02 PM

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,
  });
};

santosaOP•12/15/23, 8:03 PM

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

santosaOP•12/15/23, 8:04 PM

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

James•12/15/23, 8:13 PM

In Next.js apps, you use next.revalidatenext.revalidate and

cache

cache

, and the fetch cache is then handled internally in the adaptor, due to how next.js' data fetching works

santosaOP•12/15/23, 8:17 PM

Ahhhh, I think I got it, thank you

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, }); };

cf options in fetch with typecript

Similar Threads

Similar Threads

Similar Threads