How to control the integrity and sufficiency of data on the client?

Question

API

I will take an example for the question from the JSON API documentation, but this is not important. the same questions will arise when working with other conventions, such as GraphQL.
Suppose I need to get a list of articles with data about their authors.
I make a request according to the JSON API documentation with a field request:

GET /articles?include=author&fields[articles]=title,body,author&fields[people]=name HTTP/1.1

I get a response:

HTTP/1.1 200 OK
Content-Type: application/vnd.api+json

{
  "data": [{
    "type": "articles",
    "id": "1",
    "attributes": {
      "title": "JSON API paints my bikeshed!",
      "body": "The shortest article. Ever."
    },
    "relationships": {
      "author": {
        "data": {"id": "42", "type": "people"}
      }
    }
  }],
  "included": [
    {
      "type": "people",
      "id": "42",
      "attributes": {
        "name": "John"
      }
    }
  ]
}

I save the data in the Store on the client in a normalized form:

{
    articles: {
        "1": {
            id: "1",
            title: "JSON API paints my bikeshed!",
            body: "The shortest article. Ever",
            author: "42"
        }
    },
   people: {
      "42": {
         name: "John"
      }
   }
}

Now I can easily get the author data by ID and display it.
Now, suppose I need to display the same article not in a list, but in detail.
What should be done? Check if this article is in the Store and if not, then request data from the server.
There is an article - we display it!
But here's the problem: on the page with detailed display, I also need the image field, which contains a link to the image illustrating the article and a list of comments on the article!
This is a fiasco, bro! (c)
In fact, the very presence of an object in the store does not guarantee the completeness of the data in it, and even more so does not guarantee the presence of related objects and the completeness of the data in them.
From now on, the question is: what is the right way?
The simplest option: do not check the data in the store and always request it again, with any access.
The pros and cons of this approach are obvious: plus - you can not accumulate data in the store as in a cache, do not occupy the user's RAM with them and do not risk overflowing it (which is typical for SPA); minus - we constantly make requests to the server, often the same for the same data.
Another option is to check the availability of all fields of the object in the store, and if something is missing, then ... here again there are options - to re-request all the data or request only the missing ones. And you also need to check the availability and completeness of the data in the related (relationships) resources ...
In general, there are many options, and I don’t like all that have already come to mind for one reason or another.
Please share the best practices for solving such issues, your experience or a link to someone else's.

Answer 1

Here is my version so far:
1. Create a single action (redux) for all data requests via the API
2. Each component that launches the action always launches it when the component is inserted into the DOM and be sure to pass a scheme to it that describes the structure of the data needed by the component
3. The action (has access to the store) checks all the fields of all the necessary resources for compliance with the schema, if all the fields exist - ok, then the component is rendered, if not, then the component lacks all or part of the data, a GET request is generated for the required fields and sent to the server
...