useSWRMutation for dynamic urls?

[FezVrasta]

The way useSWRMutation works makes it impossible to have properly typed conditional usages.

Take a REST endpoint: PUT books/:id.

If I wanted to create a reusable hook to update a book I have to do this:

export function useUpdateBookMutation(id: string) {
  return useSWRMutation(`books/${id}`, updateBook);
}

This means I can't use useUpdateBookMutation when I don't have an id always present.

If the useSWRMutation interface allowed to pass the url parameter as part of the trigger callback though, this would be trivial.

async function updateBook(urlGenerator, { arg }) {
  return fetch(urlGenerator(arg.id));
}

export function useUpdateBookMutation() {
  return useSWRMutation(id => `/books/${id}`, updateBook);
}

[...]

const App = () => {
  const updateBook = useUpdateBookMutation();
  const [bookId, setBookId] = useState(undefined);

  return <>
    <Dropdown books={books} onSelect={setBookId} />
    {bookId !== undefined &&
      <Button onClick={() => updateBook(trigger(bookId))}>Update selected book</Button>
    }
  </>
}

Is this impossible to achieve with SWR or am I missing something obvious?

[3pleFly]

Yes you are missing something:
export const useSummonTravelArrangements = () => useSWRMutation<unknown, object, string, SummonTravelArrangementBody>( PrivateEndpoints.SUMMON, ( url: string, options: Readonly<{ arg: SummonTravelArrangementBody; }> ) => privateApi .post(${url}/${options.arg.summonId}/travel, options.arg) );

used like so:

` const onSubmit = (data: SummonTravelArrangementFormData) => {
data["summonId"] = summon.id;

trigger(data as unknown as SummonTravelArrangementBody, {
  onSuccess: () => {
    onSubmitSuccess();
    mutatePreferences();
    mutateGetSummon();
  },
});

};
`

I am sharing an improper for the SWR cache because the ID is passed inside the trigger function, but you can easily add a random id to the key, like ${PrivateEndpoints.SUMMON}/${randomId}``

[FezVrasta]

As I thought, I'm not really missing anything... Your solution (properly formatted below for clarity) still uses a static URL and manipulates it in the fetcher function.

The cache key is still the static URL string.

export const useSummonTravelArrangements = () => {
  return useSWRMutation<unknown, object, string, SummonTravelArrangementBody>(
    PrivateEndpoints.SUMMON,
    (url: string, options: Readonly<{ arg: SummonTravelArrangementBody }>) => {
      return privateApi.post(
        `${url}/${options.arg.summonId}/travel`,
        options.arg
      );
    }
  );
};

[3pleFly]

OH you're right. I thought about this for a while now and I know I ran into the same issue as you did, but I gave up on it because the cache and cache key wasn't useful for me in those kind of mutations.

What about conditional data fetching? you know like: useSWR(id ? 'url/id' : null) ?

Also a far reach that's not recommended is writing directly to the cache. I wonder if that work.

[CerealeZ]

Yeah, the hook useSWRMutation lacks many functionalities. I recommend creating your own implementation of the hook using a pattern similar to useRequest from https://ahooks.js.org/hooks/use-request/basic and the mutate api.