Is it a good practice to use custom properties on the useQuery options object?

[jvanaert]

Hi,
When we create a new query we can pass an options object. It is not explicitly stated that we can pass arbitrary parameters, but this works.
const { isLoading, error, data } = useQuery('repoData', dataFetchFn, { customOption: 'foo' });

When we later try to iterate over all queries, we can get back this customOption.
queryCache.findAll().map(q => q.options.CustomOption) => ['foo']

Is this behaviour likely to break in the feature, or is it ok to use it this way ? If not is there a better/safer way ?

[TkDodo]

I had no idea that this is working, and typescript would definitely not allow it. What problem are you trying to solve please that you feel the need to attach custom properties onto the options object?

[jvanaert]

We have a set of queries that we want to update through websocket messages. So in our websocket handler, we iterate over all the query instances (via queryCache.findAll) and execute a custom update method that we provided on the query options object. something like this:

const ourOwnDataHook = () => {
 const dataFromMessageIsRelevantForThisQuery = (message) => message.subject === 'repoData';
 const socketUpdater = (socketMessage) => {
    if(dataFromMessageIsRelevantForThisQuery(socketMessage))
      queryClient.setQueryData('repoData', updateFn);
 }; 
 return useQuery('repoData', dataFetchFn, { socketUpdater });
};

const onSocketMessage = (message) => {
  queryCache.findAll().forEach(query => {
    if(query.options && query.options.socketUpdater)
      query.options.socketUpdater(message);
  });
};

[TkDodo]

so, unless your real code is not as simple as what you've posed, dataFromMessageIsRelevantForThisQuery is a pure function so there's no real need to attach it to the query. if you co-locate the onSocketMessage, possibly in an effect, within the custom hook, you can also closure over additional stuff.

[jvanaert]

thanks for the insights, I'll give it a try that way.

However the custom props in the options could be usefull in some scenario's :)