README.md

30 Days of React: Day 18 | Fetch and Axios

---

Click for Table of Contents

Table of Contents

• Dev Notes
• Learnings
  • HTTP Requests
    • GET
    • POST
    • PUT
    • DELETE
  • React Query - GET Request
• Third Party Packages / Resources
• Other References and Good Reads

---

Dev Notes

• CSS reset - version 1.7.3 by @elad2412 used
• React Router used for multi-page like SPA
• Added refGenerator that creates a reference (Ref-[n]) and a global reference refGlobal in misc.js to aid with tracking useEffect + fetch/axios. This is intended to be used along with getTimestamp --- which outputs [hh:mm]-[ss.ms] [optionalMsg] (also a custom function in the same module)
• Used react-icons library for svg assets
• Used loading="lazy" on images fetched from API
• Used React Query for fetching data
  • This is more of an introduction to React Query: Fetching data only
  • Also installed react-query-devtools to get a feel for it

_{[ Go to Table of Contents ]}

Learnings

HTTP Requests

NOTE:

• These are only guidelines and not everyone may follow it
• Ultimately, request handling is dependent on the server's setup

GET

Request to receive data from the server

POST

Request to add a new entry on the server

PUT

Request to create or replace an entry on the server with the representation enclosed in the request body

DELETE

Request to delete an entry on the server

React Query - GET Request

• Fetching data from server/API without useEffect and useState; resulting to simpler code

• Basic syntax for useQuery

  useQuery([queryKeys], queryFn, {...options})
  

  • queryKeys
  • queryFn
  • { ...options }

• Some good to know about React Query as quoted from the official docs:

  Out of the box, React Query is configured with aggressive but sane defaults. Sometimes these defaults can catch new users off guard or make learning/debugging difficult if they are unknown by the user. Keep them in mind as you continue to learn and use React Query:

  • Query instances via useQuery or useInfiniteQuery by default consider cached data as stale
  • Stale queries are refetched automatically in the background when:
    • New instances of the query mount
    • The window is refocused
    • The network is reconnected.
    • The query is optionally configured with a refetch interval.

  
  

  As a result, an optional property was used to limit data querying

  { refetchOnWindowFocus: false }
  

_{[ Go to Table of Contents ]}

Third Party Packages / Resources

Package	Installation	Website	Github
axios	npm i axios	axios-http.com	axios
react router dom	npm i react-router-dom	reactrouter.com	remix-run/react-router
react-icons	npm i react-icons	react-icons.github.io	react-icons
react-query	npm i @tanstack/react-query	tanstack.com	tanstack/query
react-query-devtools	npm i @tanstack/react-query-devtools	tanstack.com	tanstack/query

• thecatapi.com for getting cat data

_{[ Go to Table of Contents ]}

Other References and Good Reads

• HTTP Semantics - Official Docs
• HTTP Overview from tutorialspoint.com
• What is HTTP? from Cloudflare
• HTTP from MDN
• Axios vs. fetch(): Which is best for making HTTP requests? by Faraz Kelhini

_{[ Go to Table of Contents ]}