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.
No description
kapa.ai
kapa.ai424d 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
kapa.ai424d 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
kapa.ai424d ago
<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
exotic-emerald
exotic-emerald424d 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
inland-turquoise
inland-turquoise424d 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' })
rising-crimson
rising-crimson424d ago
I want to use in this Resource/Page Data from another Table of Supabase
No description
rising-crimson
rising-crimson424d ago
In this page I need Data from another Table
No description
rising-crimson
rising-crimson424d ago
Thx you, I am gonna try
exotic-emerald
exotic-emerald424d 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",
}
rising-crimson
rising-crimson424d ago
Yeah thx you Alican 🙂
other-emerald
other-emerald424d ago
No description
other-emerald
other-emerald422d 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
exotic-emerald
exotic-emerald422d 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
More Posts
how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the sError after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneHello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am usMultitenant URLsHi all! Anyone have more info on how to provide props to the nextjs-router in v4? We are multitenanUsing response data in errorNotification useFormHello, My REST API sends a JSON with explanation of what's wrong with the response when request failImplement Google Maps in a FormHello everyone, I am having trouble implementing google maps in a form where the user should fill soCannot invoke an object which is possibly 'undefined'Hi everyone, can anyone help me with this? I trying to integrate Access Control with Supabase and whhow to prefetch data using refineprefetch data before showing itemCan't change title of AuthPageI tried to change my login page title like this: <AuthPage type="login" title={<h2>WelcoUse modal form to populate an array in the current recordHello all, I need some help here. I'm trying to implement modal form in a project I'm working on witDefine customized Logo on default LoginpageHi, how can i set a logo on default Loginpage. (I am using refine V4)Error Can't resolve 'fs'Hello everyone, I'm facing an error integrating Casbin accessControlProvider here is the code for v4: Supabase: updatePassword not working```javascript forgotPassword: async ({ email }) => { const { error } = await supabaseClient.authCan I still use v3?Hello, I'm trying to follow a tutorial from Javascript Mastery and I think he used the v3 of refineAuthPage does not handle any errorsDoes the default AuthPage do any error handling by default ? I return an error in my authProvider `How to dynamically change page titles and adapt login background design? (in v4)Hello everyone, I cant find anything about that for the newest version online. Did anybody figure tinferencer: Custom key for `object` type propertyHow to set custom key that will represent an `object` type property? if it is not possible, is it a Change Logo in default SidebarHey where can I change the Sidebar Logo in refine? I cant find it ...