use-query) queryClient.invalidateQueries가 동작하지 않을 때.

useQuery와 useMutation을 사용하던 중, 에러가 발생했다.

에러는 Mutation이후  queryClient.invalidateQueries가 동작하지 않아 useQuery가 실행되지 않는 것.

Mutation을 사용할 기능은 이미지를 저장하는 기능인데,

이미지를 File base로 변환 후 post를 보내면, mutation이후 get이 요청되는 것이 아니라, get요청 이후 post가 들어간다.

우선 queryClient.invalidateQueries가 동작하지 않는 몇몇 경우를 살펴보자

 

1.enabled를 사용했을때.

2. 오타 등의 이유로 Key값이 다를 때.

3.리렌더링 과정에서 queryClient가 stable하지 않을 때.

 

1,2,3)-https://stackoverflow.com/questions/68577988/invalidate-queries-doesnt-work-react-query

Invalidate queries doesn't work [React-Query]

 

4.해당 컴포넌트가 unmout 됐을 때.

4)-https://velog.io/@raverana96/react-query-useMutation-%ED%9B%84-invalidate%ED%95%B4%EB%8F%84-refetch%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C

[react-query] useMutation 후 invalidate해도 refetch가 동작하지 않는 문제

 

5. 키가 아직 stale하다고 판단 되었을 때.

하지만 아쉽게도 위에 모두 내가 가진 오류를 고치진 못했다.

이후 몇 시간 동안 삽질이 계속되었다.

 

이미지를 올리고 내리고를 네트워크 탭을 보며 반복하고 있을 때, 문든 든 생각이 있었다.

Post요청 이전에 Get요청을 보내는 이유가 뭘까?

우선 use-query에는 자동으로 get요청을 보내는 옵션들이 있었다.

윈도우에 포커스가 맞춰지면 자동으로 보내지는 refetchOnWindowFocus,

refetchOnMount 등등 (use-query 옵션

 https://tanstack.com/query/v4/docs/react/reference/useQuery?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Freference%2FuseQuery

useQuery | TanStack Query Docs

 const { mutate, onSuccess, isLoading } = useMutation(
    (params) => {
      return axios.post(`${APIADDRESS}/~~`, params);
    },
    {
      onSuccess: () => {
        const params = {
          //parameters
        };
        return queryClient.invalidateQueries(["key"]);
      },
      onError: (err) => {
        console.log(err);
      },
    }
  );

   const res = useQuery(["get_log", params], queryFn, {
	   onSuccess,
	  });

결론부터 말하자면 refetchOnWindowFocus를 false로 설정하며 에러는 수정됐다.

아래서부턴 에러의 원인을 찾지 못해 에러가 발생한 이유에 대한 개인적인 생각이다.

mutation의 사용 이유는 이미지를 post하기 위해서다.

이미지는 드래그앤 드롭기능을 넣었지만, 직접 파일을 선택하는 경우 Focus가 맞춰지지않는다.

파일을 선택한 이후 Focus는 다시 해당 WIndow로 맞춰지고, refetch가 일어나 get요청이 발생한다.

그 이후 Filebase를 거친 이미지가 mutation으로 post요청되는데, 그 이전에 발생한 get요청 때문에 stale하다고 판단,

(stale은 0이지만 아마 컴퓨터의 연산 속도를 생각하면 0.0000000...초 차이일 것으로 생각된다.)

get요청을 보내지 않고 키값이 가지고 있는 정보를 뿌리게 된다고 생각된다.

 

정확하지 않은 추측성 정보임에 만족하지 않고 좀 더 정확한 이유를 찾아야겠다.