1

This is an open question. Imagine yourself in the position of a front-end developer, trying to address the issue, which doesn't belong here. Here we go :)

Prerequisites: React and Apollo Gql

The layout:

enter image description here

There are 3 queries:

  • The one, which fetches data for "Sidebar"

  • The one, which fetches data for "Top bar"

  • The one, which fetches data for "Popular movies table"

"Year selector" (obviously) selects a particular year for the table and has no effect on "Sidebar" nor "Top bar". What exactly might happen when the year changes?

  • A movie might be added or deleted (due to its release date or change of its popularity)

  • "Watchers number within a year" or "Rating" of a movie might be changed

The problematic scenario is the following:

  1. Initially movies are loaded to the table with an arbitrary year (let's say 2023). Each movie has it's own "Watchers number within a year" or "Rating"

  2. User changes the year from 2023 to 1999

  3. The result stays cached for 2023

This happens because of the server response. The server returns just a json instead of typed output. E.g.

{
  __typename: 'MoviesOutput',
  movies: Scalars['json']
}

instead of

{
  __typename: 'MoviesOutput',
  movies: Movie[]
}

So Apollo caching engine simply doesn't understand how to cache it properly.

Proper solution would be to fix server-side implementation, but I have no access to it.

Thinking of a workaround here. First thing came to my mind is to manually cache.evict(...) all the results, returned by table query before making new request with an updated year. It might be an option for this simple example, but in really there are 10+ (this number grows over time, since new queries are being added) completely unrelated queries, which return hundreds of objects.

Another idea: clear whole cache on year changes. It'll help, but the behaviour is kinda weird for the user. He just changes the year and sees loaders everywhere.

Here I stuck. What I'm looking for is a way how reset a part of the local cache without strictly defining affected queries. Getting back to the mock above, "Sidebar" and "Top bar" are the examples of queries, which should not be reset. In reality there are tons of such queries (50+).

I'd appreciate any thoughts. Thanks!

alexg
  • 21
  • 2
  • Could you patch the cache to add an `id` field to each movie? – Michel Floyd Jul 05 '23 at 16:07
  • That's what I call "proper solution" :) Right now `movies` are just json, cannot apply any cache-related logic to it – alexg Jul 05 '23 at 16:22
  • 1
    I'd almost be tempted to write a second gql server that proxied the first just to impose a real schema. It sounds like the server you're targeting only implemented a bare minimum schema. – Michel Floyd Jul 05 '23 at 19:59
  • That's unfortunately true – alexg Jul 06 '23 at 06:05
  • You can just disable cache for this particular query with apollo client: `fetchPolicy: 'no-cache'`. https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy – Eugene Jul 06 '23 at 08:11
  • I'd say, this sounds more like workaround – alexg Jul 06 '23 at 08:26

0 Answers0