Evaluating data from dehydrated state

[luixo]

Hello,
I have an app with SSR server on which I dehydrate state after some prefetching, effectively hydrating it back on frontend.
In every request (so far) I have logs field I want to populate my LogsContext with on mount (or before, doesn't matter much).
So, to do that I need the appendLog function (there is also an option to populate initial value of LogsContext, but I prefer to keep dehydrated state only in index.tsx if it's possible), dehydrated state with all the logs and some kind of evaluator that can extract logs from that state. The latter is hard (or I'm doing something terribly wrong).

My current setup is more or less like in this snippet.
Basically I have two problems.
First, I shouldn't compare my queryKeys by reference because they'll differ is they're not plain strings.
Second, I don't have an option to get arguments for my getKey function to walk through all the keys I got. (marked as "???" in the snippet).

I tried to put a one-time-shot useEffect in every useQuery wrapper I have, but this approach have two issues: logs don't get to context all at once (say I prefetched a query I'll not mount for some time on client) and they can get there multiple times if I remount component with a query.

type QueryWithLog<T, Args> = {
  getKey: (args: Args) => QueryKey;
  useFn: (args: Args) => UseQueryResult<T>;
  evaluateLogs: (result: T) => Log[];
}

const myQueryGetKey = (serviceName: string): QueryKey => ['service', serviceName];
const myQuery: QueryWithLog<{info: unknown, logs: Log[]}, string> = {
  getKey: myQueryGetKey,
  useFn: (serviceName) => useQuery(myQueryGetKey(serviceName), () => fetch(...)),
  evaluateLogs: (data) => data.logs,
}

const allQueries: QueryWithLog[] = [myQuery];

const useHydrateLogs = () => {
  const queryClient = useQueryClient();
  const [, setLogs] = useContext(LogsContext);
  useEffect(() => {
    const cachedQueries = queryClient.getQueryCache().getAll();
    allQueries.forEach((query) => {
      const matchedQueries = cachedQueries.filter((cachedQuery) => cachedQuery.queryKey === query.getKey('???')); // <<< !
      matchedQueries.forEach((matchedQuery) => {
        if (matchedQuery.state.data) {
          setLogs((prevLogs) => [...prevLogs, ...query.evaluateLogs(matchedQuery.state.data)]);
        }
      })
    });
  }, []);
}

const App = () => {
  useHydrateLogs();
  return <div>...</div>;
}

Any ideas? :)

[TkDodo]

you can use queryClient.getQueriesData, which supports fuzzy key matching, so:

const matchedQueryData = queryClient.getQueriesData(['service'])

to get all services, independent of their name.

[luixo]

Apparently, it will only work if my queries will have some generic version of their key, like 'service' in your example.
Well, little bit more boilerplate than I expected, but I believe this will work.

type QueryWithLog<T, Args> = {
    getKey: (args: Args) => QueryKey;
    genericKey: string;
    useFn: (args: Args) => UseQueryResult<T>;
    evaluateLogs: (result: T) => Log[];
}

const myGenericKey = 'service';
const myQueryGetKey = (serviceName: string): QueryKey => [myGenericKey, serviceName];
const myQuery: QueryWithLog<{info: unknown, logs: Log[]}, string> = {
    getKey: myQueryGetKey,
    genericKey: myGenericKey,
    useFn: (serviceName) => useQuery(myQueryGetKey(serviceName), () => fetch(...)),
    evaluateLogs: (data) => data.logs,
}

type TypeOfQuery<T> = T extends QueryWithLog<infer TT, string> ? TT : never;

const allQueries: QueryWithLog<any, any>[] = [myQuery];

const useHydrateLogs = () => {
    const queryClient = useQueryClient();
    const [, setLogs] = useContext(LogsContext);
    useEffect(() => {
        allQueries.forEach((queryWithLog) => {
            type LocalQueryType = TypeOfQuery<typeof queryWithLog>;
            const cachedQueries = queryClient.getQueriesData<LocalQueryType>(queryWithLog.genericKey);
            cachedQueries.forEach(([, query]) => {
                setLogs((prevLogs) => [...prevLogs, ...queryWithLog.evaluateLogs(query)]);
            })
        });
    }, []);
}