chore: migrated trace-route query from axios to fetch

Author: a-y-a-n-das

src/components/trace-route/trace-route.tsx

@@ -1,7 +1,6 @@
 import { useTraceRouteQuery } from '@/hooks/use-trace-route-query';
 import { useCommonStore, type Profile } from '@/stores/common-store';
 import { useTraceRouteStore } from '@/stores/trace-route-store';
-import axios from 'axios';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -122,6 +121,7 @@ export const TraceRouteControl = () => {
   }, [activeRouteIndex, traceRouteResults.data]);
 
   useEffect(() => {
+    isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
       if (loadingTimeoutRef.current !== null) {
@@ -227,8 +227,12 @@ export const TraceRouteControl = () => {
         return;
       }
       clearTraceRoute();
-      if (axios.isAxiosError(error) && error.response) {
-        const payload = (error.response.data ?? {}) as TraceRouteErrorPayload;
+      const payload =
+        typeof error === 'object' && error !== null && 'payload' in error
+          ? ((error as { payload?: TraceRouteErrorPayload }).payload ?? {})
+          : null;
+
+      if (payload) {
         const statusText = payload.status ?? 'Trace route failed';
         let errorMsg =
           payload.error ??

src/hooks/use-trace-route-query.spec.ts

@@ -1,5 +1,4 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import axios from 'axios';
 import { useTraceRouteQuery } from './use-trace-route-query';
 import { parseGpxToLatLng } from '@/utils/parse-gpx';
 import {
@@ -8,12 +7,6 @@ import {
   showValhallaWarnings,
 } from '@/utils/valhalla';
 
-vi.mock('axios', () => ({
-  default: {
-    post: vi.fn(),
-  },
-}));
-
 vi.mock('@/utils/parse-gpx', () => ({
   parseGpxToLatLng: vi.fn(),
 }));
@@ -94,10 +87,17 @@ const createRouteResponse = () => ({
   ],
 });
 
+const getLastFetchBody = () => {
+  const call = vi.mocked(fetch).mock.calls.at(-1);
+  const init = call?.[1] as RequestInit | undefined;
+  return JSON.parse((init?.body as string) ?? '{}');
+};
+
 describe('useTraceRouteQuery', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(getValhallaUrl).mockReturnValue('http://mock-valhalla');
+    vi.stubGlobal('fetch', vi.fn());
   });
 
   it('should throw when both polyline and file are missing', async () => {
@@ -110,17 +110,21 @@ describe('useTraceRouteQuery', () => {
 
   it('should post encoded polyline request and parse geometry', async () => {
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({
       polyline: '  abc\n123  ',
     });
 
     const result = await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      {
+    expect(fetch).toHaveBeenCalledWith('http://mock-valhalla/trace_route', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
         encoded_polyline: 'abc123',
         shape_match: 'map_snap',
         costing: 'auto',
@@ -130,9 +134,8 @@ describe('useTraceRouteQuery', () => {
           interpolation_distance: 10,
           breakage_distance: 50,
         },
-      },
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+      }),
+    });
 
     expect(parseDirectionsGeometry).toHaveBeenCalledTimes(2);
     expect(showValhallaWarnings).toHaveBeenCalledWith(response.trip.warnings);
@@ -150,14 +153,18 @@ describe('useTraceRouteQuery', () => {
     ]);
 
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({ fileText: '<gpx>...</gpx>' });
     await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      {
+    expect(fetch).toHaveBeenCalledWith('http://mock-valhalla/trace_route', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
         shape: [
           { lat: 52.5, lon: 13.4, type: 'break' },
           { lat: 52.6, lon: 13.5 },
@@ -171,14 +178,16 @@ describe('useTraceRouteQuery', () => {
           interpolation_distance: 10,
           breakage_distance: 50,
         },
-      },
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+      }),
+    });
   });
 
   it('should map accuracy and radius to valhalla trace options', async () => {
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({
       polyline: 'abc123',
@@ -192,23 +201,20 @@ describe('useTraceRouteQuery', () => {
 
     await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      expect.objectContaining({
-        trace_options: {
-          gps_accuracy: 7,
-          search_radius: 60,
-          interpolation_distance: 15,
-          breakage_distance: 75,
-        },
-      }),
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+    expect(getLastFetchBody().trace_options).toEqual({
+      gps_accuracy: 7,
+      search_radius: 60,
+      interpolation_distance: 15,
+      breakage_distance: 75,
+    });
   });
 
   it('should prefer explicit gps_accuracy/search_radius over aliases', async () => {
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({
       polyline: 'abc123',
@@ -222,21 +228,18 @@ describe('useTraceRouteQuery', () => {
 
     await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      expect.objectContaining({
-        trace_options: expect.objectContaining({
-          gps_accuracy: 4,
-          search_radius: 25,
-        }),
-      }),
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+    expect(getLastFetchBody().trace_options).toMatchObject({
+      gps_accuracy: 4,
+      search_radius: 25,
+    });
   });
 
   it('should fallback to defaults for invalid numeric trace options', async () => {
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({
       polyline: 'abc123',
@@ -250,23 +253,20 @@ describe('useTraceRouteQuery', () => {
 
     await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      expect.objectContaining({
-        trace_options: {
-          gps_accuracy: 5,
-          search_radius: 50,
-          interpolation_distance: 10,
-          breakage_distance: 50,
-        },
-      }),
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+    expect(getLastFetchBody().trace_options).toEqual({
+      gps_accuracy: 5,
+      search_radius: 50,
+      interpolation_distance: 10,
+      breakage_distance: 50,
+    });
   });
 
   it("should map 'car' costing to valhalla 'auto'", async () => {
     const response = createRouteResponse();
-    vi.mocked(axios.post).mockResolvedValue({ data: response });
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
 
     const { traceRoute } = useTraceRouteQuery({
       polyline: 'abc123',
@@ -275,13 +275,7 @@ describe('useTraceRouteQuery', () => {
 
     await traceRoute();
 
-    expect(axios.post).toHaveBeenCalledWith(
-      'http://mock-valhalla/trace_route',
-      expect.objectContaining({
-        costing: 'auto',
-      }),
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+    expect(getLastFetchBody().costing).toBe('auto');
   });
 
   it('should throw when GPX file has fewer than 2 points', async () => {

src/hooks/use-trace-route-query.ts

@@ -9,7 +9,6 @@ import {
   parseDirectionsGeometry,
   showValhallaWarnings,
 } from '@/utils/valhalla';
-import axios from 'axios';
 
 type Shape = {
   lat: number;
@@ -35,6 +34,12 @@ interface TraceOptions {
   interpolation_distance?: number;
 }
 
+type TraceRouteErrorPayload = {
+  status?: string;
+  error?: string;
+  error_code?: number;
+};
+
 export const useTraceRouteQuery = ({
   polyline,
   fileText,
@@ -107,11 +112,25 @@ export const useTraceRouteQuery = ({
       throw new Error('GPX must contain at least 2 points.');
     }
 
-    const { data } = await axios.post<ValhallaRouteResponse>(
-      `${getValhallaUrl()}/trace_route`,
-      valhallaRequest.json,
-      { headers: { 'Content-Type': 'application/json' } }
-    );
+    const response = await fetch(`${getValhallaUrl()}/trace_route`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(valhallaRequest.json),
+    });
+
+    if (!response.ok) {
+      const errorData =
+        ((await response.json().catch(() => ({}))) as TraceRouteErrorPayload) ??
+        {};
+      const error = new Error(
+        errorData.error || `Trace route failed (${response.status})`
+      ) as Error & { payload?: TraceRouteErrorPayload; status?: number };
+      error.payload = errorData;
+      error.status = response.status;
+      throw error;
+    }
+
+    const data: ValhallaRouteResponse = await response.json();
 
     (data as ParsedDirectionsGeometry).decodedGeometry =
       parseDirectionsGeometry(data);