Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

react when to transform data [closed]

$
0
0

I have a very strange situation and I'd appreciate your inputs so much.

In my applications, I use 2 typescript types(TEST1, TEST2) that come from the library I am using as a 3rd-party. I use graphql to fetch data from the server and whatever it returns, it matches those 2 types I mentiond.

Now, the idea is that when the data object returns, one of its 2 nested field are amount which need converting into specific amount. To do this, 2 another api calls are needed to fetch specific settings which will help then to convert amount into the specific amount.

Way 1. We can add this 2 extra calls where we make initial graphql request, then we transform the data immediatelly and finally, we give the FINAL data to the component. Since we decided to format the data right at this place, in the final data, we add formattedAmount beside amount. Problem This caused the problem, because now, the data is not type of TEST1 exactly. So I'd need to go, update the typescript types(meaning that i have to extend and use the new type, because I can't change the original one).

Way 2. we don't format it when we fetch the data, and in the component, we make another 2 requests, get the settings, format the amount here and show in the component. If we choose this way, we would need something like this in the component:

const formattedAmount1 = useTokenFormattedAmount(    daoDetails?.queue.config.scheduleDeposit.token,    daoDetails?.queue.config.scheduleDeposit.amount,  );  const formattedAmount2 = useTokenFormattedAmount(    daoDetails?.queue.config.challengeDeposit.token,    daoDetails?.queue.config.challengeDeposit.amount,  );

useTokenFormattedAmount is a custom hook with useEffect which makes api call, gets the settings, formats the passed amount and returns.

Problem problem is that whenever I want to show formatted amount, I'd ned these 6 lines of code. Right now, I show at 2 places, but it's kind of something that business logic might require to show it in some other places, so I will end up showing this everywhere.

What's the right way to approach this problem ?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>