I have a project in ReactJS that uses pg to connect with my Postgres DB, in addition I’m using GraphQL and Apollo Server Express to fetch the data. The way my project is now, it has UI, fetch data methods and business logic in the same file and I want to separe the concerns into different files. To achieve this I’m looking for the best software architectural pattern(like MVC, MVP, MVVM, MTV, etc) to use that fits well with these stack. What do you guys suggest? What changes I should do in my file tree to adapt to the architecture pattern?
My project file tree is like this:
/myProject
├── client
│ ├── assets
│ ├── contexts
│ ├── graphQL
│ │ ├── mutations
│ │ │ └── product
│ │ │ └── # CRUD operations
│ │ │ └── # other folders...
│ │ ├── queries
│ │ │ └── product
│ │ │ └── # queries
│ │ │ └── # other folders...
│ │ └── index.js # Imports all queries and mutations
│ ├── pages
│ │ ├── product
│ │ │ └── product.jsx
│ │ └── # other pages...
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ └── index.js
├── server
│ ├── config
│ │ └── db.js
│ ├── graphQL
│ │ ├── modules
│ │ │ └── product
│ │ │ ├── index.js
│ │ │ ├── resolver.js
│ │ │ └── typedef.js
│ │ └── # other folders...
│ └── schema.js # Imports all modules to create the schema