Transaction 사용하면서 겪은 상황 (POST 실행 후 then GET)

// Thunks
export const getDocument = createAsyncThunk('document/get', async (path) => {
  console.log('path: ', path)
  return await api
    .get(path)
    .then((res) => res.data)
    .catch((error) => {
      throw new Error('GET-ERROR. 콘솔로그를 확인해주세요.')
    })
})

export const postDocument = createAsyncThunk('document/update', async (payload, { rejectWithValue }) => {
  const { path, document } = payload
  const result = await api
    .post(path, { document })
    .then((res) => res.data)
    .catch((error) => {
      throw new Error('GET-ERROR. 콘솔로그를 확인해주세요.')
    })
  return result
})


const response = await api
.post(`${import.meta.env.VITE_API_URL}/upload${location.pathname}`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then((res) => {
  dispatch(getDocument(location.pathname))
    .then((res) => {
      if (res.type.includes('fulfilled')) {
        messageApi.open({ type: 'success', content: '파일 업로드 성공!' })
        onSuccess(response.data) // UI 업데이트
      } else {
        messageApi.open({ type: 'error', content: '파일 업로드 실패.' })
        onError() // UI 업데이트
      }
    })
    .catch((error) => {
      messageApi.open({ type: 'error', content: '파일 업로드 실패.' })
      onError() // UI 업데이트
    })

  return res
})

 

 

axios 로 서버에 데이터를 보낸 뒤 그 결과 값을 response 에서 가져오는 것이 아닌 GET 으로 가져온다.

두 번의 API 호출이 일어나는 상황이고, 문제는 POST 후 POST 된 데이터를 GET 으로 조회할때 생겼다.

 

분명 테이블에 저장이 되었는데 GET 으로 가져오질 못했다.

이유 부터 말하자면, 서버 쪽에서 Transaction 을 사용했기 때문이다. Transaction 이 commit 되고 finalize 되기 전 GET 호출이 일어나버린 것이다.

QueryRunner 을 걷어내도 상관 없는 흐름이라 QueryRunner 을 빼버리면 되는데 미래에 또 똑같은 상황이 생길까봐 기록에 남겨둔다.