What is the best way to have variable URLs in useSWRMutation calls and/or how to change the verb in useSWR mutations?

[piasastudios]

I'm working on moving away from @reduxjs/toolkit in favor of swr. While I have been able to get mutations to work just fine, I find the way I have to do them as far from elegant, and I think I must be missing something. Please, see the examples below...

In this example, I have a mutation whose URL depends upon the contents of extraArgs. So the original "key" I give the hook doesn't really mean much, and each time I have a URL-schema like this I have to get very hands-on to get the data destructured and moved into the fetch arguments that are expected.

export function MyComponent() {
    const mutator = useSWRMutation(
        '/api/record/[UNKNOWN_RECORD_ID]',
        ( uselessKey, { arg } ) => {

            const { id, ...body } = args;

            return fetch( '/api/record/${id}', {  // this is a template literal; I just had to remove the dashes for the code markup to work
                method: 'PUT',
                body,
            } );
        }
    );

    return (
        <button
            onClick={() => {
                mutator.trigger( {
                    id: 1, // assume that this is not known until the button is clicked
                    prop1: 'foo',
                    prop2: 'whatever',
                    prop3: 'etc...',
                } );
            }}
        >
            Execute useSWRMutation
        </button>
    );
}

I took a look at middleware to help handle this, but it seems to be for useSWR only. Although it "worked", I lost access to the extraArgs part of my mutation.

As I am typing this out, I find myself thinking that this is just the way it is. That said, now that I am done with this part, any thoughts or suggestions?

Secondly, there is this scenario where I use useSWR to execute a fetch and have access to the mutate function, but won't it just go back to a GET verb and thus not be handled by the appropriate PUT, POST, or DELETE?

export function MyComponent() {
    const recordId = 1;

    const query = useSWR(
        `/api/record/${recordId}`,
        ( key ) => {
            fetch( key, {
                method: 'GET',
            } );
        },
    );

    return (
        <button
            onClick={() => {
                // how should HTTP verbs be changed at this point?
                query.mutate( {
                    prop1: 'foo',
                    prop2: 'whatever',
                    prop3: 'etc...',
                } );
            }}
        >
            Execute useSWR Mutation
        </button>
    );
}

Any thoughts or suggestions here?