React & Typescript

Community feedback

• Account deleted

  You could fit a couple more libraries in there 😅😂. In a serious note there are some issues you seem to have missed. It's mostly issues with the api but you can do some workaround to improve the website.

  The api caches for 2 seconds which means if you hit the button to refetch you will actually get the cached version of it until the 2 seconds have passed and then you can refetch from the api. Also in your case you seem to use useQuery and do your async logic. I'm not super familiar with react query but from what I saw it doesn't do a refetch? It does on window focus / unfocus events which is from what I know a default from react query but it doesn't work when you use the button. The button seem to try and invalidate the query but that doesn't trigger a refetch? Needs some investigation. I know that the invalidateQueries will not refetch but just mark the query as stale and then should do automatic refetch but that's not what's happening.

  Anyway do avoid the 2 second cache you can just hit the other endpoint : https://api.adviceslip.com/advice/<advice_id>. This fetches a specific advice from the id you pass. Combining it with a random number generator between 1 - 224 which are all the advice ids

  const MIN_ADVICE_ID = 1;
  const MAX_ADVICE_ID = 224;
  
  /*
   *  Generates and returns a random integer between `MIN_ADVICE_ID` and `MAX_ADVICE_ID`
   *  For more: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
   */
  function generateRandomId() {
    return (
      Math.floor(Math.random() * (MAX_ADVICE_ID - MIN_ADVICE_ID + 1)) +
      MIN_ADVICE_ID
    );
  }
  
  

  You can basically do the random logic yourself and avoid the 2s cache.

  Another issue which is again from the api is that it sends this header from the response:

  "cache-control": "max-age=2, max-age=600, private, must-revalidate"

  Which is exactly what caches it. This is what says the browser to cache the data. themax-age=2 you can guess that it's the 2 seconds. But then they have put also a max-age=600 (not sure why ??)

  The issue here is that chromium based browsers will use the first max-age which is 2s and firefox will use the max-age=600 which means basically you'll have 600s cache in Firefox (10mins).

  Anyway by using the other endpoint and generating the id yourself you basically avoid all of these issues.

  1