Data Mutations

Since TanStack router does not store or cache data, it's role in data mutation is slim to none outside of reacting to potential URL side-effects from external mutation events. That said, we've compiled a list of mutation-related features you might find useful and libraries that implement them.

Look for and use mutation utilities that support:

  • Handling and caching submission state

  • Providing both local and global optimistic UI support

  • Built-in hooks to wire up invalidation (or automatically support it)

  • Handling multiple in-flight mutations at once

  • Organizing mutation state as a globally accessible resource

  • Submission state history and garbage collection

  • TanStack Query

  • SWR

  • RTK Query

  • urql

  • Relay

  • Apollo

Or, even...

Similar to data fetching, mutation state isn't a one-size-fits-all solution, so you'll need to pick a solution that fits your needs and your team's needs. We recommend trying out a few different solutions and seeing what works best for you.

⚠️ Still here? Submission state is an interesting topic when it comes to persistence. Do you keep every mutation around forever? How do you know when to get rid of it? What if the user navigates away from the screen and then back? Let's dig in!

Mutation management can be augmented by router events

Regardless of the mutation library used, mutations create state related to their submission. Most state managers will correctly keep this submission state around and expose it to make it possible to show UI elements like loading spinners, success messages, error messages, etc. Let's consider the following interactions:

  • User navigates to the /posts/123/edit screen to edit a post
  • User edits the 123 post and upon success, sees a success message below the editor that the post was updated
  • User navigates to the /posts screen
  • User navigates back to the /posts/123/edit screen again

Without notifying your mutation management library about the route change, it's possible that your submission state could still be around and your user would still see the "Post updated successfully" message when they return to the previous screen. This is not ideal. Obviously, our intent wasn't to keep this mutation state around forever, right?!

To solve this, we can use TanStack Router's subscribe method to clear mutation states when the user is no longer in need of them.

The router.subscribe method

This method is a function that subscribes a callback to various router events. The event in particular that we'll use here is the locationChange event. It's important to understand that this event is fired when the location path is changed (not just reloaded) and has finally resolved.

This is a great place to reset your old mutation states. Here's an example:

tsx
const router = new Router()
const unsubscribeFn = router.subscribe('onLoad', () => {
// Reset mutation states when the route changes
clearMutationCache()
})
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.