ScenesReact: Cache SceneQueryRunners and other scene object by a key / hashing string

[torkelo]

With @grafana/scenes-react creating scene object on the fly as react components are rendered (or hooks called) we need a different way to cache query results, query variables and viz panel state.

This PR explores scene object cache and key hashing mechanism.

Example, simple string key:

  const dataProvider = useQueryRunner({
    queries: [{ uid: 'gdev-testdata', refId: 'A', scenarioId: 'random_walk', alias: queryAlias ?? 'env = $env' }],
    maxDataPoints: maxDataPoints,
    cacheKey: "My unique cache key string",
  });

Example: Object as key

  const queries = [{ uid: 'gdev-testdata', refId: 'A', scenarioId: 'random_walk', alias: queryAlias ?? 'env = $env' }];

  const dataProvider = useQueryRunner({
    queries,
    maxDataPoints: maxDataPoints,
    cacheKey: queries,
  });

By default the system will get the hash key by doing JSON.stringify on objects (but with sorted properties so property order does not matter), same as react-query.

cacheKey can also be an array so you can combine multiple strings (or numbers) or object values

  const queries = [{ uid: 'gdev-testdata', refId: 'A', scenarioId: 'random_walk', alias: queryAlias ?? 'env = $env' }];

  const dataProvider = useQueryRunner({
    queries,
    maxDataPoints: maxDataPoints,
    cacheKey: [queries, maxDataPoints],
  });

If you have really large query objects and want faster hashing by reference there is a util function cacheByRef which returns a unique number for a given object reference.

The cache key hashing will also always append the scene object constructor name to the key to avoid conflicts when same cache key is used for different SceneObject types.

[torkelo]

@leeoniya yes, the hashing by reference is for those cases. But this method described here is not to be used for core dashboards (at least not initially, as there we cache the full scene), only for custom scene apps.

[matyax]

Looks great! Left a couple of comments.

[matyax]

Maybe it's still early, but I'd like to have control over this default TTL, so along with the cacheKey maybe you would want to consider these options.

[matyax]

Similar to https://tanstack.com/query/latest/docs/framework/react/reference/useQuery.

Unrelated with this PR, but, now that I'm reading those docs, it remind me of a conversation we recently had in Explore Logs to retry failed queries. It would be amazing to have the ability to set useQueryRunner() to retry a n times if the query fails.

Implementing this at the app level will be much more complex.

[torkelo]

@matyax implementing retries would be quite simple to do, backend_srv (underlying fetch abstraction) supports it I think

[matyax]

Thinking out loud. If during runtime I purposely change the cacheKey to get a new SceneObject, I would still get the same SceneObject because it was first looked using key, right?

[torkelo]

@matyax ? not sure I understand what you mean, if the cacheKey changes you would get a new scene object

[mdvictor]

Nit: can just be if(obj && obj.parent !== scnee)

[mdvictor]

This LGTM, I think we should go forward with it.

[scenes-repo-bot-access-token]

🚀 PR was released in v5.23.2 🚀