react-query-pro-use-mutation.js

import { useCallback } from 'react'
import { useMutation } from 'react-query'
import { stringify } from 'qs'

/* We could read this from some config or env */
const API_ROOT = 'https://api.example.com'

/* A helper function to create URL from path and params */
function getUrl(path) {
  return API_ROOT + path
}

/* A custom hook that utilizes ReactQuery's useMutation hook */
export default function useMyMutation(mutation, options) {
  const mutationFn = useCallback(
    (variables = {}) => {
      const { method, path, params } = mutation(variables)

      const fetchOptions = {
        body: params ? JSON.stringify(params) : undefined,
        method: method || 'POST'
      }

      return fetch(getUrl(path), fetchOptions).then(res => res.json())
    },
    [mutation]
  )

  return useMutation(mutationFn, options)
}