Server Side Caching Error

[pbrissaud]

Describe the bug Using @supabase-cache-helpers/postgrest-server in Next and react-query with either cache.swr(query) or cache.query(query) results in a runtime error, both:

• On the server when used with prefetchQuery(...)
• On the client when used with useQuery(...)

The error thrown is:

Error: Key is not a PostgrestBuilder
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)

To Reproduce

1. Set up the cache as described in the documentation.
2. Create a query using Supabase's and wrap it with cache.swr(...) or cache.query(...).
3. Use this wrapped query in:
   • A server component with prefetchQuery(...) from @supabase-cache-helpers/postgrest-react-query
   • A client component with useQuery(...)

// lib/cache.ts
export const cache = new QueryCache(new DefaultStatefulContext(), {
  stores: [new MemoryStore({ persistentMap: new Map() })],
  fresh: 1000,
  stale: 2000,
});

// lib/queries/challenges.ts
function getChallenges(client: TypedSupabaseClient, opts: { searchQuery: string }) {
  let query = client
    .from("challenges")
    .select("*")
    .order("created_at", { ascending: false });

  return cache.swr(query); // or cache.query(query)
}

On the server:

// app/challenges/page.tsx
await prefetchQuery(
  queryClient,
  queries.challenges.list(supabase, { searchQuery: "" })
);

On the client:

// components/challenges/challenges-list.tsx
const { data, isLoading } = useQuery(
  queries.challenges.list(supabase, { searchQuery: debouncedSearchTerm })
);

Expected behavior The result of cache.swr(...) or cache.query(...) should be compatible with both useQuery(...) and prefetchQuery(...) without throwing runtime errors.

Additional context

• The same queries work perfectly fine without caching.
• The error seems to indicate that the object returned is not a valid PostgrestBuilder or doesn't match the expected shape.
• Happens even with simple .select("*") queries.
• Using:
  • @supabase-cache-helpers/[email protected]
  • @supabase-cache-helpers/[email protected]
  • @tanstack/react-query@5
  • Next.js 15 (App Router)

[psteinroe]

Thanks for reporting! What supabase-js / postgrest-js version are you using?

[pbrissaud]

In my package.json, they are defined as latest but here the versions in the lockfile :

 '@supabase-cache-helpers/postgrest-server':
        specifier: ^0.0.10
        version: 0.0.10(@supabase/[email protected])(@supabase/[email protected])
      '@supabase/ssr':
        specifier: latest
        version: 0.5.2(@supabase/[email protected])
      '@supabase/supabase-js':
        specifier: latest
        version: 2.48.1

[psteinroe]

this is fixed with the latest release. before, we weren't compatible with the latest supabase-js. :)

[pbrissaud]

Hello,

I update all the dependencies, but still having the issue 😞

    "@supabase-cache-helpers/postgrest-react-query": "^1.13.2",
    "@supabase-cache-helpers/postgrest-server": "^0.1.0",
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "^2.49.4",

[psteinroe]

That's very weird. Do you see any difference in what you are doing vs what we are doing in tests here?

[dinhkhanh]

Same issues with version:

    "@supabase-cache-helpers/postgrest-react-query": "^1.13.4",
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "^2.50.2",

[sandervspl]

I am also getting this error.

"@supabase-cache-helpers/postgrest-react-query": "^1.13.6",
"@supabase/ssr": "^0.7.0",
"@supabase/supabase-js": "^2.75.1"

Repository for reproduction: https://github.com/sandervspl/lab-scrum-poker-app/tree/ssr-query DB setup can be found in scripts folder

[psteinroe]

ahh sorry, I misunderstood the issue earlier! So you are using postgrest-server alongside the react-query adapter? And passing the result of this function to react-query throws.

function getChallenges(client: TypedSupabaseClient, opts: { searchQuery: string }) {
  let query = client
    .from("challenges")
    .select("*")
    .order("created_at", { ascending: false });

  return cache.swr(query); // or cache.query(query)
}

You probably want to cache the server-side prefetch? That's not directly supported right now. postgrest-server is meant to be used in your backend service. But we could add a similar caching layer to the react-query prefetch.

For the other two reporters, would you mind sharing a bit of code?

[sandervspl]

@psteinroe i linked my repository. You can find it there. It's a small app. room/[roomId]/page.tsx is where the serverside requests are done