React Query: Initial Data ⚡️

Avoid refetching expensive queries by feeding sub-queries with initial data.

This article will be helpful for you if: you have an expensive index query, i.e., a list of items coming from a costly endpoint; and you want to break it down into multiple sub-queries to be able to invalidate items independently and avoid re-fetching the expensive query.

Problem

To illustrate, let's take this very expensive todo list.

OMG. It takes about 3s to load the entire list.

Now that it's loaded, I don't ever want to refetch it again.
But sometimes I need to update one of the todos.
Other times, I want to create a new todo.
And I end up HAVING to invalidate the index.

Or do you? 🤔

Step 1: Break the Index down into smaller queries

If you want to avoid the index invalidation, the first thing you want to do is break the index query down into smaller queries, one query per item. This way you can invalidate items individually after making changes to them.