extended-salmon
extended-salmon12mo ago

Refine type inference from Supabase

How to get Supabase type safety in Refine data hooks
6 Replies
kapa.ai
kapa.ai12mo 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
kapa.ai12mo ago
<@798179772420718612> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon
extended-salmon12mo 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 🙂
helpful-purple
helpful-purple12mo 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.
rival-black
rival-black12mo ago
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.
extended-salmon
extended-salmon11mo ago
That was helpful! Thanks