How to create mutation key based on mutation params

[ForeshadowRU]

I have a list of files that will be downloaded on click

In order to download it a mutation is triggered

export const useOrganizationDocument = () => {
   return useMutation([QueryKeys.DOWNLOAD_DOCUMENT], (params) => {
       return axios.get(`api/documents/${params.id}`, {responseType: 'blob'} );
   }, {
      onSuccess: (data) => {
        downloadAsFile(URL.createObjectURL(data.response), data.filename);
      }
   })

}

If I use isLoading param of that mutation is spins on all files of the list.
I want to add params.id as query key, but I am outside of scope for that.
Is there any workaround?

[TkDodo]

a mutations doesn't really need a key. what are you using the key for ?

[ForeshadowRU]

for separate loading states on each file

[ForeshadowRU]

if there is single query key all download buttons starts showing their loading states if you try to download single one of them

[TkDodo]

can you show a codesandbox or stackblitz reproduction of that? If each instance of the download button calls useOrganizationDocument() separately, this shouldn't happen.

[ForeshadowRU]

Ok, i'll post it asap

[sccolbert]

I second this. Frankly, I don't understand @TkDodo comment:

a mutations doesn't really need a key. what are you using the key for ?

If a mutation doesn't need a key, why does mutationKey exist?

In practice, the mutation key is critical for the useIsMutating hook, and sometimes, you don't know what you will be mutating until you receive the arguments to the mutation function.

I would suggest changing mutationKey (and for consistency queryKey) to take an array or a function that returns an array, that can compute the mutation/query key from the arguments passed to the mutation/query function.

[TkDodo]

If a mutation doesn't need a key, why does mutationKey exist?

to be precise: it doesn’t need a key to ensure data is cached correctly like a query needs a key. Every invocation of mutate creates a new Mutation. That’s why the key is not required for mutations, but it is required for queries.

In practice, the mutation key is critical for the useIsMutating hook

Yes, you can use a mutationKey to filter down mutations for hooks like useMutationState and useIsMutating.

and sometimes, you don't know what you will be mutating until you receive the arguments to the mutation function.

You also have access to the mutation itself in the predicate callback, which means you also have access to the mutation’s variables. So if you hit one of those cases, you can do:

useIsMutating({
  mutationKey: ['parts', 'that', 'I', 'know'],
  predicate: (mutation) => checkPartsIDontKnow(mutation.state.variables)
})

[sccolbert]

@TkDodo Thanks! I missed the predicate option. That actually solves my particular issue.

[yudin-s]

I would not make the mutationKey depend on the row id for this. The key is mostly static metadata for the mutation type; the row-specific part is better kept in the mutation variables or in local UI state.

For a single active download, something like this is enough:

const [downloadingId, setDownloadingId] = useState<string | null>(null)

const downloadMutation = useMutation({
  mutationKey: ["download-document"],
  mutationFn: async (documentId: string) => {
    return downloadDocument(documentId)
  },
  onMutate: (documentId) => {
    setDownloadingId(documentId)
  },
  onSettled: () => {
    setDownloadingId(null)
  },
})

return documents.map((doc) => (
  <button
    key={doc.id}
    disabled={downloadingId === doc.id}
    onClick={() => downloadMutation.mutate(doc.id)}
  >
    {downloadingId === doc.id ? "Downloading..." : "Download"}
  </button>
))

If multiple downloads can run at the same time, use a Set of ids instead of a single downloadingId.

So the short version is: keep the mutation key stable, pass the document id to mutate(id), and track the per-row loading state separately.