How to set correct queryKey for queryFn which is pre-memoized with some variables?

[misha-erm]

Hello 👋

Let's say I have some service like this:

export const ViewServiceProvider = ({entityId, entityType, children}) => {
  const viewService = useMemo(
    () => makeViewService({entityId, entityType}),
    [entityId, entityType]
  );
  
  return (<Provider value={viewService}>{children}</Provider>)
}

where Provider is regular React's context provider.

The purpose of this service is to return data for provided entity (i.e. get views that belong to the entity)

So later, down in the React tree, I want to make a request for views:

const viewService = useViewService();

useQuery(['views'], () => viewService.getData())

So the question is: how should I build a correct query key? Should it be like useQuery(['views', viewService])? From docs it's not very clear how react-query will serialize a service object which only contains methods.

Or should I do something like this useQuery(['views', viewService.entityId, viewService.entityType])?

Thank you in advance for any tips!

[misha-erm]

Looks like what I need here is a referential equality for query key instead of 'hash' comparison but can't find whether react-query has such mode

[louis-young]

Hi 👋

I think composing the query key of the entity ID and type is sufficient 🙂

[misha-erm]

well, while I understand that this will do the trick in this case for me it still doesn't feel right) What if this viewService uses more variables inside or even gets some from some external storage (e.g. redux state)? Since viewService is a black box for consumer it might be very hard to determine correct dependencies and requires me to design interface of service especially for using with react-query

[louis-young]

Typically, query hooks pass variables from the query key into the query function. As you're wrapping this up in your service, you can't do this. Have you tried including the service or specific service function in the query key? Query keys are hashed deterministically but they are meant to be serialisable. Please see: https://tanstack.com/query/v4/docs/react/guides/query-keys

[misha-erm]

unfortunately objects with methods and private properties are not serialisable :(
JSON.stringify({method1() {}, method2() {}}) will generate {} as a hash (and react-query is using JSON.stringify for serialisation)

[TkDodo]

you'd need to implement your own queryKeyHashFn if you want that.

[misha-erm]

yeah, I was thinking about that. Just didn't figure out a good way to hash object with methods...

For now I changed the interface of my service to give me input for use query, like:

const input = viewService.getInputParams();

useQuery({
  queryKey: ['views', input], 
  queryFn: ({queryKey}) => getData(queryKey[1])
})

can't say I like it though )

maybe I will later just include query hook in my service...