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

[mikhael28]

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]

I've assigned myself to this ticket, as it's a relatively intermediate piece of functionality that might not be the best for newbies, but if you are a moderately experienced developer - please comment and let me know if you are confident in being able to take this on. Instructions: using the Auth library, you can getCurrentSession and get the JWT token, to then get the access token for the react-query api request, and use the refreshToken refresh request to check for an outdated access token.

This article may help: https://blog.logrocket.com/pagination-infinite-scroll-react-query-v3/

[mikhael28]

I've opened this up to others!

[jayeclark]

Going to be a week or so before I land this, due to interview prep, but I'm assigning this to myself since I'm 70% of the way to having a nicely gutted/tree-shaken version of api-rest to replace the existing package. (Might tackle Auth while I'm at it too. 😆)