React-Query & React-Hook-Form

This project was built from MerlinMason/NextProject, checkout that repo for further details.

This was an experiment to try out two libraries React-Query and React-Hook-Form, with the aim of learning how they work and seeing if I can get them to play nicely together, all while improving my TypeScript skills.

Description

This project is a simple CRUD interface, displaying a list of users, allowing create, edit and delete actions. The data persistence is provided by MockAPI.io and the requests are proxied through the NextJs backend to avoid revealing the MockAPI instance URL (the service provides no form of authentication).

The clientside data management is done through React-Query, with custom hooks created for the various actions.

The create and edit form is managed through React-Hook-Form, with custom form elements and validation.

Running locally

The project uses MockAPI.io, you can create a free account there, then create a resource called users configured like so:

You'll also have to modify the response of GET /users to:

{
  "data": "$mockData",
  "total": "$count"
}

Create a .env.local file in the root of the project with the following value MOCK_API_BASE_URL=https://<UNIQUE_ID>.mockapi.io. Finally, run yarn to install dependencies and yarn dev start the localhost:3000 dev server.