Friday, 8 March, 2019 UTC

Summary

Oftentimes applications exposing an API need an admin page to easily view and edit the data behind the application. Usually, creating one involves the painstaking process of building an interface, followed by manually creating every request to GET or POST data to/from the API.

ra-data-json-server is what’s called a data provider. Data providers are what allow react-admin to communicate with your API. Here, we’re using ra-data-json-server because JSONPlaceholder is powered by JSON Server. If you’re using an API that doesn’t exactly match that of JSONPlaceholder, you will need to implement your own data provider. Check out the data provider documentation for more information.

If we open the application in our browser, we should see a message confirming that react-admin has been properly configured. Now we can start mapping the API endpoints into the admin interface.

Using Guessers

Whenever you add a new endpoint, you first use a guesser. This will take the data from the API and guess what kind of component to output. The first endpoint we’ll add is users, and we’re going to use ListGuesser to automatically render a list of all users.

In our browser window, we should see the admin interface automatically populate a list of users, including their names, emails, phone number, and more!

It works almost perfectly, but guessers aren’t meant to be used permanently. They’re only there to help us get started. We’re going to take the output from the guesser (which can be found in the DevTools console) and use it to create a custom list component.

Great! In the browser window, we can see that the list works exactly the same. Let’s make some changes to UserList to make it a little better. We’ll change the website column to a UrlField to make it clickable. We’ll also add a label to the address and company columns to make it a bit more readable:

Our admin interface works great if you’re just trying to view users, but what if you want to create, edit, or even delete users? Thankfully, react-admin has an easy way to do this as well. We’re going to use a guesser again, but this time, it’s an EditGuesser:

Now, let’s open up the admin in our browser and click on any user. This will bring up the edit interface, and once again, the guesser does a pretty good job! We’re going to do the same thing as before and copy the output from the guesser and paste it into our users.js file. We’re also going to change the id column to a DisabledInput; you wouldn’t want the id field to be editable!

Now we have a functional edit interface! Unfortunately, JSONPlaceholder doesn’t allow edits. However, try to edit a user and see what happens. You should see the user change for a second before react-admin changes it back to its original form. This is because react-admin uses optimistic rendering. This means that when a user makes a change, react-admin displays that change immediately while sending an update query in the background. This allows for a seamless user experience, with no need to wait for a server response before updating the admin interface.

The only thing we’re missing now is a way to create new users. Since the creation form is so similar to the edit form, we can just copy our UserEdit component and call the new component UserCreate. Make sure to remove the id field, since the user can’t have an ID before creation.

And just like that, react-admin will add a “Create” button to our list of users!

More Information

We’ve created a nice little admin interface using react-admin, but we’ve barely scratched the surface of what is has to offer. react-admin is highly customizable: the functionality and appearance of every component we’ve used so far (and more) can be customized. To learn more, see the react-admin documentation.