Pattern for querying related entities

[seanami]

Hi there, I'm starting work in a new project that uses TanStack Query, and I haven't used it before. I'm wondering about best practices for setting up queries for entities related to a list of main entities. I didn't see a relevant example in the docs.

Let's say I have an API that deals with posts from multiple users. I have a ListPosts API that returns a list of posts.

message ListPostsRequest {
  string team_id = 1;
}
message ListPostsResponse {
  repeated Post = 1;
}
message Post {
  string user_id = 1;
  string content = 2;
}

Now let's say that I also need the user entities to display information about the authors of each post in the UI. In past apps that I've worked on, I've structured the API like so in order to achieve this in as few HTTP requests as possible:

message ListPostsRequest {
  string team_id = 1;
  bool include_refs = 2;
}
message ListPostsResponse {
  repeated Post posts = 1;
  repeated User users = 2;
}
message Post {
  string user_id = 1;
  string content = 2;
}
message User {
  string user_id = 1;
  string name = 2;
}

When the include_refs field is set to true, the users response field is populated with all user entities related to the post entities being returned.

Reading through the TanStack Query docs, I've realized that this worked OK because we had a home-grown "normalized caching" solution, where we pull user entities out of the responses and store them in a single place mapped by user ID, so if any other API calls update a user's name, that update gets reflected everywhere.

As I understand it, with TanStack Query, caching is not normalized, so each query would have a separate copy of the user objects that get returned, and I'd need to invalidate all queries that could contain related user entities when a user's name is updated. This makes me think that this API design is not a good fit for TanStack Query.

What's the preferred way of fetching related entities like this with TanStack? Another alternative I can think of is something like this:

message ListPostsRequest {
  string team_id = 1;
}
message ListPostsResponse {
  repeated Post posts = 1;
}
message Post {
  string user_id = 1;
  string content = 2;
}
message ReadUserRequest {
  string user_id = 1;
}
message ReadUserResponse {
  User user = 1;
}
message User {
  string user_id = 1;
  string name = 2;
}

In this case, the component that lists posts would make an HTTP request for all the posts (not including users), and then the components that want to display the author would each make a request for that single user's info.

This seems to fit TanStack's model better, but does result in a lot more HTTP requests (and potentially much slower loading performance). But with the features of HTTP2 to make many requests using the same connection, is that not as much of a concern? Or is there another option for this type of thing I'm not seeing?