Use more than one Supabase Table on one Page

Hey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.

14 Replies

kapa.ai•17mo ago

Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- 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) for more information on working with data providers and hooks. ----------------------

Overview | refine

What is refine?

kapa.ai•17mo ago

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

adverse-sapphire•17mo ago

Can you give me more detail please ? what is your use case senario? how to change resource property https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#resource how to handle relational data https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#how-can-i-handle-relational-data

quickest-silver•17mo ago

Hey @eliot0801, For example, you can call useTable multiple times in a single component. By default, refine hooks infer the resource name from the URL, but you can also pass it in as a parameter. For example, if you have a table called cases and a table called posts, you can do something like this:

const casesResult = useTable({ resource: 'cases' })

const postsResult = useTable({ resource: 'posts' })

const casesResult = useTable({ resource: 'cases' })

const postsResult = useTable({ resource: 'posts' })

exotic-emerald•17mo ago

I want to use in this Resource/Page Data from another Table of Supabase

exotic-emerald•17mo ago

In this page I need Data from another Table

adverse-sapphire•17mo ago

you can use multiple data provider https://refine.dev/docs/api-reference/core/providers/data-provider/#multiple-data-providers you can change dataProviderName https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#dataprovidername

exotic-emerald•17mo ago

Thx you, I am gonna try

adverse-sapphire•17mo ago

you can give data provider name to resource. much easier

     resources={[
                        {
                            name: "posts",
                            list: "/posts",
                            show: "/posts/show/:id",
                            edit: "/posts/edit/:id",
                            create: "/posts/create",
                            meta: {
                                dataProviderName: "other data provider",
                            },
                        },
                    ]}

     resources={[
                        {
                            name: "posts",
                            list: "/posts",
                            show: "/posts/show/:id",
                            edit: "/posts/edit/:id",
                            create: "/posts/create",
                            meta: {
                                dataProviderName: "other data provider",
                            },
                        },
                    ]}

if you are using refine@3 meta should be options

 options: {
    dataProviderName: "other data provider",
 }

 options: {
    dataProviderName: "other data provider",
 }

exotic-emerald•17mo ago

Yeah thx you Alican 🙂

vicious-gold•17mo ago

I want to use the same dataProvider. I cant import QueryClientProvider, since I have 'react-query' not installed. Do I really need to install that? The big problem is following: We want to use the create page. But it has to create its values into two tables:

<TextField
          {...register("title", {
            required: "This field is required",
          })}
          error={!!(errors as any)?.title}
          margin="normal"
          fullWidth
          type="text"
          label="Title"
          name="title"
          value={values.titleIn}
          helperText={`${values.titleIn.length}/${24}`}
          onChange={handleChange("titleIn")}
          inputProps={{ maxLength: 24 }}
        />

<TextField
          {...register("title", {
            required: "This field is required",
          })}
          error={!!(errors as any)?.title}
          margin="normal"
          fullWidth
          type="text"
          label="Title"
          name="title"
          value={values.titleIn}
          helperText={`${values.titleIn.length}/${24}`}
          onChange={handleChange("titleIn")}
          inputProps={{ maxLength: 24 }}
        />

this one is working. Its assigning the value prop to our table "case" into the "title" field. Now I want another TextField, that assigns the value into our other table called "caseDescription" into the "age" field for example:

<TextField
          {...register("caseDescription.title", {
            required: "This field is required",
          })}
        />

<TextField
          {...register("caseDescription.title", {
            required: "This field is required",
          })}
        />

Is something like that possible? I guess not? Is it possible by swizzling the page? So Refine cant handle two tables in v4 for useForm? Thats so sad, bc I really liked Refine but if thats not possible I gotta drop it

adverse-sapphire•17mo ago

useDataGrid can't connect two API (or supabase table) at the same time. you need to mount 2 useDataGrid and you should manually merge data. after that with that data you can create your <DataGrid> or you can use useDataGrid and for other data you can use useList. after that you should merge data