rival-black•5mo ago

Can I use supabase as backend in the CRM example??

I have been trying to create a management application and the refine CRM has most of the features and modules I want, but i don't wanna create the backend for it because I don't think i will be able to create it. So is it possible to integrate supabase for the back-end?

17 Replies

kapa.ai•5mo ago

Hi @venom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use Supabase as a backend for your CRM application built with Refine. Refine offers built-in data provider support for Supabase, which means it can handle all required data service methods out-of-the-box. You won't need to use complex boilerplate codes to make it work. Refine handles all the complex works for you by internal hooks and implementations source (https://refine.dev/docs/data/packages/supabase#introduction). To integrate Supabase with Refine, you need to follow these steps: 1. Sign up with Supabase (https://app.supabase.com/) and create a PostgreSQL server. 2. Create necessary tables in the database and add relationships. 3. Get API keys provided by Supabase for the server and set up supabaseClient inside your Refine project source (https://refine.dev/blog/refine-pixels-3#setting-up-supabase-for-refine). Here is an example of how to set up supabaseClient:

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";  
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";  
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

The <Refine /> component's dataProvider, authProvider, and liveProvider objects utilize this supabaseClient to connect to the PostgreSQL server hosted on Supabase source (https://refine.dev/blog/refine-pixels-3#3-set-up-supabaseclient-for-refine--providers). You can also check out the Supabase Data Provider example (https://refine.dev/docs/examples/data-provider/supabase) to see how Supabase Data Provider works and is used. Please note that the backend for the CRM example is not publicly available, but it uses Nest.js + Nest.js Query with very little customization on top source (https://discord.com/channels/837692625737613362/1195933792368611359). You might need to adjust your Supabase setup to match the data structure and requirements of the CRM example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

evident-indigo•5mo ago

Hey @venom the short answer is, yes. Since Refine abstracts data layer into data providers, if you create same resources with strapi or any other data provider, you can use it with same application. Because refine hooks, UI doesn't have different behaviour for different data providers. Only difference would be to remove meta.gqlQuery and meta.gqlMutation params, which are graphql queries. and for strapi, you can pass meta.populate, meta.fields instead. See the details here: https://refine.dev/docs/data/packages/strapi-v4/

Strapi v4 | Refine

Refine supports the features that come with Strapi-v4.

rival-black•5mo ago

Thanks for the answer @Batu. Do you think it's better if I use strapi?

evident-indigo•5mo ago

Hey @venom better to use what you are familiar with and whicever you think is easier for you. There is no right answer for everyone, every use-case. But if youi want to re-use app-crm code and don't want to build backend yourself, strapi looks like better option for you.

rival-black•4mo ago

Got it. Thanks @kapa.ai i have made my supabase server. Do i need to change every single file now?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, you don't need to change every single file. You just need to configure the supabaseClient in your Refine project to connect to your Supabase server. Here's how you can do it: 1. Store your Supabase server's URL and API key in a .env file in your project root:

VITE_SUPABASE_URL=YOUR_SUPABASE_URL  
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY

VITE_SUPABASE_URL=YOUR_SUPABASE_URL  
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY

2. Update the supabaseClient.ts file in your src/utility/ directory:

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";  
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";  
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

This supabaseClient will be used by the dataProvider, authProvider, and liveProvider objects in the <Refine /> component to connect to your Supabase server source (https://refine.dev/blog/refine-pixels-3#3-set-up-supabaseclient-for-refine--providers). Remember to replace YOUR_SUPABASE_URL and YOUR_SUPABASE_KEY with your actual Supabase URL and key. After this setup, your Refine project should be able to communicate with your Supabase server. You can then start implementing CRUD operations for your app to perform queries on your Supabase tables. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

rival-black•4mo ago

@kapa.ai i want to change the data provider in crm example and change it to supabase. Do i have to chnage every single file?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, you don't need to change every single file to switch the data provider to Supabase in the CRM example. You just need to make sure that the Supabase data provider is correctly set up and registered in your application. Here's how you can do it: 1. Install the Supabase package for Refine:

npm i @refinedev/supabase

npm i @refinedev/supabase

2. Set up your Supabase client:

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "your-supabase-url";
const SUPABASE_KEY = "your-supabase-key";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "your-supabase-url";
const SUPABASE_KEY = "your-supabase-key";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

3. Register the Supabase data provider in your App.tsx:

import { Refine } from "@refinedev/core";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  // the file you set up in step 2
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

import { Refine } from "@refinedev/core";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  // the file you set up in step 2
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

kapa.ai•4mo ago

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

rival-black•4mo ago

@kapa.ai can you tell me exactly what i need to do in order to replace gql from crm

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To replace GraphQL with Supabase in the CRM example, you need to follow these steps: 1. Install the Supabase package for Refine:

npm i @refinedev/supabase

npm i @refinedev/supabase

2. Set up your Supabase client:

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "your-supabase-url";
const SUPABASE_KEY = "your-supabase-key";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "your-supabase-url";
const SUPABASE_KEY = "your-supabase-key";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

3. Register the Supabase data provider in your App.tsx:

import { Refine } from "@refinedev/core";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  // the file you set up in step 2
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

import { Refine } from "@refinedev/core";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  // the file you set up in step 2
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

This will establish a connection with your Supabase API and allow Refine to perform all required data service CRUD methods using data hooks source (https://refine.dev/docs/data/packages/supabase#register-supabase-data-provider). Remember to replace "your-supabase-url" and "your-supabase-key" with your actual Supabase URL and key. 4. Update your resource components: In your resource components, you need to replace the GraphQL queries with the corresponding Supabase methods. For example, you might replace a useQuery hook with a useGetList hook, or a useMutation hook with a useCreate or useUpdate hook. Please note that the exact changes depend on the specific queries and mutations used in your components. You might need to adjust the parameters and the handling of the response data to match the Supabase API. 5. Test your application: After making these changes, you should test your application thoroughly to ensure that all features work as expected with the Supabase backend. Please note that this is a high-level guide. The exact steps might vary depending on the specific requirements and structure of your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

unwilling-turquoise•4mo ago

Hi @venom were you able to use supabase as your CRM app's backend?

rival-black•4mo ago

@Txusif tbh not exactly. I created a new supabase+refine project and i just copy components and add to my code to use the ui

unwilling-turquoise•4mo ago

Can you share the repo if you've pushed it on hub