Creating query keys using complex objects (e.g., class instances)

[RolginRoman]

Hello team,

I'm trying to figure out best practices for using complex objects (eg. class instances) inside useQuery

Env:

• React
• tanstack-query v5

Objective:

How to use correctly any objects provided, for instance, via React Context that are more complex that POJO.
For instance, class instances.
These instances may or may not have some circular dependencies, that break JSON.stringify (obviously, but still disappointing that JSON.stringify can't do it)😀

TL;DR
how to use DIContext instance that can be of completely unexpected form (circular deps for instance) in query

const useData = (mode: boolean) => {
  const diContext = React.useContext(DIContext);
  const query = useQuery({
    queryKey: [{ prefix: "use", mode }],
    queryFn: () => fetchFunction(diContext), // () => (diContext ? diContext.getData() : undefined),
    staleTime: 1000 * 60 * 1,
  });
  return query;
};

Example

codesandbox example: https://codesandbox.io/p/sandbox/query-keys-with-complex-deps-f5f4gp?file=%2Fsrc%2FQueryUse.tsx%3A14%2C37
Here main points are:

• ExternalService.ts - some class that is instantiated inside the App context (usually an app-wide service, can be 3rd party, so not much freedom here regarding its usage and creation).
• UseQuery.tsx - useQuery is used in this component. It is created based on some primitive input (eg. mode in my example) and an ExternalService instance.
  The instance of the class is provided to useQuery via React.Context only after clicking on Init service button.
  Until that useQuery is waiting (expected), but after an instantiation - useQuery won't refetch value (expected again). However,
  my question is lying here, how to inject/use/apply this new instance and make useQuery work.

Additional info

I see a WA: implement stable serialization by hand (even trying to achieve it in App.tsx - decycledStringify fn), but looks extremely fragile 😔.

I assume, this discussion can be related to the old one here #1829, but maybe anyone has developed an approach around this 

[TkDodo]

you need to provide your own queryKeyHashFn and somehow serialize that dependency