search

supabase / supabase-js

An isomorphic Javascript client for Supabase. Query your Supabase database, subscribe to realtime events, upload and download files, browse typescript examples, invoke postgres functions via rpc, invoke supabase edge functions, query pgvector.
https://supabase.com
MIT License
2.92k stars 224 forks source link

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

Open susemeee opened 6 months ago

susemeee commented 6 months ago

Bug report

Describe the bug

To assign cache tags to control Next.js' data caching, Supabase's custom fetch override should be used. Referred https://github.com/supabase/supabase-js/issues/725#issuecomment-1578811299

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

Additional context

Add any other context about the problem here.

thorwebdev commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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

samuelbohl commented 4 months ago

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

fmorroni commented 3 months ago

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 commented 2 weeks ago

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?