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

Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :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) for more information on working with data providers and hooks. ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

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

genetic-orange•2y 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•2y 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' })

environmental-roseOP•2y ago

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

environmental-roseOP•2y ago

In this page I need Data from another Table

genetic-orange•2y 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

environmental-roseOP•2y ago

Thx you, I am gonna try

genetic-orange•2y 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",
 }

environmental-roseOP•2y ago

Yeah thx you Alican 🙂

national-gold•2y 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

genetic-orange•2y 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

Use more than one Supabase Table on one Page

Did you find this page helpful?