S
Supabase•4d ago
Meexa

Server-side prefetch + tanstack-query

Hi, Trying to implement this https://supabase.com/blog/react-query-nextjs-app-router-cache-helpers but I'm running into an error: 
Key is not a PostgrestBuilder
Key is not a PostgrestBuilder
The error is coming from the prefetch function of @supabase-cache-helpers/postgrest-react-query 
prefetchQuery(queryClient, getRoom(supabase, roomId)),
prefetchQuery(queryClient, getRoom(supabase, roomId)),
More of my code for reference: 
import { cookies } from 'next/headers';
import { createServerClient } from '@supabase/ssr';

import { Database } from './database.types';

export async function getSupabaseServerClient() {
  const cookieStore = await cookies();

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
        },
      },
    },
  );
}
import { cookies } from 'next/headers';
import { createServerClient } from '@supabase/ssr';

import { Database } from './database.types';

export async function getSupabaseServerClient() {
  const cookieStore = await cookies();

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
        },
      },
    },
  );
}
import { getRoom } from '@/lib/queries/room-db';
import { getSupabaseServerClient } from '@/lib/supabase/server';
import { prefetchQuery } from '@supabase-cache-helpers/postgrest-react-query';
import { QueryClient } from '@tanstack/react-query';

export default async function RoomPage({ params, searchParams }: RoomPageProps) {
  const { roomId } = await params;
  const supabase = await getSupabaseServerClient();
  const queryClient = new QueryClient();

  prefetchQuery(queryClient, getRoom(supabase, roomId));

  // Rest of the page code
}
import { getRoom } from '@/lib/queries/room-db';
import { getSupabaseServerClient } from '@/lib/supabase/server';
import { prefetchQuery } from '@supabase-cache-helpers/postgrest-react-query';
import { QueryClient } from '@tanstack/react-query';

export default async function RoomPage({ params, searchParams }: RoomPageProps) {
  const { roomId } = await params;
  const supabase = await getSupabaseServerClient();
  const queryClient = new QueryClient();

  prefetchQuery(queryClient, getRoom(supabase, roomId));

  // Rest of the page code
}
Is this still the way to go or is there a new way to fetch on server and hydrate the client? Didn't find anything while Googling
2 Replies
Meexa
MeexaOP•4d ago
I get the same error when I remove all server-side prefetches and fetch from client-side only 
import { getSupabaseBrowserClient } from '@/lib/supabase/client';
import { useQuery } from '@supabase-cache-helpers/postgrest-react-query';

async function getRoom(supabase: TypedSupabaseClient, roomId: string) {
  return supabase.from('rooms').select('*').eq('id', roomId).single();
}

 export function useRoomQuery(roomId: string) {
   9 |   const supabase = getSupabaseBrowserClient();
> 10 |   return useQuery(getRoom(supabase, roomId));
     |                  ^
  11 | }
import { getSupabaseBrowserClient } from '@/lib/supabase/client';
import { useQuery } from '@supabase-cache-helpers/postgrest-react-query';

async function getRoom(supabase: TypedSupabaseClient, roomId: string) {
  return supabase.from('rooms').select('*').eq('id', roomId).single();
}

 export function useRoomQuery(roomId: string) {
   9 |   const supabase = getSupabaseBrowserClient();
> 10 |   return useQuery(getRoom(supabase, roomId));
     |                  ^
  11 | }
Meexa
MeexaOP•4d ago
I see there is an issue open at https://github.com/psteinroe/supabase-cache-helpers/issues/579 I posted my repository. Hope that helps with fixing the bug!
GitHub
Server Side Caching Error · Issue #579 · psteinroe/supabase-cache...
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 ...

Did you find this page helpful?