LOG [AxiosError: Network Error]

나는 그냥 사용자의 category를 받아오고 싶었다.

하지만 쓸데없이 복잡하게 만든 탓일까. 문제가 너무 많았다.

현재 category get 요청을 보내는 과정

// config.js
...
export const API_PATH = {
	...
  categories: `${BASE_URL}/todos/category/`,
  ...
}


// api.js
const metadata = accessToken => {
  return {
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + accessToken,
    },
  };
};

const handleRequest = async request => {
  try {
    const response = await request();
    return response.data;
  } catch (err) {
    console.log(err);
    throw err; // Rethrow the error to handle it further if needed
  }
};

export const Api = {
	...
    getCategory: (accessToken, userId) => {
    	return handleRequest(() =>
      	axios.get(
        	`${API_PATH.category}?user_id=${userId}`,
        	metadata(accessToken),
      		),
   		);
  	},
  }

Api.getCategory는 handleRequest로 에러를 공통적으로 처리하고, API_PATH에서 api url을 가져오고 metadata에서 header를 가져온다.
그리고 이 Api.getCategory는

// useCategoriesQuery.js
import { useQuery } from '@tanstack/react-query';
import { Api } from '@/utils/api';

export const QUERY_KEY = '/category';

const fetcher = async (accessToken, userId) => {
  const data = await Api.getCategory(accessToken, userId);
  return data;
};

const useCategoriesQuery = (accessToken, userId, onSuccess) => {
  return useQuery({
    queryKey: [QUERY_KEY],
    queryFn: () => fetcher(accessToken, userId),
    refetchInterval: 30000,
    refetchIntervalInBackground: true,
    keepPreviousData: true,
    onSuccess: onSuccess,
    onError: error => {
      console.log(error);
    },
  });
};

export default useCategoriesQuery;

react-query에서 콜백함수로 쓰인다.
그래서 카테고리를 받아오는 과정에서 문제가 있는지 확인하려면 5가지 부분을 확인했어야 했다.

• useCategoriesQuery
• Api.getCategory
• API_PATH
• metadata
• handleRequest

그래서인지 정말 자잘한 문제들이 많았다.

• API_PATH에서 categories인데 Api.getCategory에서 category로 불러오고 있었다
• API_PATH가 잘못되어 있었다. 위에서 했던 것처럼 api url을 따로 안 분리해놨었더라면 바로 확인할 수 있었을 것 같기도 하다.
• async await 개념을 잘못 생각해서 한참 동안 accessToken이 undefined인채 api를 보내고 있었는데 모르고 있었다.
• 그외 정말 많은 오타로 인한 문제. 대다수가 정의한 곳과 불러오는 곳의 철자가 달라서 생겼던 문제

그런데 이런 문제가 항상 LOG [AxiosError: Network Error] 로만 로그가 찍히고 VSCode의 problems에도 안나오니 한번에 알아채기 어려웠다.

눈물을 흘린 하루였다.