fascinating-indigo•10mo ago

Question about Refines backend

I’m just starting off working with the template CRM app mainly for its Kanban board. I deployed the app to Vercel and I’m in the process of customizing it now. The app still works and saves new items to the Kanban board. It’s still using the default GraphQL connections. Where does the new data go as I create it? What do I need to reconfigure to control my data more? Also, after I turn off the auto login feature, what’s the easiest way to setup authentication? Any more info helps, I’m new to Refine and GraphQL. I just wanted to deploy something quick to solve my issue of needing a Kanban board for internal uses. My team plans to learn more about how this stuff works and take it further.

20 Replies

kapa.ai•10mo ago

Hi @Huell. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine is a flexible framework that allows you to connect to any API using its built-in data providers. In the case of the CRM template, it uses a GraphQL connection. The data you create is sent to the backend specified by this connection. If you want to control your data more, you would need to reconfigure the data provider to connect to your own backend. To reconfigure the data provider, you would need to set up your own backend (like a PostgreSQL database hosted in the Supabase cloud, for example) and then update the data provider in your Refine project to connect to this new backend. You can find more information on how to do this in the Refine documentation (https://refine.dev/docs/api-references/providers/data-provider). For authentication, Refine provides built-in providers for authentication, authorization, and internationalization. These providers are optional and can be easily replaced with custom ones. If you want to set up authentication, you could use one of these built-in providers, or create your own. For example, you could create a user in Strapi and set the value of its role field to Authenticated. You would then set up permissions for each of your resources. More details on how to do this are available in the Strapi quickstart guide (https://docs.strapi.io/dev-docs/quick-start#step-3-set-roles--permissions). Refine also offers a wide range of security features that ensure the safety of data and information. It leverages the power of existing identity providers to ensure the security of data. It also offers support for Okta, Azure AD, Amazon Cognito & Google Cloud Identity. Refine lets you have fine-grained access control and offers out-of-the-box support for widely accepted authorization models including ACL, RBAC & ABAC. It integrates well with Cerbos and Casbin, and you can also define your own access control. I hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai Ok so if I keep the default connection, can I just send infinite data to the refine graphQL server? ….. doesn’t make sense [11:50 AM] OP Huell: Ok, so it's the same GraphQL server that everyone is connected to, even if I deploy the application on my own.

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, the default GraphQL server provided in the Refine examples is not intended for production use. It's a mock server used for demonstration purposes. When you deploy your application, you should replace it with your own backend server. The data you create in the application while it's connected to the default server is not saved permanently. If you want to persist your data, you need to set up your own backend and configure the data provider in your Refine application to connect to it. Here's an example of how you can set up a GraphQL client with your own API URL:

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

In this example, replace "<https://api.example.com/graphql"> with the URL of your own GraphQL server. For more information, you can refer to the Refine documentation on GraphQL usage (https://refine.dev/docs/data/packages/graphql#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai ok then after I configure that line of code to my graphQL server, what's next?

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- After you've configured the GraphQL client to connect to your own GraphQL server, the next steps would be to: 1. Define your data schema: Define the data schema on your GraphQL server. This schema should match the data structure of your application. 2. Test your connection: Ensure that your Refine application can successfully fetch data from your GraphQL server. You can do this by running your application and checking if the data from your server is correctly displayed. 3. Implement Authentication: If you haven't done so already, you should implement authentication to secure your data. Refine provides built-in support for authentication. You can refer to the Refine documentation (https://refine.dev/docs/api-references/providers/auth-provider) for more details. 4. Customize your application: Now that your application is connected to your own backend, you can start customizing it according to your needs. This could involve creating new pages, adding new features, or modifying the UI. Remember, the dataProvider function is used to connect your Refine application to your data source. It's responsible for sending requests to your API and returning the response. So, any changes in your data structure or API endpoints should be reflected in the dataProvider function. Here's an example of how you can use the dataProvider function with a GraphQL client:

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

In this example, replace "<https://api.example.com/graphql"> with the URL of your own GraphQL server. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai is there anywhere in the opensource code in the crm template that defines the database schema for the app?

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The CRM template in Refine does not directly define the database schema. It interacts with the backend through a GraphQL API, and the schema is defined on the backend side. The frontend (Refine CRM template) only defines how to interact with this API. However, you can inspect the GraphQL schema used by the CRM template by visiting the GraphQL server's API playground at <https://api.crm.refine.dev/graphql.> This will give you an idea of the data structure that the CRM template expects. If you want to create a similar backend, you can use a library like nestjs-query (https://doug-martin.github.io/nestjs-query/docs/introduction/getting-started) which was used to generate the backend for the CRM template. Here's an example of how resolvers are defined in the backend:

{
    pagingStrategy: PagingStrategies.OFFSET,
    enableTotalCount: true,
    EntityClass: CompanyEntity,
    DTOClass: CompanyModel,
    CreateDTOClass: CompanyCreateInput,
    UpdateDTOClass: CompanyUpdateInput,
    enableSubscriptions: true,
    enableAggregate: true,
}

{
    pagingStrategy: PagingStrategies.OFFSET,
    enableTotalCount: true,
    EntityClass: CompanyEntity,
    DTOClass: CompanyModel,
    CreateDTOClass: CompanyCreateInput,
    UpdateDTOClass: CompanyUpdateInput,
    enableSubscriptions: true,
    enableAggregate: true,
}

Please note that the actual backend code for the CRM template is not open-source, but you can use the above information as a reference to create your own backend. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai jeez man, there's almost no point in using the CRM template app if we just have to rebuild the entire application from scratch anyway.......

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I understand your concerns, but the purpose of the CRM template is to provide a starting point and to demonstrate what can be achieved with Refine. It's designed to showcase the capabilities of Refine and Ant Design in building a complex, data-intensive application. The CRM template includes a lot of built-in functionality like a dashboard, a calendar for scheduling, a scrum board for task management, and CRUD operations for managing companies, contacts, and quotes. All of these features are built using best practices and modern development techniques. While it's true that you'll need to set up your own backend and configure the data provider to connect to it, this is a common requirement for any data-driven application. The benefit of using Refine is that it provides a lot of out-of-the-box functionality that can save you a lot of time in building your application. If you're new to Refine and GraphQL, I would recommend going through the Refine documentation (https://refine.dev/docs/getting-started/introduction) and the GraphQL documentation (https://graphql.org/learn/). These resources provide a lot of useful information that can help you get started. Remember, the journey of learning and building something new can be challenging, but it's also rewarding. Don't hesitate to ask if you have more questions or need further clarification. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai Take me through all the steps needed to customize the CRM app template to host it on vercel or similar and use my own graphql server and database

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here are the steps you would need to follow to customize the CRM app template, host it on Vercel, and use your own GraphQL server and database: 1. Clone the CRM App Template: First, you need to clone the CRM app template from the Refine GitHub repository (https://github.com/refinedev/refine/tree/master/examples/app-crm). You can do this by running the following command in your terminal:

git clone <https://github.com/refinedev/refine.git>
cd refine/examples/app-crm

git clone <https://github.com/refinedev/refine.git>
cd refine/examples/app-crm

2. Set Up Your GraphQL Server and Database: Next, you need to set up your own GraphQL server and database. The specifics of this step will depend on the technology you're using for your backend. Once your server is set up, make sure to note down the URL of your GraphQL endpoint. 3. Configure the Data Provider: In your Refine application, you need to configure the data provider to connect to your own GraphQL server. You can do this by modifying the dataProvider in your App.js file:

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

import Refine from "@refinedev/core";  
import dataProvider, { GraphQLClient } from "@refinedev/graphql";  
  
const client = new GraphQLClient("<https://api.example.com/graphql">);  
  
const App = () => (  
 <Refine  
 dataProvider={dataProvider(client)}  
 >  
 {/* ... */}  
 </Refine>  
);

Replace "<https://api.example.com/graphql"> with the URL of your own GraphQL server. 4. Customize the Application: Now that your application is connected to your own backend, you can start customizing it according to your needs. This could involve creating new pages, adding new features, or modifying the UI. 5. Deploy to Vercel: Once you're happy with your application, you can deploy it to Vercel. First, you need to push your code to a GitHub repository. Then, you can connect this repository to Vercel and start the deployment process. You can find more information on how to do this in the Vercel documentation (https://vercel.com/docs). Remember, the dataProvider function is used to connect your Refine application to your data source. It's responsible for sending requests to your API and returning the response. So, any changes in your data structure or API endpoints should be reflected in the dataProvider function. I hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

fascinating-indigoOP•9mo ago

@kapa.ai Ok expanding on the previous question, whats the simplest way to implement auth in this case/

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine provides a flexible and customizable authentication system. You can create your own Authentication approach using Refine by customizing the AuthProvider methods according to your needs and control the privileges of your users. Here's an example of how you can define an AuthProvider:

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
 // required methods  
 login: async (params: any) => ({}),  
 check: async (params: any) => ({}),  
 logout: async (params: any) => ({}),  
 onError: async (params: any) => ({}),  
 // optional methods  
 register: async (params: any) => ({}),  
 forgotPassword: async (params: any) => ({}),  
 updatePassword: async (params: any) => ({}),  
 getPermissions: async (params: any) => ({}),  
 getIdentity: async (params?: any) => ({}),  
};

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
 // required methods  
 login: async (params: any) => ({}),  
 check: async (params: any) => ({}),  
 logout: async (params: any) => ({}),  
 onError: async (params: any) => ({}),  
 // optional methods  
 register: async (params: any) => ({}),  
 forgotPassword: async (params: any) => ({}),  
 updatePassword: async (params: any) => ({}),  
 getPermissions: async (params: any) => ({}),  
 getIdentity: async (params?: any) => ({}),  
};

In this example, you would replace the empty functions with your own logic. For example, the login method could send a request to your backend to authenticate the user, and then store the returned token in local storage. Once you've defined your authProvider, you can pass it to the Refine component:

import { Refine } from "@refinedev/core";  
  
const App = () => {  
 return <Refine authProvider={authProvider}>...</Refine>;  
};

import { Refine } from "@refinedev/core";  
  
const App = () => {  
 return <Refine authProvider={authProvider}>...</Refine>;  
};

This will activate authentication in your app. Once you provide auth provider, you can utilize Refine's auth hooks (useLogin, useRegister, useIsAuthenticated etc.) to easily manage your authentication. For more detailed information, you can refer to the Refine documentation on authentication (https://refine.dev/docs/guides-concepts/authentication). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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