Development

Structure

1. Structure is critically important, so we'll explain how we approach it in HyperFetch. First of all, we create a directory for our client and its requests. We export the prepared elements from this directory.

2. Next, we create a directory for each entity in our system (i.e. users, todos, categories, products, groups ...) and store our requests.

3. During this setup, we maintain maximum re-usability; thanks to the usage of classes and object-oriented approach, we can access these elements from anywhere. We can reuse our previously-prepared requests in any component. Also, tests have full access without any setup duplication – they use the current settings.

src
│
├── api
│   ├── client.ts
│   ├── users
│   │   ├── users.api.ts
│   │   └── index.ts
│   ├── products
│   │   ├── products.api.ts
│   │   └── index.ts
│   └── ...
├── ...
├── ...
└── ...

---

Debugging

You can debug apps in one of two ways:

1. Use the built-in logger

Use the client setDebug(true) method for this. It will start logging actions in the console. To adjust what type of logs will be shown, use setLoggerSeverity(3) to get debug logs displayed in the console. Those will show you the exact data and information flow in the library while working on your application.

2. Create your own logger

You can create your own dev tools based on events sent from the requestManager. There is no limitation, and you can receive all necessary data to create everything you may need.