graphql backend

How do I rebuild the backend of the CRM template app.

7 Replies

Hi @Hue. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To rebuild the backend of the CRM template app, you can follow these steps based on the information provided in the knowledge sources: 1. Use Nest.js and Nest.js Query: The backend for the CRM app is built using Nest.js and the Nest.js Query package. You can start by setting up a Nest.js project and then integrate Nest.js Query. - Nest.js Query Documentation: Nest.js Query Getting Started (https://doug-martin.github.io/nestjs-query/docs/introduction/getting-started) 2. GraphQL Schema: You can access the GraphQL schema and documentation from the public GraphQL server provided by Refine. This will help you understand the data structure and queries used in the CRM app. - GraphQL Server: <https://api.crm.refine.dev/graphql> (https://api.crm.refine.dev/graphql) 3. Backend Configuration: The backend configuration involves defining resolvers and setting up the necessary entities and DTOs. Here is an example configuration snippet:

   {
     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,
   }

4. Database Design: The backend uses TypeORM for database interactions. You can define your entities and use TypeORM's subscribers to handle events like audit logs. - Example Subscriber:

     import {
       DataSource,
       EntitySubscriberInterface,
       EventSubscriber,
       InsertEvent,
       Repository,
       UpdateEvent,
     } from 'typeorm';
     import { ContactEntity } from '../entities/contact.entity';
     import { InjectRepository } from '@nestjs/typeorm';
     import { AuditEntity } from '../entities/audit.entity';
     import { AuditAction } from '../enums';
     import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
     import { PubSub } from 'graphql-subscriptions';
     import { faker } from '@faker-js/faker';

     import {
       DataSource,
       EntitySubscriberInterface,
       EventSubscriber,
       InsertEvent,
       Repository,
       UpdateEvent,
     } from 'typeorm';
     import { ContactEntity } from '../entities/contact.entity';
     import { InjectRepository } from '@nestjs/typeorm';
     import { AuditEntity } from '../entities/audit.entity';
     import { AuditAction } from '../enums';
     import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
     import { PubSub } from 'graphql-subscriptions';
     import { faker } from '@faker-js/faker';

5. Additional Resources: - Backend Configuration Details: Refine Backend Configuration (https://refine.dev/docs/data/packages/nestjs-query/#backend-configuration) By following these steps and utilizing the provided resources, you should be able to rebuild the backend of the CRM template app. If you need further assistance, you can refer to the documentation or ask for help in the community support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

national-gold•4w ago

@kapa.ai so do you guys use express and apollo for this? @kapa.ai so do you guys use express and apollo for this?

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the provided knowledge sources, the backend of the CRM template app is built using Nest.js and Nest.js Query, not Express and Apollo. Here are the key points: 1. Nest.js and Nest.js Query: - The backend is built using Nest.js, a progressive Node.js framework for building efficient and scalable server-side applications. - Nest.js Query is used for handling GraphQL queries and mutations. 2. GraphQL Schema: - The GraphQL schema and documentation can be accessed from the public GraphQL server provided by Refine: <https://api.crm.refine.dev/graphql> (https://api.crm.refine.dev/graphql). 3. Database and ORM: - TypeORM is used for database interactions, and entities are defined using TypeORM decorators. 4. Example Configuration: Here is an example configuration snippet for setting up 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,
   }}

5. Example Subscriber: An example of a TypeORM subscriber for handling events like audit logs:

   import {
     DataSource,
     EntitySubscriberInterface,
     EventSubscriber,
     InsertEvent,
     Repository,
     UpdateEvent,
   } from 'typeorm';
   import { ContactEntity } from '../entities/contact.entity';
   import { InjectRepository } from '@nestjs/typeorm';
   import { AuditEntity } from '../entities/audit.entity';
   import { AuditAction } from '../enums';
   import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
   import { PubSub } from 'graphql-subscriptions';
   import { faker } from '@faker-js/faker';

   import {
     DataSource,
     EntitySubscriberInterface,
     EventSubscriber,
     InsertEvent,
     Repository,
     UpdateEvent,
   } from 'typeorm';
   import { ContactEntity } from '../entities/contact.entity';
   import { InjectRepository } from '@nestjs/typeorm';
   import { AuditEntity } from '../entities/audit.entity';
   import { AuditAction } from '../enums';
   import { InjectPubSub } from '@ptc-org/nestjs-query-graphql';
   import { PubSub } from 'graphql-subscriptions';
   import { faker } from '@faker-js/faker';

For more detailed information, you can refer to the Nest.js Query Getting Started Guide (https://doug-martin.github.io/nestjs-query/docs/introduction/getting-started) and the Refine Backend Configuration Documentation (https://refine.dev/docs/data/packages/nestjs-query/#backend-configuration). If you have any further questions or need additional assistance, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To create the proper PostgreSQL tables and column information to take a GraphQL schema file in your Refine JS demo apps, you can follow these steps. This will allow you to see it work properly with your database instead of using Refine JS URL endpoints. Step 1: Export GraphQL Schema from Hasura First, you need to export the GraphQL schema from Hasura. You can use Apollo's rover CLI for this purpose. 1. Install Apollo Rover CLI:

   npm install --save-dev @apollo/rover

   npm install --save-dev @apollo/rover

2. Generate GraphQL Schema:

   npx rover graph introspect <http://localhost:8080/v1/graphql> -H "X-Hasura-Admin-Secret:adminsecretkey" | out-file schema.graphql -encoding utf8

   npx rover graph introspect <http://localhost:8080/v1/graphql> -H "X-Hasura-Admin-Secret:adminsecretkey" | out-file schema.graphql -encoding utf8

Step 2: Generate TypeScript Types from GraphQL Schema Next, generate TypeScript types from the schema.graphql file. 1. Create codegen.yml: Create a file named codegen.yml at the same level as your package.json file with the following content:

   schema: schema.graphql
   generates:
     ./src/generated.ts:
       plugins:
         - typescript
         - typescript-operations
         - typed-document-node

   schema: schema.graphql
   generates:
     ./src/generated.ts:
       plugins:
         - typescript
         - typescript-operations
         - typed-document-node

2. Install Required Packages:

   npm install --save-dev @graphql-codegen/cli @graphql-codegen/typed-document-node @graphql-codegen/typescript @graphql-codegen/typescript-operations

   npm install --save-dev @graphql-codegen/cli @graphql-codegen/typed-document-node @graphql-codegen/typescript @graphql-codegen/typescript-operations

3. Run Codegen:

   npx graphql-codegen

   npx graphql-codegen

Step 3: Create PostgreSQL Tables Based on the GraphQL schema, you need to create the corresponding PostgreSQL tables. Here is an example of how you can create tables for a simple CRM application: 1. Example SQL for Creating Tables:

   CREATE TABLE companies (
       id SERIAL PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       address TEXT,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
       updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE contacts (
       id SERIAL PRIMARY KEY,
       company_id INT REFERENCES companies(id),
       name VARCHAR(255) NOT NULL,
       email VARCHAR(255) UNIQUE NOT NULL,
       phone VARCHAR(20),
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
       updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE audits (
       id SERIAL PRIMARY KEY,
       action VARCHAR(50) NOT NULL,
       entity VARCHAR(50) NOT NULL,
       entity_id INT NOT NULL,
       timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE companies (
       id SERIAL PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       address TEXT,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
       updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE contacts (
       id SERIAL PRIMARY KEY,
       company_id INT REFERENCES companies(id),
       name VARCHAR(255) NOT NULL,
       email VARCHAR(255) UNIQUE NOT NULL,
       phone VARCHAR(20),
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
       updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE audits (
       id SERIAL PRIMARY KEY,
       action VARCHAR(50) NOT NULL,
       entity VARCHAR(50) NOT NULL,
       entity_id INT NOT NULL,
       timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );

Step 4: Configure Refine to Use Your Database Finally, configure your Refine application to use your PostgreSQL database through Hasura or Apollo. 1. Example Refine Configuration:

   import { Refine } from "@pankod/refine";
   import routerProvider from "@refinedev/react-router-v6";
   import dataProvider, { GraphQLClient } from "@refinedev/graphql";

   const client = new GraphQLClient("<http://localhost:8080/v1/graphql">);

   const App: React.FC = () => {
     return (
       <Refine
         routerProvider={routerProvider}
         dataProvider={dataProvider(client)}
       />
     );
   };

   export default App;

   import { Refine } from "@pankod/refine";
   import routerProvider from "@refinedev/react-router-v6";
   import dataProvider, { GraphQLClient } from "@refinedev/graphql";

   const client = new GraphQLClient("<http://localhost:8080/v1/graphql">);

   const App: React.FC = () => {
     return (
       <Refine
         routerProvider={routerProvider}
         dataProvider={dataProvider(client)}
       />
     );
   };

   export default App;

2. Example Usage in a Component: ```javascript import { useTable, useSelect, List, Table, Space, EditButton, ShowButton, Delete ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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