Dynamic mutation synchronization / fixedCacheKey in trigger

[VakarisZ]

Question

How can I use a dynamic amount of mutations with fixedCacheKey? How many mutations my component needs and their fixedCacheKey depends on query results.

Use case

I have a plugin table and need to synchronize state between two buttons:

Single plugin installation button:

const PluginInstallationButton = (props: PluginInstallationButtonProps) => {
    const { pluginType, pluginName, pluginVersion, pluginId } = props;

    const [installPlugin, installationResult] = useInstallPluginMutation({
        fixedCacheKey: pluginId
    });

    const onInstallClick = (
        pluginName: string,
        pluginType: string,
        pluginVersion: string
    ) => {
        installPlugin({
            pluginVersion: pluginVersion,
            pluginName: pluginName,
            pluginType: pluginType
        });
    };

    return (<Button loading={installationResult.isLoading} />)
};

Install all plugins button:

const InstallAllPluginsButton = () => {
    const { data: availablePlugins, isLoading: isLoadingAvailablePlugins } =
        useGetAvailablePluginsQuery();
    const [installPlugin, installationResult] = useInstallPluginMutation();


    // How can I trigger a loading state in each "PluginInstallationButton" ?
    const installAllPlugins = () => {
        availablePlugins.forEach((plugin) => {
            installPlugin({
                pluginVersion: plugin.version,
                pluginName: plugin.name,
                pluginType: plugin.pluginType
            });
        });
    };

    return (<Button onClick={installAllPlugins} />)
}

Ideally, I would be able to pass the fixedCacheKey to the mutation trigger, but I can't. I'm not sure if my overall approach is bad or is there something I'm missing?

[phryneas]

In this case, you'll have to track your loading state manually using the promises returned by the mutation triggers - no matter what you do, the hooks will only track the last mutation.

[VakarisZ]

@phryneas Based on the tests I did, hooks do track multiple mutations as long as their fixedCacheKey is different. It is confusing to me why a component CAN trigger multiple mutations and CAN synchronize mutations, but CAN'T trigger multiple synchronized mutations :/ I guess it boils down to react hook limitations.

What I ended up doing as a workaround:

1. Created a slice that contains plugin installation mutation status
2. Added onQueryStarted to the plugin installation mutation that dispatches actions for the workaround slice.

I'm not sure if there's something that could be done by the library to fix this. Creating a slice to track mutation state when mutations can share state feels bad. Maybe an optional fixedCacheKey parameter in the mutation trigger function would fix it? Though this would probably mean that there's no way to get the mutation result.

[phryneas]

I am honestly confused now.

How do you imagine this working? One hook can return one "latest" value. They return a single result value, and we can't just change their return value.

Again, my recommendation here is

• no fixedCacheKey
• call mutate as many times as you want
• save all the returned promises into an array
• have a local component state to keep a Promise.all promise of all these returned promises

Alternatively, if you want to go the "global" route, just don't use the hook at all, but call dispatch(api.myMutation.initiate(...) multiple times. That would allow you to use multiple different fixedCacheKeys.

[VakarisZ]

Again, my recommendation here is

• no fixedCacheKey
• call mutate as many times as you want
• save all the returned promises into an array
• have a local component state to keep a Promise.all promise of all these returned promises

I'm sorry, but I don't understand how that would allow the InstallAllPlugins and specific PluginInstallationButton to synchronize states. More specifically, if a user clicks InstallAllPlugins how would each PluginInstallationButton then track the promise that corresponds to their specific plugin?

Alternatively, if you want to go the "global" route, just don't use the hook at all, but call dispatch(api.myMutation.initiate(...) multiple times. That would allow you to use multiple different fixedCacheKeys.

I knew I was missing something obvious, but couldn't find it! This right here solved the issue without any workarounds.
So the final solutions is:

• InstallAllPluginsButton does this for each plugin dispatch(agentPluginEndpoints.endpoints.installPlugin.initiate(pluginInfo, { fixedCacheKey: plugin.id }))
• PluginInstallationButton uses a hook with fixedCacheKey that allows the tracking of the mutation.

Thanks a lot for your help and patience!