Conditional fetching with `useQuery()`

[Dick de Leeuw]

Is your feature request related to a problem? Please describe.

I'm trying to implement conditional fetching in useQuery(), to no avail.

It's giving me the following error:

error - TypeError: Cannot read properties of null (reading 'url')
    at new PostgrestParser (/[redacted]/client/node_modules/@supabase-cache-helpers/postgrest-filter/dist/index.js:404:21)
    at /[redacted]/client/node_modules/@supabase-cache-helpers/postgrest-swr/dist/index.js:179:14
    at useSWRArgs (/[redacted]/client/node_modules/swr/dist/index.js:614:16)
    at useQuery (/[redacted]/client/node_modules/@supabase-cache-helpers/postgrest-swr/dist/index.js:591:38)
    at useProfilesQuery (webpack-internal:///./src/hooks/supabase/useProfilesQuery.ts:15:119)
    at AccountCommunicationSettings (webpack-internal:///./src/components/settings/account/AccountCommunicationSettings.tsx:24:118)
    at renderWithHooks (/[redacted]/client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/[redacted]/client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/[redacted]client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/[redacted]/client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) {
  page: '/user/account/communication'
}

The useQuery() implementation I tried:

import { useQuery } from '@supabase-cache-helpers/postgrest-swr'
import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react'
import { Database } from '../../../types/supabase'

export const useProfilesQuery = () => {
  const supabase = useSupabaseClient<Database>()
  const user = useUser()
  const query = supabase.from('profiles').select().eq('id', user?.id)

  // Conditional fetching on the next line: 'user ? query : null'
  const { data, mutate, error } = useQuery(user ? query : null, 'single')

  return {
    profile: data,
    mutate,
    error,
    loading: !data && !error,
  }
}

Describe the solution you'd like

Be able to use SWRs default behaviour as much as possible.

Describe alternatives you've considered

This works, but far from ideal:

import { useQuery } from '@supabase-cache-helpers/postgrest-swr'
import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react'
import { Database } from '../../../types/supabase'

export const useProfilesQuery = () => {
  const supabase = useSupabaseClient<Database>()
  const user = useUser()
  const query = supabase
    .from('profiles')
    .select()
    .eq('id', user?.id || 'i-do-not-exist')

  const { data, mutate, error } = useQuery(query, 'single')

  return {
    profile: data,
    mutate,
    error,
    loading: !data && !error,
  }
}

Additional context

Thanks for the great library. I'd like to know whether conditional fetching has been thought of (no usages in the examples) and if so, how can it be used properly?

[Philipp Steinrötter]

Thanks for taking the time to report this issue! This is indeed a bug that was introduced during a larger refactoring in recent commits. It is fixed in the new supabase-cache-helpers/postgrest-swr@0.4.9 release 🎉

[Dick de Leeuw]

TS2769: No overload matches this call.
Overload 1 of 2, '(column: "id", value: string): PostgrestFilterBuilder<{ Tables: { feedback: { Row: { app_version: string | null; created_at: string; feedback: string; id: number; user_id: string; }; Insert: { app_version?: string | null | undefined; created_at?: string | undefined; feedback: string; id?: number | undefined; user_id: string; }; Update: { ...; }; Relationships: [...]; }; ... 14 more ...; workspaces: { ...; }; }; Views: { ...; }; Functions: { ...; }; Enums: { ...; }; CompositeTypes: {}; }, { ...; }, { ...; }[], unknown, [...]>', gave the following error.
Argument of type string | undefined is not assignable to parameter of type string
Type undefined is not assignable to type string
Overload 2 of 2, '(column: string, value: string): PostgrestFilterBuilder<{ Tables: { feedback: { Row: { app_version: string | null; created_at: string; feedback: string; id: number; user_id: string; }; Insert: { app_version?: string | null | undefined; created_at?: string | undefined; feedback: string; id?: number | undefined; user_id: string; }; Update: { ...; }; Relationships: [...]; }; ... 14 more ...; workspaces: { ...; }; }; Views: { ...; }; Functions: { ...; }; Enums: { ...; }; CompositeTypes: {}; }, { ...; }, { ...; }[], unknown, [...]>', gave the following error.
Argument of type string | undefined is not assignable to parameter of type string
Type undefined is not assignable to type string

The issue is back @psteinroe , albeit this time with different TS error.

@supabase-cache-helpers/postgrest-core@0.3.0
@supabase-cache-helpers/postgrest-swr@1.5.0
@supabase/auth-helpers-nextjs@0.8.7
@supabase/auth-helpers-react@0.4.2
@supabase/auth-helpers-shared@0.6.3
swr@2.2.4

[Philipp Steinrötter]

@leeuwd what postgrest-js and supabase-js version do you have?