Advice API with React

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Eric, great job building this with React! I noticed an issue it has when viewed on Firefox where the second advice won't load due to caching (or in some cases takes a while to load), and this is a known issue I've seen on many of these solutions. You can test it out and see as well. The way to fix this is to add a header object in fetch, like this:

  fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' })
  

  About API calls in React, most people tend to use axios. I think that for this case as a FEM challenge, there almost isn't a huge difference in using the fetch API or axios since it's just a simple GET request, as in, there isn't a need to send new data to the server and you don't need to write a header object with more content. So in this case, as long as you got the basics like error handling, then I think it's all good whether fetch is used or axios, even though axios does have wider browser support. Having said that I think it's also good to use this as an opportunity to practice what could happen in a real-world situation, like in the case of not getting new data due to caching, it'd be good if there could be a way to indicate what is going on, regardless which API method is used. Even something as simple as getting a status code can be very useful!

  Also, the position of your dice icon need to be fixed; I notice you're positioning it via the SVG attributes, and interestingly this is the first solution I've seen that using the SVG circle! You can also try just using a simple div with a border-radius: 50% and use it as a container for the SVG, then you can just position it using display:grid.

  Marked as helpful

  3

  ---

  

  Eric Kobliska•90

  @kob112358Posted over 2 years ago

  @elaineleung Thank you so much for the feedback! I implemented the no-cache, added some more error handling on the fetch request (along with a loading... screen if the load takes >200ms).

  Thank you!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @kob112358 Awesome, works great on Firefox!

  0