paretOS icon indicating copy to clipboard operation
paretOS copied to clipboard

Replace 'aws-amplify/api' with `react-query` and 'authorization' http headers

Open mikhael28 opened this issue 2 years ago • 3 comments

The @aws-amplify/api npm package, according to bundle-phobia and an awesome VS Code extension is around 436kb. Which is...an excessive amount of data, even if the total kb reflected in the application bundle only comes out to around 120kb (because the API package includes some GraphQL stuff that we aren't using at all - their tree shaking is not completely optimized, sadly, Amazon do better!)

Anyway, we should replace this BLOATED npm package with React-Query, which is a very exciting new package (that, according to Bundlephobia, only comes out to ~50kb - a huge savings). Apparently, it is an npm module that 'fetches, caches and updates' API requests - apparently, it has some goodies that might make it functionally superior to the amplify library, in addition to having more efficient tree shaking of its functionality! Having data caching could be helpful towards creating a more pure offline experience - let's integrate this library, and take the JWT access token from AWS Cognito and add that as an HTTP header to have the react-query requests function.

Here is the link: https://react-query.tanstack.com/

For the first pull-request, let's have a proof of concept for a specific API endpoint (say, fetching profile information and caching it) - and let's review the implementation and code. After that initial pull-request, we can go ahead and roll it out across the repository and eventually delete the aws-amplify api library!

mikhael28 avatar Apr 12 '22 05:04 mikhael28