fetch override does not go well with Next.js' caching

[susemeee]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

To assign cache tags to control Next.js' data caching, Supabase's custom fetch override should be used. Referred #725 (comment)

However there seems to be some incompatibility present; Next.js patched fetch API does not seem to be applied to Supabase's fetch, resulting data cache completely not to work.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

There is a sample project for reproduction.

1. Build and deploy sample project
   • A supabase project and deployment target should've set up; I used CloudFlare
2. Data caching and API such as revalidateTag from Next.js does not work properly, compared to direct usage of fetch API in the test code

Expected behavior

Whether fetch is used directly or via Supabase API the data cache should be used.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• Version of supabase-js: 2.38.4
• Version of Node.js: v20.2.0
• Version of Next.js: v13.5.4

Additional context

Add any other context about the problem here.

[thorwebdev]

I remember I had checked this in the past and it was using the correct fetch. We'll investigate. In the meantime, you can pass the fetch object to the createClient method: https://supabase.com/docs/reference/javascript/initializing?example=custom-fetch-implementation

[soedirgo]

I can't reproduce this on the sample project with npm run dev.

and deployment target should've set up; I used CloudFlare

Can you clarify what this means? Are you deploying the Next.js project to CF Workers? I'm not familiar with Next.js-isms.

[susemeee]

Yeah, I used CF workers and pages for deployment. I wonder if the issue is specific to CF environment + Next.js edge runtime or not.

As a workaround I copy-pasted some of internal postgrest-js code (like this) and made supabaseNextCompatFetch wrapper function.

Passing global fetch object to the createClient method did not work but the method above did. Quite confusing.

[hnykda]

Not sure if this is related, but I have the opposite issue: I can't get rid of the cache...

[samuelbohl]

@susemeee Does your supabase client wrapper support setting tags on a query basis?

[fmorroni]

I'm having the same issue on my project. Fetching data with the supabase server client causes next to not use the data cache at all. But if I manually create the url and use fetch directly then the cache works fine.
@thorwebdev's solution didn't work.

[mickbut-ler]

I'm having the same issue on my project. Fetching data with the supabase server client causes next to not use the data cache at all. But if I manually create the url and use fetch directly then the cache works fine. @thorwebdev's solution didn't work.

How did you write the custom fetch?