Mapping API Response to Data Type

[ImranAhmed]

Looks like a nifty library.

I've now got this working.

import useSWR from 'swr';
import { User } from '../../models/user';
import HeroImage from '../../components/hero-image/hero-image';
import Layout from '../../components/layout/layout';

const fetcher = (url) => fetch(url).then((r) => r.json());

const HomeContainer: React.FunctionComponent<Props> = ({ user }) => {
    const { data: persons } = useSWR('/api/persons', fetcher);

    const getLayout = () => {
        return (
            <Layout  signedIn user={user}>
                 <div>
                        {persons ? (
                            persons.map((t) => (
                                <li key={t.first_name}>
                                    {t.first_name} {t.last_name}
                                </li>
                            ))
                        ) : (
                            <Spinner />
                        )}
                    </div>
            </Layout>
        );
    };

    return !user ? (
        <div className={style.centre}>
            <Spinner />
        </div>
    ) : (
        getLayout()
    );
};

export default HomeContainer;

The api call (api/persons) response is as follows:

[
   {
      'first_name': 'bob',
      'last_name:'smith'
    }
]

In my application I have a Person type as follows:

export interface Person{
    firstName: string;
    lastName: string;
}

What's the best practice for mapping the person API response to my Person type?

[sergiodxa]

Ideally, the backend would return the keys using camelCase instead of snake_case, as a normal JSON,

If that is not possible, I would wrote a function to transform the case of the data and use it inside the fetcher.

const fetcher = url => fetch(url).then(res => res.json()).then(data => transformCase(data));

Something like that.

[Romstar]

@sergiodxa I used this solution in order to map the server-side data to the view model but since I have a global fetcher function already defined this was less than ideal IMO, it would be nice if I could change a mapping function within the useSWR function call.

[pke]

I tried this but somehow the transformation retriggers the fetcher.

export function transform(order: Order): Order {
  return {
    ...order,
    amount: order.amount * 100,
    deliveryCosts: order.deliveryCosts && order.deliveryCosts * 100,
    emergencyCosts: order.emergencyCosts && order.emergencyCosts * 100,
    // custom props
    totalProducts: order.items?.reduce((total, item) => total + item.quantity, 0) || 0,
    date: new Date(order.invoice.date.replace(" ", "T")),
    statusText: resolveStatus(order.status, order.type),
  }
}

export function useOrder(checkSurroundings?: boolean) {
  const { session } = useSession()
  const { data: order, error, mutate, isValidating } = useSWR<Order>(
    session?.orderId ? [`/v2/order/${session.orderId}`, session.id, checkSurroundings] : null,
    (path, sessionId, check = false) => (
      get(path + `?productsAvailableToday=${check}`, sessionId)
      .then(transform)
    )
  )

If I comment out the .then(transform) the hook is only ever called once.
Otherwise it keeps calling the server without any of the cache keys changed.
I am suspecting the date conversions in my transform might trigger this behaviour?

edit: Seems its solved, the transform tried to access a field in the order which was undefined (order.invoice)

[ImranAhmed]

I ended up mapping to my model in the api call.

I am working with NextJS.

This lives in pages/api/v1

import { NextApiRequest, NextApiResponse } from 'next';
import QueryHelper from '../../../database/queries';
import auth0 from '../../../utils/auth0';
import getDatabaseInstance from '../../../utils/database-instance';
import { Widget } from '../../models/widget';

const mapWidgets = (data: unknown[]): Widget[] => {
    const widgets= new Array<Widget>();

    data.forEach((d) => {
            widget = {
                widgetId : d[widget_id'],
                title: d['title'],
                purchasedBy: d['purchased_by']
            } as Widget;

            widgets.push(widget);
        }
    return widgets;
};

export default auth0.requireAuthentication(async function widgets(
    req: NextApiRequest,
    res: NextApiResponse,
): Promise<void> {
    try {
        const data = await getDatabaseInstance().many(QueryHelper.getWidgets());
        res.status(200).json(mapWidgets(data));
    } catch (error) {
        res.status(error.status || 400).end(error.message);
    }
});

I then just use it in my application as follows:

const { data: widgets} = useSWR('/api/v1/widgets', fetcher);

const fetcher = (url: string): Promise<any> => fetch(url).then((r) => r.json());

export default fetcher;