conscious-sapphire•6mo ago

CRM app

Hello, i'm using Refine CRM app example (https://github.com/refinedev/refine/tree/master/examples/app-crm) but I notice that informations doesn't persists after server restart. How can I add persistence? And how can I add a database?

GitHub

refine/examples/app-crm at master · refinedev/refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine

6 Replies

kapa.ai•6mo ago

Hi @pedrofontes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add persistence to your Refine CRM app example and integrate a database, you can follow these steps: 1. Setting Up a Database with Supabase Supabase is a good choice for adding a PostgreSQL database to your Refine CRM app. Here’s how you can set it up: #### Step 1: Create a Supabase Account - Sign up at Supabase (https://app.supabase.com/). - Log in to your developer account. #### Step 2: Create a PostgreSQL Server - Go to your organization's dashboard in Supabase. - Create a new project (server) with an appropriate name, for example, refine-crm. #### Step 3: Create Necessary Tables - Use the Supabase dashboard to create tables and define relationships according to your CRM app's requirements. #### Step 4: Get API Keys - Obtain the API keys provided by Supabase for your server. #### Step 5: Set Up supabaseClient in Your Refine Project - Install the Supabase client in your Refine project:

  npm install @supabase/supabase-js

  npm install @supabase/supabase-js

- Initialize the Supabase client in your project:

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

  const supabaseUrl = '<https://xyzcompany.supabase.co';>
  const supabaseKey = 'public-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);

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

  const supabaseUrl = '<https://xyzcompany.supabase.co';>
  const supabaseKey = 'public-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);

For detailed steps, you can follow the Supabase Quickstart Guide (https://supabase.com/docs/guides/with-react#create-a-project). 2. Integrating Supabase with Refine Once you have your Supabase setup, you need to integrate it with your Refine CRM app: #### Step 1: Configure Data Provider - Refine supports various data providers. You can configure a custom data provider to use Supabase. #### Step 2: Update Your Refine App - Modify your Refine app to use the Supabase data provider for CRUD operations. Here is an example of how you might set up a data provider for Supabase:

import { DataProvider } from '@refinedev/core';
import { supabaseClient } from './supabaseClient';

const supabaseDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort }) => {
    const { data, error } = await supabaseClient
      .from(resource)
      .select('*')
      .range(pagination.current * pagination.pageSize, (pagination.current + 1) * pagination.pageSize - 1)
      .order(sort.field, { ascending: sort.order === 'asc' });

    if (error) {
      throw new Error(error.message);
    }

    return {
      data,
      total: data.length,
    };
  },
  // Implement other CRUD methods (getOne, create, update, delete) similarly
};

export default supabaseDataProvider;

import { DataProvider } from '@refinedev/core';
import { supabaseClient } from './supabaseClient';

const supabaseDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort }) => {
    const { data, error } = await supabaseClient
      .from(resource)
      .select('*')
      .range(pagination.current * pagination.pageSize, (pagination.current + 1) * pagination.pageSize - 1)
      .order(sort.field, { ascending: sort.order === 'asc' });

    if (error) {
      throw new Error(error.message);
    }

    return {
      data,
      total: data.length,
    };
  },
  // Implement other CRUD methods (getOne, create, update, delete) similarly
};

export default supabaseDataProvider;

3. Using the Data Provider in Refine Finally, use the custom data provider in your Refine app:

import { Refine } from '@refinedev/core';
import supabaseDataProvider from './supabaseDataProvider';

function App() {
  return (
    <Refine dataProvider={supabaseDataProvider} />
  );
}

export default App;

import { Refine } from '@refinedev/core';
import supabaseDataProvider from './supabaseDataProvider';

function App() {
  return (
    <Refine dataProvider={supabaseDataProvider} />
  );
}

export default App;

By following these steps, you can add persistence to your Refine CRM app and integrate it with a Supabase database. For more information, you can refer to the Refine documentation (https://refine.dev/docs/) and the Supabase documentation (https://supabase.com/docs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

conscious-sapphireOP•6mo ago

@kapa.ai just that? I don't need to refactor all routes and controllers?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To integrate a database and add persistence to your Refine CRM app, you will need to make some changes, but you don't necessarily need to refactor all routes and controllers. Here’s a more detailed breakdown: 1. Setting Up a Database with Supabase #### Step 1: Create a Supabase Account - Sign up at Supabase (https://app.supabase.com/). - Log in to your developer account. #### Step 2: Create a PostgreSQL Server - Go to your organization's dashboard in Supabase. - Create a new project (server) with an appropriate name, for example, refine-crm. #### Step 3: Create Necessary Tables - Use the Supabase dashboard to create tables and define relationships according to your CRM app's requirements. #### Step 4: Get API Keys - Obtain the API keys provided by Supabase for your server. #### Step 5: Set Up supabaseClient in Your Refine Project - Install the Supabase client in your Refine project:

  npm install @supabase/supabase-js

  npm install @supabase/supabase-js

- Initialize the Supabase client in your project:

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

  const supabaseUrl = '<https://xyzcompany.supabase.co';>
  const supabaseKey = 'public-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);

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

  const supabaseUrl = '<https://xyzcompany.supabase.co';>
  const supabaseKey = 'public-anon-key';
  const supabase = createClient(supabaseUrl, supabaseKey);

2. Integrating Supabase with Refine #### Step 1: Configure Data Provider - Refine supports various data providers. You can configure a custom data provider to use Supabase. #### Step 2: Update Your Refine App - Modify your Refine app to use the Supabase data provider for CRUD operations. Here is an example of how you might set up a data provider for Supabase:

import { DataProvider } from '@refinedev/core';
import { supabaseClient } from './supabaseClient';
const supabaseDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort }) => {
    const { data, error } = await supabaseClient
      .from(resource)
      .select('*')
      .range(pagination.current * pagination.pageSize, (pagination.current + 1) * pagination.pageSize - 1)
      .order(sort.field, { ascending: sort.order === 'asc' });

    if (error) {
      throw new Error(error.message);
    }

    return {
      data,
      total: data.length,
    };
  },
  // Implement other CRUD methods (getOne, create, update, delete) similarly
};

export default supabaseDataProvider;

import { DataProvider } from '@refinedev/core';
import { supabaseClient } from './supabaseClient';
const supabaseDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort }) => {
    const { data, error } = await supabaseClient
      .from(resource)
      .select('*')
      .range(pagination.current * pagination.pageSize, (pagination.current + 1) * pagination.pageSize - 1)
      .order(sort.field, { ascending: sort.order === 'asc' });

    if (error) {
      throw new Error(error.message);
    }

    return {
      data,
      total: data.length,
    };
  },
  // Implement other CRUD methods (getOne, create, update, delete) similarly
};

export default supabaseDataProvider;

3. Using the Data Provider in Refine Finally, use the custom data provider in your Refine app:

import { Refine } from '@refinedev/core';
import supabaseDataProvider from './supabaseDataProvider';

function App() {
  return (
    <Refine dataProvider={supabaseDataProvider} />
  );
}

export default App;

import { Refine } from '@refinedev/core';
import supabaseDataProvider from './supabaseDataProvider';

function App() {
  return (
    <Refine dataProvider={supabaseDataProvider} />
  );
}

export default App;

Additional Considerations - Routes and Controllers: If your current routes and controllers are tightly coupled with the in-memory data, you might need to refactor them to use the new data provider. However, if they are abstracted well, you might only need to change the data fetching logic. - Authentication: If your app uses authentication, you might also need to integrate Supabase authentication. You can refer to the Supabase Authentication with Refine (https://refine.dev/blog/refine-pixels-3/#email-authentication-with-supabase-in-refine) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

other-emerald•6mo ago

I would recommend considering using the CRM project for "parts" and starting with something more bare bones. But it depends on your work style. I find it easier to work on something where I know how that thing was put together. Where the CRM is not user-customisable, connecting Supabase should be relatively straight forward. I started a project recently with the supabase auth already mostly in place (one of the templates) and that was a great place to start as you just setup your schema on supabase, build your resources out, and connect it all up, add whatever front end you want and it comes together quite logically.