Почему typescript считает, что свойств data и error, от rtk query из redux toolkit, не существуют?

Question

[DedliParkurKillerDark]

Есть у меня функция под названием "urlShortener", для отправки данных на мой сервер:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const linkApi = createApi({
  reducerPath: 'linkApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000' }),
  endpoints: (build) => ({
    urlShortener: build.mutation<string, string>({
      query: (originalUrl) => ({
        url: '/links',
        body: {
          originalUrl: originalUrl
        },
        method: 'POST'
      })
    }),
    getOriginalUrl: build.mutation<string, string>({
      query: (shortenUrl) => ({
        url: '/' + shortenUrl,
        method: 'GET'
      })
    })
  })
})

Сервер возвращает такие данные при успешном запросе:

Вот такие данные, например если что-то не так с сервером:

И такие данные, если с сервером все в порядке, но что-то не так с запросом:

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

const linkShortenerHandler = () => {
    linkShortener(url).then(res => {
      if (res.error) {
        if (res.error.data) {
          setError(res.error.data)
        } else if (res.error.message) {
          setError(res.error.message)
        }
      } else if (res.data) {
        setResponseContent(res.data)
      }
    })
  }

Происходит ошибка:

В чем проблема?

Answer 1

[Максим Кудряшов]

Тип возвращаемого значения функцией linkShortener определяет два разных результата работы функции. Typescript не знает с чем мы работаем. С объектом в котором data или с объектом в котором error. По этому нам самим нужно сузить тип, в TS это называется Narrowing https://www.typescriptlang.org/docs/handbook/2/nar.... Если в кратце то тебе нужно убедится что error или data присутствуют в объекте.

const linkShortenerHandler = () => {
    linkShortener(url).then(res => {
      if ("error" in res.error && res.error) {
        if (res.error.data) {
          setError(res.error.data)
        } else if (res.error.message) {
          setError(res.error.message)
        }
      } else if ("data" in res.data && res.data) {
        setResponseContent(res.data)
      }
    })
  }

Нужно учесть что конструкция "bar" in foo возвращает true в случае если свойство существует в объекте игнорируя его значение.

const foo = {
  bar: "some value",
  bar1: null,
  bar2: undefined,
}

console.log("bar" in foo) // true
console.log("bar1" in foo) // true
console.log("bar2" in foo) //true
console.log("bar3" in foo) //false

Comments

[DedliParkurKillerDark]

Извини, что так поздно отмечаю решением, просто давно на хабр не заходил)

[DedliParkurKillerDark]

Спасибо большое за ответ