How to opt out of supabase-js SDK caching in nextjs 14

[hnykda]

Hi. I simply want to stop caching of supabase-js in my nextjs app. To prevent caching now, I add a random string to the request which is terrible, e.g.:

  const { data, error } = await supabase
    .from('table')
    .select('id')
    .eq('id', someId)
    // This stupidity is here just because of caching
    // for some reason, supabase underlying calls are being cached
    // unless we add this random string to the query...
    .neq('id', nanoid())
    .maybeSingle();

which works, but oh boy...

I wanted to turn off caching by providing a custom fetch function that would have cache: "no-cache" as hinted here (and docs), but I cannot get it work typewise, as for:

export const createFetch =
  (options: Pick<RequestInit, 'next' | 'cache'>) =>
  (url: RequestInfo | URL, init?: RequestInit) => {
    return fetch(url, {
      ...init,
      ...options,
    });
  };

const supabase = createClient<Database>(
  NEXT_PUBLIC_SUPABASE_URL,
  SUPABASE_SERVICE_ROLE_KEY,
  {
    auth: {
      persistSession: false,
    },
    global: {
      fetch: createFetch({
        cache: 'no-store',
      }),
    },
  },
);

I get:

Type '(url: RequestInfo | URL, init?: RequestInit) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.
  Types of parameters 'url' and 'input' are incompatible.
    Type 'RequestInfo' is not assignable to type 'RequestInfo | URL'.
      Type 'Request' is not assignable to type 'RequestInfo | URL'.
        Property 'referrer' is missing in type 'import("/Users/dan/work/varuna/code/varuna/node_modules/undici-types/fetch").Request' but required in type 'Request'.ts(2322)
lib.dom.d.ts(18717, 14): 'referrer' is declared here.
(property) fetch?: {
    (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>;
    (input: RequestInfo, init?: RequestInit | undefined): Promise<...>;
} | undefined

and also every supabase call start to complain about many other stuff I can't parse very well, like this:

What can I do?

[GaryAustin1]

Are you sure the custom fetch is the best way?
https://github.com/orgs/supabase/discussions/19084
Mentions 2 ways users here have used. I don't know anything about next.js though and this is really a next.js question and not supabase, unless you have to do the custom fetch I guess.

[GaryAustin1]

No worries asking here. Hopefully someone has info for you.
This is a related discussion from your link.
supabase/supabase-js#917

[KarthikeyanVijayanEasyLLM]

I am facing the same issue. And I use createServerClient with 'use server' for server actions in Next 14.

If I use .neq("id", randomInt(1000000000)), I am not facing this problem

[GaryAustin1]

A user in Discord suggests this:

export const supabase = createClientComponentClient({
  options: {
    global: {
      fetch: createFetch({
        cache: "no-store",
      }),
    },
  },
});

'use server'
export const createFetch =
  (options: Pick<RequestInit, "next" | "cache">) =>
  (url: RequestInfo | URL, init?: RequestInit) => {
    return fetch(url, {
      ...init,
      ...options,
    });
  };

[hnykda]

That does not work type wise for me on Next 14.0.1:

export const createFetch =
  (options: Pick<RequestInit, 'next' | 'cache'>) =>
  (url: RequestInfo | URL, init?: RequestInit) => {
    return fetch(url, {
      ...init,
      ...options,
    });
  };

export const supabase = createClient<Database>(
  NEXT_PUBLIC_SUPABASE_URL,
  SUPABASE_SERVICE_ROLE_KEY,
  {
    auth: {
      persistSession: false,
    },
    global: {
      fetch: createFetch({
        cache: 'no-store',
      }),
    },
  },
);

gives me:

Type '(url: RequestInfo | URL, init?: RequestInit) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.
  Types of parameters 'url' and 'input' are incompatible.
    Type 'RequestInfo' is not assignable to type 'RequestInfo | URL'.
      Type 'Request' is not assignable to type 'RequestInfo | URL'.
        Property 'referrer' is missing in type 'import("/Users/dan/work/varuna/code/varuna/node_modules/undici-types/fetch").Request' but required in type 'Request'.ts(2322)
lib.dom.d.ts(18717, 14): 'referrer' is declared here.

and all infered typing gets wrong, so I lose all typesafety

[danielfoxp2]

I discovered today that I have this same problem. The .neq("id", uuidv4()) is helping as a workaround but it would be awesome to have a real solution for it.

[chaitanya-000]

Hey @hnykda, have you found some solution to this problem ? Facing the same caching issue.

[hnykda]

Nope. 😭

[chaitanya-000]

So @hnykda, about your workaround of adding the string, is it working well in production ? Asking so that I can use and implement your workaround and move on, rather than solving this issue at the end of the sprint

[hnykda]

yes, it works fine. you need to generate valid input for that .neq(field, ...)

[chaitanya-000]

hey @hnykda , was looking into this whole caching thing and had some really useful insights related to the images, are you facing issue with regular data or with images only ?

[hnykda]

Hey. Regular data as well.

[albertocubeddu]

I've tried the experimental feature and it's working for me:

import { unstable_noStore as noStore } from "next/cache";
export function createADMINClient() {
   noStore();
   return createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.SUPABASE_SERVICE_ROLE_KEY!,
      {
         auth: {
            autoRefreshToken: false,
            persistSession: false,
         },
      }
   );
}

Now every query using this Client is getting fresh results.

[Larry-Osakwe]

This worked for me

Slight example for anyone else in the future

import { createClient } from '@supabase/supabase-js'
import { unstable_noStore as noStore } from "next/cache";

const supabaseUrl = process.env.SUPABASE_URL as string
const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY as string

export function createADMINClient() {
    noStore();
    return createClient(
        supabaseUrl,
        supabaseKey,
        {
            auth: {
                autoRefreshToken: false,
                persistSession: false,
            },
        }
    );
}

export const supabase = createADMINClient();

export async function getAllEvents() {
    const { data, error } = await supabase
        .from('events')
        .select()

    if (error) {
        console.error('Error fetching events:', error);
    } else {
        console.log('Fetched events:', data.length);
    }

    return data;
}

[ordinz]

I'm sad to say this isn't breaking the cache for me.

[MJUrian-Learner]

Works for me

[tadeegan]

Where is this caching behavior documented? I can't find any docs on it. Is it a supabase thing or next thing?

[hnykda]

It's Next's feature (I had to resist here not to put it in quotes):

Next.js extends the native Web fetch() API to allow each request on the server to set its own persistent caching semantics.

I flipped out when I found out. I mean, I am not blaming anyone, but I would rather live in a world where this wasn't the case or it was somewhere clearly written, in BIG RED SIGN AT THE BEGINNING OF THE DOCS. Like, the lived experience is "A database select is being cached?!"

[tadeegan]

Next.js will default to force-cache wtf...

[horlah]

@hnykda I found a solution, for a server component simply add this:

export const revalidate = 60;
// value can be 0 or any figure in seconds, it is the revalidation interval.

See docs reference: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate

Or try this solution for client components https://github.com/orgs/supabase/discussions/20022#discussioncomment-9347672

[hnykda]

I can't explain why because I haven't found out, but that doesn't work for us for some reason. The app is semi-complex, importing the client from other files, using actions, ... And putting revalidate = 0 to the page.tsx with the component where we experienced that didn't change anything.

Also, I would really just want to never cache the stuff with the supabase client, while keeping other cache stuff in. This solution doesn't do that, it turns of caching globally.

[sos0]

@hnykda Would it make sense to add a middleware solution that intercepts supabase domains?

[hnykda]

Eh, maybe? 🤔 How would you actually do that though?

[lmoj]

I just do this

const supabase = createClient(
  <SUPABASE_URL>,
  <SUPABASE_KEY>,
  {
    global: {
      fetch: (url: any, options = {}) => {
        return fetch(url, { ...options, cache: 'no-store' });
      }
    }
  }
)

[foxbit19]

Thank you! This fixed the issue!

[rizbud]

thank you!
you saved my life ❤️

[rkefi]

Happy i've found this only after 3 hours of debugging 😅😅😅
Thank you so much!!!

[filippobrigati]

So with this, also server components are re-fetching on every reloading right?

[featherJ]

Thank you so, so much!

[sos0]

Next 15 is removing its default caching 😅

[denisrudov]

it is. but now I would like to opt in cache for particular request. is it possible?