Как записывать такие данные в интерфейс с помощью RTK QUERY?

Question

[setupx]

Мой productAPI:

code

import { baseAPI } from "@/shared/api/baseAPI";
import { ProductCardDTO } from "@/entities/product/api/types";
import { ProductCard } from "@/entities/product/model/types";
import { mapProductCardDTO } from "@/entities/product/lib/tomap";

export const productAPI = baseAPI.injectEndpoints({
    endpoints: build => ({
        getProductCards: build.query<ProductCard[], number>({
            query: (limit: number = 5) => ({
                url: "/products",
                method: "GET",
                params: {
                    _limit: limit
                }
            }),

            transformResponse: (response: ProductCardDTO[]) => response.map(mapProductCardDTO),
        })
    })
});

Функция, которая преобразует из 1-го интерфейса в другой:

code

import { ProductCardDTO } from "@/entities/product/api";
import { ProductCard } from "@/entities/product/model/types";

export function mapProductCardDTO(dto: ProductCardDTO): ProductCard {
    return {
        id: dto.id,
        title: dto.title,
        currentPrice: dto.price,
        oldPrice: dto.oldPrice,
        isNew: dto.isNew,
        isTop: dto.isTop,
        discount: dto.discount,
        sizes: dto.sizes,
        imagesSrc: dto.imageSrc,
    };
}

Сами интерфейсы:

code

export type ProductCardDTO = {
    id: number;
    title: string;
    price: number;
    oldPrice: number;
    isTop: boolean;
    isNew: boolean;
    discount: number;
    sizes: string[];
    imageSrc: string[];
}

export type ProductCard = {
    id: number;
    title: string;
    currentPrice: number;
    oldPrice: number;
    isNew: boolean;
    isTop: boolean;
    discount: number;
    sizes: string[];
    imagesSrc: string[];
}

и мой легкий json-server

code

{
      "title": "Боди с драпировкой",
      "price": "3 100 ₽",
      "old_price": "1",
      "is_top": true,
      "is_new": false,
      "sizes": [
        "s",
        "m"
      ],
      "image_src": [
        "/public/assets/images/categories/sale.png"
      ]
    }

Я столкнулся с проблемой, что RTK QUERY не записывает значение old_price в oldPrice. Как сделать, чтобы он записывал? Не уж то только 1 способ - это переименовать переменную в интерфейсе с oldPrice на old_price ?

Comments

[setupx]

И вообще актуален ли RTK Query или есть достойные замены?

Answer 1

[Алексей Уколов]

oldPrice: dto.oldPrice
Укажите тут (и везде) правильно название поля в dto, в чём проблема-то?
То, что вы создали какой-то интерфейс ProductCardDTO, вовсе не означает, что RTK магически вам все поля, полученные в ответ на запрос, переименует. Если сервер отдаёт old_price, то так и должно поле в интерфейсе называться. Интерфейс подстраивается под реальность, а не наоборот.

Comments

[setupx]

в чём проблема-то?

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

[Алексей Уколов]