Fetching and Mutating Data

Handling dynamic data is crucial in today's web development landscape. Most modern apps interact with data from various sources. The way an app manages loading states, errors, and data updates plays a big role in user experience. Fortunately, Remix offers a comprehensive solution for both retrieving and updating data.

This chapter covers the following topics:

• Fetching data
• Mutating data

In this chapter, we will implement data reads and writes in BeeRich. First, we will practice data loading. Then, we will learn about data mutations in Remix and implement an expense creation form.

By the end of this chapter, you will know how to fetch and mutate data in Remix. You will also understand how Remix executes loader and action functions and how Remix revalidates loader data after mutations. Finally, you will have practiced building applications with progressive enhancement in mind, which we will build upon in Chapter 6, Progressively...

Technical requirements

You can find the setup instructions for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/05-fetching-and-mutating-data/bee-rich/README.md.

Note that the code in the start folder of this chapter is different from our final solution from Chapter 4, Routing in Remix. Read the instructions in the README.md file of this chapter’s folder on GitHub before you continue.

Fetching data

Before diving into this chapter, make sure you've followed the steps in the technical requirements section. Once you've completed the setup guide, let's briefly revisit the key steps to prevent any issues:

1. Run npm i to install all dependencies.
2. If you are missing a .env file in your project’s root, create a new .env file and add the following line to it:

   DATABASE_URL="file:./dev.db"

   Prisma – our database toolkit of choice – uses the DATABASE_URL environment variable to connect to our database.

3. Next, run npm run build to generate the Prisma client for our data schema. Prisma reads our Prisma schema from the prisma/schema.prisma file and generates types and functions for us to work with.
4. Run npm run update:db to create or update the SQLite database. We use SQLite with Prisma to persist our development data.
5. Finally, run npm run seed to seed our local database with mock data. You can find the mock script...

Mutating data

Creating and updating data is just as important as fetching data. In this section, we will add an expense creation form and learn how to mutate data in Remix.

Mutating data without JavaScript

Remember the three-step process for building web UIs from Ryan Florence that we discussed in Chapter 1? The first step is to make the user experience work without JavaScript. After that, we add JavaScript to enhance the experience but ensure that the baseline implementation still works. This process is called progressive enhancement.

In this section, we use Remix's action function to handle incoming form submissions on the server. In the `action` function, we will validate the user data and write the new expense object to the database. Let's see how we can use the native form element to submit user data, without the need for client-side JavaScript:

1. First, create a new route module for the expense creation form: app/routes/dashboard.expenses._index.tsx.

   We...

Summary

Reading and writing data are important aspects of modern web application development. Remix provides primitives, conventions, and levers for both.

This chapter introduced you to Remix’s server-side loader and action functions. You learned that loader and action functions are route-level HTTP request handlers that get and mutate data. Loaders handle HTTP GET requests, while action functions receive all other incoming HTTP requests.

Initially, Remix renders our app on the server. All further page transitions happen on the client. On the initial request, loader data is used during server-side rendering. On all subsequent navigations, Remix fetches loader data via fetch requests and only re-renders the changing parts of the route hierarchy on the client.

Next, you learned that route-level data fetching allows us – among other things – to flatten request waterfalls that may occur with component-level fetching. Remix also executes loader functions in...

Further reading

The Remix documentation outlines the full stack data flow in Remix here: https://remix.run/docs/en/2/discussion/data-flow.

You can find Remix’s documentation about data loading here: https://remix.run/docs/en/2/guides/data-loading.

You can find Remix’s documentation about mutations here: https://remix.run/docs/en/2/guides/data-writes.

The Remix team has created an amazing video series called Remix Singles that goes in depth into how to work with data in Remix. The series starts with a video about data loading, which you can find here: https://www.youtube.com/watch?v=NXqEP_PsPNc.

MDN Web Docs is a great place to learn more about the HTTP protocol: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP.