Axios - что делать с path params

Опубликовано: 14 апреля, 2022

Столкнулся с проблемой, что Axios не понимает template strings, и не умеет туда (нативно) подставлять переменные.

Например /todo/:id

На stackeoverflow и github аксиоса нашёл код, который встраивается через interceptor и подменяет нужные параметры. Ссылка https://github.com/axios/axios/issues/706

Но для себя вынес это в хелпер, результат которого, уже скармливается в axios.

export const replacePathParams = (url: string, params: Record<string, string | number>) => {
    let updatedUrl = url

    Object.entries(params).forEach(([key, value]) => {
        updatedUrl = updatedUrl.replace(:${key}, encodeURIComponent(value))
    })

    return updatedUrl
}

Получается что то вроде

axios.get(replacePathParams(ROUTES.TODO_BY_ID, { id }))

UPD: возможно стоит вернуться к варианту с interceptor. С ходу он не завёлся из за ошибок typeScript. Конфиг тайпскрипта не ожидает неожиданные поля.

UPD2: завёлся вариант с interceptor, но откатился к старому варианту, когда есть роут

/todo/:id и функция для axios const routeFn = (id) => `/todo/${id}`

сделал это из за возможных неточных замен при подстановке, в варинатах типа /:idCategory/:id

Моё видео на YouTube - URL параметры в Axios