Piggybacking on rtk-query args in hook

[mauriceoc]

I posted an idea here which sort of relates to this.

In our app, we have a couple of places where we piggyback on the query args to configure things on the client, for example:

const [doFoo, { isSuccess }] = useFooMutation();

function onSubmit(values) {
    doFoo({ 
          // some form values, submitted to server - this is typical rtk-query usage
          values,
          // middleware will pick this up, server does not use it
          logThisSpecificQueryFromThisSpecificComponent: true
    })
}

Just curious as to whether it's appropriate to use query arguments for this type of extra information which is only consumed on client.

My understanding is that it will be used as part of the key formed for the cache? Could there be a preferred way to add extra info to rtk-query actions in the component?

[EskiMojo14]

This seems technically valid, yeah.

The only comment i'd have is that you'd have to be careful when using it for queries - since endpoints are cached by serializing the args provided to the query, you'd probably want to provide a custom serializeQueryArgs that excludes any non-relevant arguments. Otherwise, you may end up fetching things more often than you'd like.

[mauriceoc]

Thanks for the feedback! It would be cool if we could add a custom payload to the rtk-query actions without interfering with the caching in any way.

Can we override the serialization for all queries, instead of writing serializeQueryArgs for each one individually? Maybe I could iterate over the endpoint config and add it to all query endpoints that way.

[EskiMojo14]

You can provide a global serializeQueryArgs - it's worth noting that you will probably still want to use defaultSerializeQueryArgs for whatever's left after you've stripped out the internal stuff :)

[mauriceoc]

Many thanks, I'll explore these options!