Refine type inference from Supabase

How to get Supabase type safety in Refine data hooks

6 Replies

kapa.ai•14mo ago

Hi @developeratul. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation (https://refine.dev/docs) and refine blog (https://refine.dev/blog) for more information on using refine with Supabase. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@798179772420718612> kapa.ai is still learning and improving, please let us how it did by reacting below

optimistic-gold•14mo ago

On Supabase, we can export our database types in a typescript file and get type intellisense while writing Supabase queries accordingly. The current supabase client setup looks like this:

export const supabaseClient = createClientComponentClient<Database>({
  supabaseUrl: NEXT_PUBLIC_SUPABASE_URL,
  supabaseKey: NEXT_PUBLIC_SUPABASE_ANON_KEY,
  options: {
    db: {
      schema: "public",
    },
  },
});

export const supabaseClient = createClientComponentClient<Database>({
  supabaseUrl: NEXT_PUBLIC_SUPABASE_URL,
  supabaseKey: NEXT_PUBLIC_SUPABASE_ANON_KEY,
  options: {
    db: {
      schema: "public",
    },
  },
});

When I use Supabase for the queries, that's perfectly fine and that's what I want. But when I use Refine hooks, I don't get that type of IntelliSense. How can I make it that way? That would be really cool for querying my database 🤩 My provider setup:

  <MantineProvider>
      <NavigationProgressProvider />
      <ToasterProvider />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(supabaseClient)}
        authProvider={authProvider}
        notificationProvider={notificationProvider}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <ReactQueryProvider>{children}</ReactQueryProvider>
      </Refine>
    </MantineProvider>

  <MantineProvider>
      <NavigationProgressProvider />
      <ToasterProvider />
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(supabaseClient)}
        authProvider={authProvider}
        notificationProvider={notificationProvider}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <ReactQueryProvider>{children}</ReactQueryProvider>
      </Refine>
    </MantineProvider>

BTW, I saw that refine hooks extend react-query. In that case, should I provide react-query again as a provider as I have done now? just have an additional question 🙂

metropolitan-bronze•14mo ago

Hi @developeratul You need to use generics of the refine hooks to get the type inference. For example, if you are using the useTable hook, you can do something like this:

const queryResult = useTable<Database["public"]["users"]>("users");

const queryResult = useTable<Database["public"]["users"]>("users");

Also, you don't need to provide the ReactQueryProvider as it is already provided by the Refine component.

metropolitan-bronze•14mo ago

You can check https://refine.dev/docs/api-reference/core/hooks/useTable/#basic-usage for more details

useTable | refine

useTable allows us to fetch data according to the sorter, filter, and pagination states. Under the hood, it uses useList for the fetch. Since it is designed to be headless, it expects you to handle the UI.

optimistic-gold•13mo ago

That was helpful! Thanks