optimistic-gold
optimistic-gold11mo ago

useCustom transform response.

I have an array of vehicle models fetched from api. The sample model as follows
{
"id": 95,
"name": "Nexon",
"transmission": [
"automatic",
"manual"
],
"fuel_types": [
"petrol",
"diesel",
"electric",
"hybrid"
],
"vehicle_type": "suv"
}
]
{
"id": 95,
"name": "Nexon",
"transmission": [
"automatic",
"manual"
],
"fuel_types": [
"petrol",
"diesel",
"electric",
"hybrid"
],
"vehicle_type": "suv"
}
]
My data model looks like this:
interface IVehicleModel {
id: number;
name: string;
transmission: string[];
fuelTypes: string[];
vehicleType: string;
make?: string;
}
interface IVehicleModel {
id: number;
name: string;
transmission: string[];
fuelTypes: string[];
vehicleType: string;
make?: string;
}
How to map vehicle_type and fuel_types to vehicleType and fuelType of data model.
const { data, isLoading } = useCustom<VehicleResponse>({
url: `${API_URL}/api/v1/vehicles`,
method: "get",
config: {
query: {
offset: currentPage - 1,
limit: limit,
},
},
});
const { data, isLoading } = useCustom<VehicleResponse>({
url: `${API_URL}/api/v1/vehicles`,
method: "get",
config: {
query: {
offset: currentPage - 1,
limit: limit,
},
},
});
4 Replies
kapa.ai
kapa.ai11mo ago
Hi @Anish. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, there isn't a direct example of mapping data from an API response to a different format. However, you can achieve this by using JavaScript's map function to iterate over the data and return a new array where the keys are renamed as per your requirements. Here's an example of how you can do it:
const mappedData = data.map(vehicle => ({
id: vehicle.id,
name: vehicle.name,
transmission: vehicle.transmission,
fuelTypes: vehicle.fuel_types,
vehicleType: vehicle.vehicle_type,
make: vehicle.make, // if 'make' exists in the original data
}));
const mappedData = data.map(vehicle => ({
id: vehicle.id,
name: vehicle.name,
transmission: vehicle.transmission,
fuelTypes: vehicle.fuel_types,
vehicleType: vehicle.vehicle_type,
make: vehicle.make, // if 'make' exists in the original data
}));
In this code, mappedData will be an array of objects where fuel_types and vehicle_type are renamed to fuelTypes and vehicleType respectively. Please note that this is a general JavaScript solution and doesn't specifically pertain to the refine framework. For more specific use cases and features, you may want to refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@1132651711538941964> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold11mo ago
This doesn't help. I've tried the above approach already. I am getting following error. Property 'fuel_types' does not exist on type 'IVehicleModel'. Did you mean 'fuelTypes'?
metropolitan-bronze
metropolitan-bronze11mo ago
You could do something like this: const { isLoading, refetch: getAuthUser } = useCustom<IUserResponse>({ queryOptions: { enabled: true, onSuccess: (data) => { const serialized = getAuthUserRequest.serializer(data.data); return setUserRequestSuccess(serialized); }, }, url: getAuthUserRequest.url(), method: getAuthUserRequest.method, }); Alternatively you could add a serializer either within the meta or a general one: serializeSnakeToCamel(data) Thats how we do it in our application the serializeSnakeToCamel would look like this (works also for nested objects) export const serializeSnakeToCamel = (obj: any): any => { if (obj === null || obj === undefined) { return obj; } if (Array.isArray(obj)) { return obj.map(serializeSnakeToCamel); } if (typeof obj === "object") { return Object.keys(obj).reduce((result: { [key: string]: unknown }, key) => { const camelKey = key.replace(/_\w/g, (m) => m[1].toUpperCase()); const camelValue = serializeSnakeToCamel(obj[key]); result[camelKey] = camelValue; return result; }, {}); } return obj; }; So you have those two options: 1. Add it to "onSuccess" and save it in another state which you then type 2. Add it as a general serializer to the dataProvider OR pass it via the meta as a serializer that will be applied and then you can immediately type useCustom<Vehicle> which then has the correct property in camelCase format